This question already has answers here:
submitting a form when a checkbox is checked
(8 answers)
Closed 4 years ago.
I have a very simple question - how do I get a form to submit when I change the status of a checkbox
Here is my code
<form name="formName" id="formName" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
<input type ="checkbox" name="categories1" value = "1" onClick="submit();">1</input>
</form>
in addition to submit() I have tried:
this.form.submit()
document.getElementById('formName').submit()
this.parentNode.submit()
but none of these work. When I check or uncheck the box nothing happen
any clues?
Refer to the form name attribute:
document.formName.submit()
This works for me in both FF and IE:
<form name="formName" id="formName" action="" method="get">
<input type ="checkbox" name="categories1" value = "1" onclick="this.form.submit();">1</input>
</form>
found the problem - I had a submit button named submit - see Javascript form submit: Object doesn't support this property or method (IE7) for similar soln.
You can try the following
<form name="formName" id="formName" action="" method="get">
<input type ="checkbox" name="categories1" value = "1" **onchange**="this.form.submit();">1</input>
</form>
Related
I've a problem with my form. I want to make standard PHP form but AngularJS is blocking the "Submit" button.
When I click the "Submit" button, it returns some errors in console. And remember I don't want to dynamically submit.
The error is:
An invalid form control with name='' is not focusable.
This example
<body ng-app="mainApp">
<form action="post.php" method="post">
<div ng-controller="MainCtrl">
<label for="titlex">Title</label>
<input id="titlex" class="form-control" type="text" maxlength="75" min="10" name="titlex" required>
</div>
<input type="submit" value="Send">
</form>
</body>
This issue pops up in different cases:
You have a hidden form element that has a required attribute for validation.
You hide an form element before send your data.
Some required form elements does not have a name attribute.
Your submit input does not have a name attribute.
You can try to add a name attribute to your submit input:
<input type="submit" value="Send" name="send">
or you can setup your form to be not validated by the browser mechanics by using
<form name="myform" novalidate>
Try adding name attribute in input tag.
Only form elements with a name attribute will have their values passed when submitting a form.
<input type="submit" value="Send" name="send">
Hope this solves your problem.
This question already has answers here:
behavior of javascript getElementById() when there are elements with duplicate IDs in HTML DOM?
(5 answers)
Closed 6 years ago.
I run into the bug with my multi form page:
I have two forms:
<form>
<input type="submit" id="single-submit" name="form_1" value="Submit 1"/>
</form>
<form>
<input type="submit" id="single-submit" name="form_2" value="Submit 2"/>
</form>
And this JavaScript to prevent double submit:
$("form").one('submit', function() {
$('#single-submit').prop("disabled", true);
});
I'm trying to get the submit name in php:
if(isset($_POST['form_1']))
{
// form 1 submitted
}
if(isset($_POST['form_2']))
{
// form 2 submitted
}
But JS is preventing this, why?
I can recieve submit name="" from second, third... form. But not from the first form on page.
UPDATE:
Removed double ids, added classes instead:
<form action="example.com/process" method="post" accept-charset="utf-8">
<input type="submit" class="single-submit" name="form_1" value="Submit 1"/>
</form>
<form action="example.com/process" method="post" accept-charset="utf-8">
<input type="submit" class="single-submit" name="form_2" value="Submit 2"/>
</form>
And this JavaScript to prevent double submit:
$("form").one('submit', function() {
$('.single-submit').prop("disabled", true);
});
Moreover now first AND second form does not return submit name.
Also tried on( instead, no luck.
So it seems something still wrong with JS.
Without this JS everything is working as expected.
Use a class instead of an id on this : id="single-submit".
An id must be unique.
This question already has answers here:
How can I submit a form using JavaScript?
(10 answers)
Closed 8 years ago.
<form class="myform" action="mail.php">
Your name:<br>
<input type="text" name="myform-name"><br><br>
Your file:<br>
<input type="file" name="myform-file"><br><br>
<button type="submit">Submit</button>
</form>
How do I submit this form using vanilla javascript (not jQuery) directly from the code (without user interaction)?
You can use:
document.getElementsByTagName('form')[0].submit()
Just add a form name in your code:
<form name="myform" class="myform" action="mail.php">
Your name:<br>
<input type="text" name="myform-name"><br>
<button type="submit">Submit</button>
</form>
submit the from from javascript:
<script type="text/javascript">document.myform.submit();</script>
Use this code
document.getElementById("my_form_id").submit();
Docs here
I already tried this in single php file but doesn't work out, so i tried now in two separate php file one for form and another one for process.
How to submit the form on a div or link click?
Code i tried
$(document).ready(function(){
jQuery('.web').click(function () {
$("#g_form").submit();
alert('alert');
});
});
FORM
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="submit"/>
</form>
<div class="web">click</div>
Here is the process file code p.php
<?php
if(isset($_POST['f1'])){
echo $_POST['f1'];
} ?>
When i click the submit button the form is submitting but when i click the .web div it is not submitting the form even i get the alert message but not submitting.
What wrong am doing here? It'll be helpful if i get a idea.
.submit() docs
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method.
Name conflicts can cause confusing failures. For a complete list of
rules and to check your markup for these problems, see
DOMLint.
You give your submit button a name of submit, which the above passage tells you will cause "confusing failures"
So if you accessed the dom element and looked at the .submit property you would see that since you name the button submit instead of .submitbeing a function its a reference to the buttons dom element
HTML
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="submit"/>
</form>
<div class="web">click</div>
JS
//Get the form element
var form = $("#g_form")[0];
console.log(form.submit);
//prints: <input type="submit" value="submit!" name="submit"/>
And when you change the submit name
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="psubmit"/>
</form>
<div class="web">click</div>
JS
var form = $("#g_form")[0];
console.log(form.submit);
//prints: function submit() { [native code] }
so simply give your submit button a different name that does not conflict with a form's properties.
You can trigger submit button click.
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" id="f_submit" name="submit"/>
</form>
<div class="web">click</div>
$(document).ready(function(){
jQuery('.web').click(function () {
$("#f_submit").trigger( "click" );
alert('alert');
});
});
DEMO : http://jsfiddle.net/awladnas/a6NJk/610/
HTML (provide a name for the form, strip the name from the submit):
<form action="p.php" name="g_form" id="g_form" method="post">
<input type="text" name="f1" value="">
<input type="submit" value="submit!"/>
</form>
<div class="web">click</div>
JavaScript
//use jQuery instead of $ in the global scope, to avoid conflicts. Pass $ as parameter
jQuery(document).ready(function($){
//use on(), as it's the recommended method
$('.web').on('click', function () {
//use plain JavaScript. Forms are easily accessed with plain JavaScript.
document.g_form.submit();
alert('alert');
});
});
Change the name of the submit and Try,
<input type="submit" value="submit!" name="mySubmit"/>
Remove the submit from the form and try again:
<form action="http://test.com" id="g_form" method="GET">
<input type="text" name="f1" value=""/>
</form>
<div class="web">click</div>
I changed the action to a real URL and the method to a GET so something is seen changing.
Fiddle
$(".web").live('click', DivClick);
function DivClick(){
$("#g_form").submit();
}
How can I submit a single form while having different forms on a single page?
FORM 1:
<form action="../../../../../xyz/services/xyzOperation" method="post" enctype="multipart/form-data" target="upload_target" class='form-horizontal page formm' id='uploadForm' style="margin-bottom: -1px;">
FORM 2:
<form action="../../../../../xyz/services/create" method="post" enctype="multipart/form-data" target="final_target" class='form-horizontal page formFinal' id='finalForm'>
JS CODE
document.forms["uploadForm"].submit();
I am using the above statement to submit the first form but surprisingly it also submits the second form..
Please help me, as this issue is now becoming so irritating to me.
I have also used the following code but of no avail
document.getElementById("uploadForm").submit();
THANKS
You can try this...
function submitForm(){
document.formName.action="actionName";
document.formName.submit();
}
<form method="post" name="formName" enctype="multipart/form-data">
....
<input type="button" onclick="submitForm()"/>
<form>
Form submissions use the name not the id attribute to identify unique elements. Add
name = "uploadForm"
name = "finalForm"
to their respective elements.
<form>
<input type="submit" name="action" value="UPDATE"/>
<input type="submit" name="action" value="DELETE"/>
</form>
and use $_GET['action'] or $_POST['action'] (depending if you use get or post for form).
if($_POST['action'] == 'DELETE'){
//.....
} elseif($_POST['action'] == 'UPDATE'){
//.....
}
If you assign each form with an element id, then you will be able to manipulate which form to upload as per your script. Id enables DOM to specifically pick the exact form and execute the process. For example
<form id="form1"> blah blah </form>
<form id="form2"> blah blah </form>
assign name to form tag,
<form name="frm1" action="form action"></form>
<form name="frm2" action="form action"></form>
to submit first form
document.frm1.submit();
to submit second form
document.frm2.submit();
I have tried all above mentioned answers but I was unable to succeed, but after that I removed the action attribute of the forms and then used the following code at the time of submission of each form
document.uploadFormName.action="../../../../../xyz/services/abc/fileUpload";
document.uploadFormName.submit();
Then it was not submitting all the forms on the page.
It is a kind of work around but a good one ;).