I have the the following code and want to use a hyper link to submit my form.
<form name="form_signup" id="form_signup" method="post" action="/" enctype="multipart/form-data">
...
<input type="submit" value="Go to Step 2" name="completed" /> or <a onclick="javascript:this.form.submit();">Proceed without uploading</a></span>
</form>
However, my hyperlink submit doesn't work. It just keeps me on the same page.
Question: any idea why my link submit text doesn't work?
The this in your "javascript:this.form.submit();" refers to the <a> tag, which has no form property, resulting in a JavaScript error.
The smallest required change, but far from the most elegant, would be something like this:
...
Related
I want to server-render an HTML form in such a way that it is not submittable until it has been asynchronously enhanced by my JavaScript.
It looks like there's no disabled attribute for the form element (MDN).
I could add a disabled attribute to the submit button (and then later remove this with JavaScript when ready), but the user could still submit the form by focusing any input and pressing Enter.
Is there any way to prevent submission without JavaScript (short of just hiding the form entirely in the server-rendered HTML, and unhiding it with JS)?
use type="button" attribute to your submit button and then change it to type="submit"
You can simply do
onsubmit="return false"
on the form tag:
<form onsubmit="return false">
<label>input
<input type="text" name="input" name="a" />
</label>
<input type="submit" value="submit" />
</form>
Sorry, answering my own question - it turns out it's easy to make a form unsubmittable (in Chrome 69 at least) just by disabling the submit button.
When the only submit button is disabled, then even focusing a text field and pressing Enter does not submit the form.
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 ;).
I am trying to submit form on image click event but I am getting Uncaught TypeError: Object #<HTMLInputElement> has no method 'submit' this error after click event fire.
My Code:
<form name="searchRef" id="searchRef" method="get" action="#">
<input type="text" name="s" id="ref" value="" class="ref_search" />
<input type="submit" name="submit" id="ref_submit" value="GO" class="ref_submit" />
</span> <span> <img src="http://www.webdeveloper.com/forum/image.php?s=2c556ca62e6fd2a2e4d6ca925fb3fda1&u=8331&dateline=1057444055" alt="Go" onClick="document.getElementById('searchRef').submit();"> </span>
</form>
Any ideas or suggestions? Thanks.
You have to remove/change attribute name of submit button, e.g:
name="btnSubmit"
Otherwise, submit() method of FORM element is overwritten.
Change your submit button name from submit to ref_submit
as shown below
<input type="submit" name="ref_submit" id="ref_submit" value="GO" class="ref_submit" />
this is just an idea, but try using
document.forms["searchRef"].submit();
instead of
document.getElementById('searchRef').submit();
please change the form tag action attribute , repalce # with the target page name say action.php, and also add onsubmit="javascript:return false" in form tag
There is probably already an html element with id=searchRef in your page, so the getElementById() get the wrong one.
A better solution would be to replace your submit button by an input type=image:
<input type="image" name="ref_submit" id="ref_submit" value="GO" class="ref_submit"
src="path/to/your/image" />
Notice this will result in server side by a POST request with $_POST['submit_x'] and $_POST['submit_y'] (which corresponds to the (x,y) mouse coordinates from the top left of the image)
This error occurs because your name attribute as submit, try to change the name attribute or try below code.
<img src="http://www.webdeveloper.com/forum/image.php?s=2c556ca62e6fd2a2e4d6ca925fb3fda1&u=8331&dateline=1057444055" alt="Go" onclick='window.searchRef.submit();' />
I want to make a form like this, and i want to post the form - with javascript - in all the keydowns.
<form action="{$formaction}" enctype="multipart/form-data" method="post">
<input type="text" name="n">
<input type="password" name="pw">
<button name="in" type="submit">enter</button>
</form>
please tell me how to do this.
<form onkeydown="this.submit();">
<!-- form content -->
</form>
<body onkeydown="document.forms["myform"].submit();">
If you do that, the page will reload, just as if you were clicking the submit button.
What you probably want is to attach an onkeydown handler to the password field and submit key presses via AJAX.
For an example look at one of javascript auto-suggest libraries, e.g. AJAX Auto Suggest.
I want my submit button to be positioned somewhere that outside my form element? Do I have any options? With the exception of jquery.
Thanks,
rodchar
Another approach to this is merely to set the form attribute on the button:
<form id="first">
<input type="submit" form="second" value="Submit Second" />
</form>
<form id="second">
<input type="submit" form="first" value="Submit First" />
</form>
Fiddle: http://jsfiddle.net/52wgc2ym/
Original Answer
The natural behavior of a submit button is to submit the nearest form up its hierarchy. The only other way to get a button to submit a form which it doesn't reside in is to use JavaScript (which is what jQuery is, basically).
If necessary, you could reposition the submit button so that it appears as though it's not in the form visually when the page is rendered. You would do this using CSS, which may give the desired result(s).
The submit button needs to be inside the form, yes.
It seems strange to me to want it any other way, anyway. What would be the point if the input controls were in one place on the page, and the submit button was waaay over there somewhere else?
Yes, structurally the submit button needs to be inside a form element for the document to be valid X/HTML. But visually you can position the submit button anywhere you want with appropriate CSS (float, absolute/relative positioning, etc). You could also write JavaScript that will trigger the form submission and tie it to another element.
This is a common situation. I think this will do it (haven't tested it):
<form id="form1" action="someAction.cgi" method="GET">
<!-- other fields go here -->
</form>
<form id="form2" action="someOtherAction.cgi" method="GET">
<!-- other fields go here -->
</form>
<form>
<input value="Form One" type="button"
onclick="document.getElementById('form1').submit();"/>
<input value="Form Two" type="button"
onclick="document.getElementById('form2').submit();"/>
</form>
I'm not sure if you need that last <form>. I seem to remember browsers ignoring events if the button wasn't in a form.
Inputs of type submit only make sense as children of <form> elements. But using CSS I'm sure you can position it wherever you like. Remember form elements are "invisible" so just expand the tags around more of your content and you're covered. Here's the documentation on forms for HTML4, it's still appropriate.
This is the another type of answer getting more clear view from egrunin answer
<form id="form1" name="form1" action="someAction.cgi" method="GET">
<!-- other fields go here -->
</form>
<form id="form2" name="form2" action="someOtherAction.cgi" method="GET">
<!-- other fields go here -->
</form>
Calling by form id:
<form>
<input value="Form One" type="button"
onclick="document.getElementById('form1').submit();"/>
<input value="Form Two" type="button"
onclick="document.getElementById('form2').submit();"/>
</form>
or Calling by form name:
<form>
<input value="Form One" type="button"
onclick="document.form1.submit();"/>
<input value="Form Two" type="button"
onclick="document.form2.submit();"/>
</form>