I'm trying to grab some form data in my function but for some reason my fom returns an empty array when i try and run the function .serializeArray() on it. I've checked that to make sure it input element has a name I just can't figure out why this is happening
this is my form
<form id="uploadForm" name="form" action="{{nodeSocketUrl}}/upload?tenant=qa&envelope=true" method="POST" enctype="multipart/form-data" class="forms" style="left:15px">
<fieldset class="units-row">
<h3>Upload A Presentation</h3>
<label for="presentationFileUpload">Select a .ppt, .pptx, .pdf</label>
<input type="file" id="presentationFileUpload" name="presentationFile" onchange="angular.element(this).scope().onFileSelect(this)"/>
<hr>
<input type="submit" id="fileUploadBtn" class="btn btn-primary disabled" value="Upload" ng-click="uploadFile($event)" name="upload">
</fieldset>
</form>
This is my function which I'm hopping to get the form data from
$scope.uploadFile = function(e) {
e.preventDefault();
//$scope.form.preventDefault();
var dCheck = $('input[type="file"]').val();
console.log(e.currentTarget);
var form = $('#uploadForm').serializeArray();
console.log(form);
}
form returns an empty array any help with this would be appreacited
Why not think in pure angular way?
use can use
<input type="file" ng-model="filePath">
And next, get the file name in $scope.filePath
Related
I use Bootstrap 4.5, where it is possible to check the filling of the form, for example by inserting required.
<input type="text" class="form-control" name="name_1" required>
How can I please check where I need to have input #1 OR input #2 filled in?
<input type="text" class="form-control" name="name_1">
<input type="text" class="form-control" name="name_2">
if you want to check whether the input#1 OR input#2 is filled. I recommend you to write a piece of javascript code to check that. if you are familiar with java script, create a separate javascript file and write a function to validate. or else you can just put a script tag inside the head tag as follows.
Javascript Validation:
<head>
<script>
function validateForm(){
if(document.myform.input1.value == "" || document.myform.input2.value == ""){
alert("Both input1 and input2 should not be empty!");
}
}
</script>
</head>
HTML form:
<form name="myform" method="post" onsubmit="validateForm()" >
Input1: <input type="text" name="input1"><br/>
Input2: <input type="text" name="input2"><br/>
<input type="submit">
</form>
Say I have the following formGroup structure:
userGroup = {
name,
surname,
address: {
firstLine,
secondLine
}
}
This forces me to write HTML similar to the following:
<form [formGroup]="userGroup">
<input formControlName="name">
<input formControlName="surname">
<div formGroupName="address">
<input formControlName="firstLine">
<input formControlName="secondLine">
</div>
</form>
Let's say, just for the sake of the example, that you are constrained to write HTML that looks like this:
<form [formGroup]="userGroup">
<input formControlName="name">
<input formControlName="surname">
<div formGroupName="address">
<input formControlName="firstLine">
</div>
<hr>
<div formGroupName="someOtherGroup">
<input id="problemSecondLine" formControlName="???.secondLine">
</div>
</form>
Is there a way, to force the field with id=problemSecondLine to be under userGroup -> address -> secondLine, even though, visually, I have no option but to place it under this particular DIV?
I guess I can manually update via ngModel - but I'm trying to find the cleanest way possible.
You can use formControl directive instead of formControlName
<input id="problemSecondLine" [formControl]="userGroup.get('address.secondLine')">
Plunker Example
I'm trying to insert a variable collected from a form into a URL, but I don't want the "?variable=value" part of the URL.
<form action="http://www.example.com/<?php echo htmlspecialchars($_GET['entry']);?>/" method="GET">
<input type="text" value="" name="entry" id="entry">
<input type='submit'>
</form>
Is there any easy way to do this? I want the browser to go to the following URL when the user types "whatever"
http://www.example.com/whatever/
Edit:
I've changed the code to the following, which seems to work, but have I now introduced a script vulnerability?
<form onSubmit=" location.href = 'https://www.example.com/' + document.getElementById('entry').value + '/' ; return false; ">
<input type="text" value="" name="entry" id="entry" placeholder="Your Promo Code">
<input name="promoSubmit" type="submit" value="Buy Now">
</form>
you could use javascript for this kind of tasks, i don't see why would you involve server side for such thing
but the easiest answer will be like:
<script>
function go(){
window.location='http://www.example.com/'+document.getElementById('url').value;
}
</script>
<input type='text' id='url'>
<button id='btn_go' onclick='javascript:go();'>Go</button>
I have to create a form with a submit bottom following a link
<form action="http://domain/**(((MY TEXT INPUT VALUE)))**.htm">
<input type="text" name="verb">
<input type="submit" value="Conjugate">
</form>
something like this.
please note that every link should be different.
I also want that the new page be opened in a new tab/window
could you please help me, and also make changes to the form code if there is sth under newer standards. Thank you!
You need to use javascript to get the TEXTBOX value and then place it into the form action.
You can create the submit button with an onclickevent.
Or you can use jQuery
$('#btnSubmit').click(function(){
var sTextValue = $("#MyText").val();
$('#MyForm').attr('action', 'htttp://domain/' + sTextValue + '.htm');
$('#MyForm').submit();
});
And the HTML
<form id="MyForm" action="">
<input id="MyText" type="text" name="verb">
<input id="btnSubmit" type="button" value="Conjugate">
</form>
There are many ways to accomplish this. That's just one of them.
<form action="http://domain/**(((MY TEXT INPUT VALUE)))**.htm" id="btnForm">
<input type="text" name="verb" onchange='javascript:document.getElementById("btnForm").action = "http://domain/"+ this.value +".htm"'>
<input type="submit" value="Conjugate" >
</form
This would update as soon you type the text. It wouldn't require jquery. it makes use of onchange event handler of input type text
<form action="http://domain/**(((MY TEXT INPUT VALUE)))**.htm" id="btnForm">
<input type="text" name="verb" onchange='updateFormAction(this.value)'>
<input type="submit" value="Conjugate" >
</form>
<script type="text/javascript">
function updateFormAction(value){
var btnForm = document.getElementById("btnForm");
btnForm.action = "http://domain/"+ value +".htm";
}
</script>
This is more explanatory form. Its based on onchange event handler for text types.
In this form I want to get the value of the text box Enter Techs name: in to the URL but my form method is post.So that my url would look like
http://localhost/cs_3/index.php?page=chat&tech=
Is there any way I could do it.Can't use get method because I don't want the message to be seen in the URL.
<form method="post" >
<label>Enter Username:<input type="text" name="sender"/></label>
<?php if($user['Level'] == 3){?>
<label>Enter Clients name:<input type="text" name="tech"/></label>
<?php }else{ ?>
<label>Enter Techs name:<input type="text" name="tech" /></label>
<?php } ?>
<label>Enter Message:<textarea name="message" rows="8" cols="70"></textarea></label>
<div id="submit"><input type="submit" name="send" value="Send Message"></div>
</form>
You may use action param at your form.
Change it on key press in tech input by javascript (easy with jquery).