jQuery - Submit Form... but also pass submit input name and ID - javascript

I have the following jQuery code, which automatically submits my form whenever the user selects a file to upload in the file input field:
jQuery(document).on('change', 'input[type="file"]', function () {
jQuery(this).parents('form').append('<input type="hidden" name="action" id="action" value="bp_avatar_upload" />').submit();
});
However, I also need to pass along the ID and name of the submit input with this code. The ID and name for the submit input are both upload, as seen in the original, non-jQuery code:
<input type="submit" name="upload" id="upload" value="Upload Image" />
Please advise how I may be able to go about this. Very much appreciative of all help on this!

Just make a basic hidden field within your form as such:
<input type="hidden" name="action" id="action" />
Then Change its value on image Selection while submitting form at same time:
$("#upload").change(function(){
document.getElementById("action").value = "bp_avatar_upload";
$("#form").submit();
});

Related

automatically trigger one of the submit buttons in the form

I have a form as follows:
<form name="dummyform" id="dummyform">
<input type="text" name="dummyname">
<input type="submit" name="save_as_draft" id`="save_as_draft">
<input type="submit" name="send" id="send" hidden>
<button name="Dummysend" id="Dummysend">SEND DUMMY</button>
</form>
I want to trigger only the button with id send automatically when I click on the button with id Dummysend. I can do this by doing this JavaScript code:
document.getElementById("dummyform").submit();
The problem is that there are two submit buttons in this form. How can I only trigger the submit button with id send?
By input name, ID, context...
For example:
document.getElementById("send").click();
Watch out for your HTML too it has some syntax errors:
The 'action' attribute is required for elements.
'id`' is not a valid attribute of the element.

Send file data to server as multipart form data

I have a file input element outside the form. and on form submit i want to send the file content to server as multipart form data. I can't insert the file element into the form. Is there any other way to do this.
<input type="file" class="file" style="width:117px" name="c2vFile" onchange="onFileChange2(this.value);"/>
<form style="display:none" id="frmActivate" enctype="multipart/form-data">
<input type="hidden" id="act_groupActivationJson" name="groupActivationJson" />
<input type="hidden" id="act_remarks" name="comments" />
<input type="hidden" id="activatee" name="activatee" />
</form>
The file input needs to be inside the form tag. You've mentioned you can't, but why not? You would need to remove the "display:none", which serves no purpose currently, as the inputs are all hidden.
You can send a file outside of form tag using AJAX submission. You can follow the below link will helpful for sending file using ajax.
But you have have to invoke this function on click of submit button. Once the file upload done then form submit should be happen.
jQuery Ajax File Upload
I did a small trick with this and it worked, please review if it is helpful for you
Before submitting the form add listener and append the input field with the form.
document.getElementById('frmActivate').addEventListener("submit", function() {
var fileinput = document.getElementById('filein');//take the file input
var thisel = document.getElementById('frmActivate');// take the form element
var cln = fileinput.cloneNode(true);//clone the file input element
thisel.appendChild(cln);//append the clone in the form element
thisel.submit();
})
<input type="file" id="filein" class="file" style="width: 117px" name="c2vFile" onchange="onFileChange2(this.value);" />
<form style="" id="frmActivate" enctype="multipart/form-data">
<input type="hidden" id="act_groupActivationJson" name="groupActivationJson" />
<input type="hidden" id="act_remarks" name="comments" />
<input type="hidden" id="activatee" name="activatee" />
<input type="submit" value="submit" />
</form>
<?php var_dump($_FILES);//to confirm if file is submitted ?>
You can see this code working in this demo
Hope this works for you.

javascript submit form from function

I have this code:
var changedate = document.getElementById("date");
changedate.onchange = submitform;
function submitform() {
document.forms["form"].submit();
}
However I have 3 submit buttons in my form, I want to call the submit button with ID 'save' with this function.
How, can I do this, because at the moment when I change the value in 'date' the form gets submitted, but not in the way i manually push the submit button 'save' at the bottom of the form.
You can use :
document.getElementById("myForm").submit();
where myForm is id of your form.
Try adding <input type="hidden" name="submitbutton"> . In each button, before submitting set the value of this hidden field accordingly. In the code executed when date is changed, set the hidden value as how you set for the save button Eg:
<form method="post" action="something.php">
<input type="submit" value="save" onsubmit="setType('save');return true;"/>
<input type="submit" value="btn2" onsubmit="setType('btn2');return true;"/>
<input type="submit" value="btn3" onsubmit="setType('btn3');return true;"/>
<input type="hidden" id="hdn" value=""/>
</form>
In your js,
function setType(msg){document.getElementById('hdn').value=msg;}
and when date is changed,
setType('save');
document.forms["form"].submit();
Make sure you catch correctly in your php/asp file.
I think the problem comes after submitting the form:
There is a part:
<?php
if (isset($_POST['save'])) {
// do something
}
?>
This is not executed because I dont click on the submit button 'save' in the form.

form is submit but values are not passing

When I submit form by using below function it is submitting but values are not passed through this function. I use all functions but nothing found:
document.getElementById("postad").submit();
Form is given below.
<form action="register.php" id="postad" method="post">
<input class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
<input class="button" type="button" name="save" value="Publish" onclick="send();" />
</form>
Your form contains two form controls. Neither will be a successful control (i.e. one that appears in the submitted data), but for different reasons.
Only form controls with name attributes can be successful. Your text input doesn't have a name. (It also doesn't have a default value, so you need to type in it first).
Buttons can only be successful if they are the submit button used to submit the form. Your button isn't a submit button and you use JavaScript to submit the form.
There is no name attribute in your input text fields
<input name="post_title" class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
.........^

Submitting form using button on enter

I have an html form that I want to only submit from a button located outside my form. I am using javascript to perform some verification and do not want the form to submit unless my javascript functions succeed. I found that if I have the button inside the form it will always submit regardless of the javascript, but if I have it outside the form when a user presses enter it simply submits the form. How can I force enter to perform the button javascript instead of submitting?
<form name="form1" action=<?$_SERVER["PHP_SELF"].'?'.$_SERVER["QUERY_STRING"]?> method="post">
<input type="text" maxlength="5" size="5" name="frmZip" value="">
<input type="hidden" name="frmLat" value="200">
<input type="hidden" name="frmLng" value="200">
<input type="submit" disabled="disabled" style="display:none" />
</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>
EDIT:
Found my solution.
I changed from
</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>
to
<input type="button" name="frmSubmit" onclick="doClick();" value="Submit">
</form>
This prevented the button from submitting the form so I submitted it in my doClick() via javascript.
EDIT 2:
While this seemed to work for a time, it has stopped catching the enter keystroke. I updated my button to:
<input type="submit" name="frmSubmit" onclick="return doClick();" value="Find Stores">
And always returned false in doClick(). This allowed me to submit the form via javascript once everything had executed.
While this doesn't answer your direct question, you can actually keep the button and simply use your validation on the form submit:
<form onsubmit="return validateForm()">
Then, in your validateForm method, return true or false indicating whether or not the validation has passed.
However to answer your direct question, you can also use the same approach on the submit button which will prevent the form from being submitted.
Update
As pointed out in the comments, an unontrusive solution is often desirable so here's that:
document.getElementById('theForm').onsubmit = function() { return validateForm(); };
Your button inside the form will not submit the form on enter if you add preventDefault...
$("form").submit(function(e) {e.preventDefault();});

Categories

Resources