I have two XHTML forms (below). I am looking for a way to submit the two forms with one submit button.
First Form Below
<form method= "post" action= "forum_add_111438076.xhtml" >
<input type= "hidden" name="d_token" value="2ab5b36d7d0e5f9fee88cc9a67553db6" />First
Name:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Last Name:<br/><input type="text" name="text" maxlength="20000"/>
<br/><input type="submit" name="submit" value="Submit" /></form>
Second Form
<form method="post" action="forum_add_111438075.xhtml" >
<input type="hidden" name="d_token" value="d0cb19bc6b0d162a11431213976206b8" />
Phone Number:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Address:<br/><input type="text" name="text" maxlength="20000"/>
<br/><input type="submit" name="submit" value="Submit" /></form>
Each form above has its own submit button, but I want to use only one submit button.
You cannot simultaneously submit two forms at once. (like one webpage cannot go to two)
One way around this would be to use Ajax and submit the forms one after another.
Some Example Code. (using jQuery)
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form id="form1">
<input type= "hidden" name="d_token" value="2ab5b36d7d0e5f9fee88cc9a67553db6" />First Name:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Last Name:<br/><input type="text" name="text" maxlength="20000"/>
<br/></form>
<form id="form2">
<input type="hidden" name="d_token" value="d0cb19bc6b0d162a11431213976206b8" />
Phone Number:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Address:<br/><input type="text" name="text" maxlength="20000"/>
<br/></form>
<input type="submit" name="submit" onclick="submitAction()" />
Javascript
submitAction() {
$.post('forum_add_111438076.xhtml', $('#form1').serialize())
$.post('forum_add_111438075.xhtml', $('#form2').serialize())
}
It's not exaclty possible to submit two forms at once to two different places.
The best thing you can do, if you require seperate processing, is to use your receiving page to gather the secondary form post, and send that along to the secondary processing page. PHP using CURL is perfect for something like that.
If you use the get or an ajax function it will allow you to know when the first or second form is completed. Using the get you would use .done if you use ajax you will use the .success Once your first form has completed the submission, you can then submit your other form as shown below.
//Submit your First form
$.get("postOne").done(function(){
//When your first form is completed you can then submit your second form.
$.get("postTwo").done(function(){
});
});
Related
I have a very simple form:
<form>
<fieldset>
<input id="in1" type="text" data-validate="required">
</fieldset>
<fieldset>
<input id="in2" type="text" data-validate="required">
</fieldset>
<input id="btn" type="button" value="Insert your datas" onclick="insert()">
</form>
If third input (id:"btn") had type="submit", notify/verify would work well.
I don't need to submit this form (because I have to launch an insert() function on button onclick),
so I deleted the submit type of my button and unfortunately no notifications appear on my page now.
I may add an handler (like this: $(".elem-demo").notify("Hello Box")) as notify docs suggest, but that is a custom notification, good, but I want to take advantage of verify.js data-validate..no extra-code required for a simple validation like "required" or "number".
How can I fix that?
I wish I was clear of my issue and thanks to answer me.
You can keep the button type submit and can override the default form submission behavior on submit button click via event.preventDefault()
<form id="my-form" onSubmit="myFunction(event)">
<fieldset>
<input id="in1" type="text" data-validate="required">
</fieldset>
<fieldset>
<input id="in2" type="text" data-validate="required">
</fieldset>
<input id="btn" type="submit" value="Insert your datas" onclick="insert()">
</form>
This your function which will be called on form submission.Access the form via its id and call validate to check form for errors.
Calling validate will trigger validation on every element in the form. It accepts a callback function callback(success) which will be called after validation.
function myFunction(e){
e.preventDefault();
$("#my-form").validate(callbackFunction);
// call your other function
}
I've got a problem regarding my contact form page. I did callback after clicking the submit button. I tried not to fill name textbox but form still submits.
My code:
function sendFeedback() {
alert("Thank you for the feedback :)");
}
<form>
<p class="font3">Name:</p>
<input name="name" type="text" maxlength="50" size="30" required/>
<br />
<p class="font3">Email:</p>
<input name="email" type="email" placeholder="" required/>
<br />
<p class="font3">Subject:</p>
<input name="subject" type="text" required/>
<br />
<p class="font3">Message:</p>
<textarea name="comment" row="80" cols="30" required></textarea>
<br>
<br>
<input type="submit" value="Submit" onclick="sendFeedback()">
<input type="reset" value="Reset">
</form>
You should change <form> to <form onsubmit="test()",where test() would go something like this:
test(e){
e.preventDefault();
/* do some validations here */
document.querySelector("form").submit();
}
Hope it helps
The form submitting and your alert triggering are two completely different things. The required attributes you have on the inputs are working correctly. If you leave any of the required inputs blank, the form will not submit to the server, instead you'll trigger standard error messaging in whatever browser you're using (usually a red outline and a popover).
The bit of JavaScript you have (i.e. your alert) will trigger regardless of whether the form submits successfully or not since it's executed BEFORE the submit goes through. You need to either do something like e.preventDefault() or return false at the end of your function, but that will prevent the form from being submitted altogether.
As #dvenkatsagar said, your best option is to change your onclick to onsubmit.
I'm working on a basic landing page with a one-field form. It's my first foray into forms so forgive me if this is basic or obvious.
Here's the code for the form:
<form action="#" method="post" onsubmit="alert('Thank you - we'll send an invite soon.')">
<p><label for="email">ENTER YOUR EMAIL: </label><input type="email" id="email" name="email"/>
<input name="Submit" type="button" value="Submit"/></p>
</form>
As you can see, it's pretty basic. However, the submit button doesn't work; you have to press enter to submit the form. On top of that, I can't get the onsubmit alert to work either. I've tried a thousand different configurations with minimal success, and I'm at the end of my rope.
Change the button type to submit
<input name="Submit" type="submit" value="Submit"/>
Change the Button type to submit and also fix your Javascript, you have an extra apostrophe:
<form action="#" method="post" onsubmit="alert('Thank you - we will send an invite soon.');">
<p><label for="email">ENTER YOUR EMAIL: </label><input type="email" id="email" name="email"/>
<input name="Submit" type="submit" value="Submit"/></p>
</form>
type="button" isn't a submit button. It's a "does nothing" button that you can hang JavaScript from.
You are looking for type="submit".
Since You want to submit a form you mast use input type = submit . For example:
<input type="submit" value="Submit"/>
You can also use
<button type="submit"> Submit </button>
How can I submit 2 forms that are on the same page if 1 Form uses "GET" method & the other uses the "POST". Each form has the same action and goes to the same next page. Need Help. Thanks for everyones help.
How could i get these 2 forms below that use different methods submitted with one button?
<form method="POST" id="Form1" action="nextpage.html">
<input type="text" size="50" name="text_input">
<input type="submit" value="Submit">
<form method="GET" id="Form2" action="nextppage.html">
<input type="text" size="50" name="text_input">
<input type="submit" value="Submit">
One way you can do this is add a hidden field to each form. For example,
<form action="action.php" method="get">
<input type="hidden" name="id" value="form1">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
<form action="action.php" method="post">
<input type="hidden" name="id" value="form2">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
And in your script you just do a check to see what the value of id is. Another way is to check if the request sent to the server was a post or get.
Use AJAX recursively or collect all datas into one form and submit that one.
A simple form-submit will redirects your page at the first instance and the data from the second will be lost. If you can fully control the server-side, then you can submit only the form with POST data (form2 in my example) and you can apply the GET to the action attribute before submitting it.
I mean:
<form name="form1" id="form1" action="index.php" method="GET">
<input type="text" name="foo" value="bar" />
<input type="submit" value="Submit" />
</form>
<form name="form2" id="form2" action="index.php" method="POST">
<input type="text" name="foo" value="bar" />
</form>
<script type="text/javascript">
var f = document.getElementById('form1');
f.onsubmit = function() {
var t = f.getElementsByTagName('input'),
l = t.length,
i = 0,
r = [];
for (i = 0; i < l; i++) {
if (!t[i].name) continue;
r.push(t[i].name + '=' + encodeURIComponent(t[i].value));
}
var p = document.getElementById('form2');
if (r.length) p.action += '?' + r.join('&');
p.submit();
return false;
}
</script>
But AJAX is a better and more elegant solution which is extendable easily when needed with new functionality, so i take my vote to the asynchronous way of this.
It doesn;t really make sense to use two forms with a single button, nor is it valid html.
I would, submit using your POST form, POST to the page, but instead of posting to the page nextpage.html, post to a page like "nextpage.html?var1=value&var2=value"
you would use javascript in the way of:
<form method="POST" id="Form1" action="nextpage.html">
<input type="text" size="50" name="text_input">
<input type="button" value="Submit" onclick="push();">
</form>
<form method="GET" id="Form2" action="nextpage.html">
<input type="text" size="50" name="text_input" id="name_input">
<input type="button" value="Submit" onclick="push();">
</form>
<script>
function push() {
document.getElementById('Form1').action = "nextpage.html?text_input="+document.getElementById('name_input').value;
document.getElementById('Form1').submit();
}
</script>
This should work, although messy, and beware of someone putting a ?, &, =, or otherwise non-alphanumeric character into anything you're going to send to the URL bar. The GET and POST variables would be sent to the page.
You should learn a bit about how HTTP works. The browser does a "request" which is normally either GET or POST, and the response body is parsed as HTML and shown in the web browser.
Posting two forms at the same time doesn't make any sense because that kicks off two HTTP requests. Which one should be used as the new location in the browser?
I've searched for a solution to this issue all over the web. After no success, here I am. I have a form that where I have 3 fields that should contain data. Field 1 is the Zip Code, Field 2 and 3 are City and State respectively.
The JS function getCityByZipHome and getStateByZipHome dynamically return the city and state and insert the values into the the city2 and state2 input fields.
For whatever reason, when I submit the form via mouse-click.. I see the data via $_POST. If the users presses ENTER, the data is never captured and I never see that data from the hidden fields.
Any idea what's wrong here? Note, I've tried almost all the event handlers onblur, onclick, onchange..etc.
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onkeypress="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
I've tried adding onsubmit # the form level as such:
<form method="post" name="something" action="xxSome.php" onsubmit="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
And I've tried onblur without any luck # the input level as such:
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onblur="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
After all the messing around, I actually never solved the issue; rather, I disabled the ENTER key as a submit method.
I have some pretty serious time constraints, but I'm sure this will come up later and I will definitely come back to this issue.
You should do the getcitybyzip and getstatebyzip in the form onSubmit.
Change the type of the submit to button and then add on onClick method to it. ie instead of make it but you need an id on the form to do that. I would be interested though in finding the cause of what is going wrong. Did you try firebug?