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>
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.
I have two different buttons like this :
<input type="button" name="but1" id="but1" value="page1" onclick="f('WebForm1')" />
<input type="button" name="but2" id="but2" value="page2" onclick="f('WebForm2')" />
and obviously two other webforms ("WebForm1" and "WebForm2").
using JavaScript, how can I submit the information from the default webform (which I have the buttons in it) to the page that is the value of its button?
(I mean when I click the first button, it should go to WebForm1 and submit data and when I click the second button, it should go to WebForm2 and submit the data)
I've never tried this before so in JavaScript I wrote
function f(t){
var a;
a = document.getElementById['form1'];
a.submit(t); }
but its not working.
Are all these functionalities to be implemented on the same page?
How I see it, you can make the two input buttons the submit buttons of the two different forms.
<form action = "WebForm1">
<input type= submit name="but1" id="but1" value="page1" />
</form>
<form action = "WebForm2">
<input type= submit name="but2" id="but2" value="page2" />
</form>
Also, I'm not sure if anything like a.submit(t) even works.
In HTML5 you can use <button> with form attribute:
<button type="submit" form="form1" value="Submit">Submit</button>
with form attribute you can specify the form element the <button> element belongs to.
Then, in your form:
<form action="WebForm1" method="get" id="form1">
...
</form>
hope this will help. t is the name of the form.
function f(t){
// <form name="WebForm1">
// t is the name of the form
document.t.submit();
}
this work only if the two form are in the same page as where the button are.
I have a button in the jquery mobile form, which defines the post action attributes.
<form id="form1" enctype="multipart/form-data" data-ajax="false" method="POST" target="uploadTarget" action="https://graph.facebook.com/me/photos?access_token="...">
<input id="source" name="source" type="file">
<input id="message" name="message" type="text">
<button id="upload" type="submit" name="upload">Upload Photo</button>
</form>
The post method on the form is not called when I click on the styled button.
The method 'post' is called on the form if I use data-role="none"
<button data-role="none" id="upload" type="submit" name="upload">Upload Photo</button>
But the button obviously loses the mobile styles.
I have data-ajax="false" at the form level as shown (thanks to CBroe!) , but that does not help.
Is there any option to get the jquery mobile styles on buttons, but leave the default Form events and submit/post behavior.
I have already tried to data-ajax="false", but that does not help.
Where did you put that – on the button element, or on the form element? (It’s supposed to be set on the form.)
The problem was the mobile css file. I was using an older version. after including the latest version :
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.min.css" />
It seems to work.
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:
...
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.