I have two forms. I want to submit both forms with 1 button. Is there any method that can help me do it?
Example:
<form method="post" action="">
<input type="text" name="something">
</form>
<form method="post" action="">
<input type="text" name="something">
<input type="submit" value="submit" name="submit">
</form>
I want both forms to be submitted with 1 submit button. Any help would be appreciated.
The problem here is that when you submit a form, the current page is stopped. Any activity on the page is stopped. So, as soon as you click "submit" for a form or use JavaScript to submit the form, the page is history. You cannot continue to submit another page.
A simplistic solution is to keep the current page active by having the form's submission load in a new window or tab. When that happens, the current page remains active. So, you can easily have two forms, each opening in a window. This is done with the target attribute. Use something unique for each one:
<form action='' method='post' target='_blank1'>
The target is the window or tab to use. There shouldn't be one named "_blank1", so it will open in a new window. Now, you can use JavaScript to submit both forms. To do so, you need to give each a unique ID:
<form id='myform1' action='' method='post' target='_blank1'>
That is one form. The other needs another ID. You can make a submit button of type button (not submit) that fires off JavaScript on click:
<submit type='button' onclick="document.getElementById('myform1').submit();document.getElementById('myform2').submit();" value='Click to Submit Both Forms'>
When you click the button, JavaScript submits both forms. The results open in new windows. A bit annoying, but it does what you specifically asked for. I wouldn't do that at all. There are two better solutions.
The easiest is to make one form, not two:
<form action='' method='post'>
<input type='text' name='text1'>
<input type='text' name='text2'>
<input type='submit' value='Submit'>
</form>
You can place a lot of HTML between the form tags, so the input boxes don't need to be close together on the page.
The second, harder, solution is to use Ajax. The example is certainly more complicated than you are prepared to handle. So, I suggest simply using one form instead of two.
Note: After I submitted this, Nicholas D submitted an Ajax solution. If you simply cannot use one form, use his Ajax solution.
You have to do something like that :
button :
<div id="button1">
<button>My click text</button>
</div>
js
<script>
$('#button1').click(function(){
form1 = $('#idIFirstForm');
form2 = $('#idISecondForm');
$.ajax({
type: "POST",
url: form1.attr('action'),
data: form1.serialize(),
success: function( response ) {
console.log( response );
}
});
$.ajax({
type: "POST",
url: form2.attr('action'),
data: form2.serialize(),
success: function( response2 ) {
console.log( response2 );
}
});
});
</script>
You could create a pseudo form in the background. No time to write the code, jsut the theory. After clicking submit just stop propagation of all other events and gather all the informations you need into one other form you append to document (newly created via jquery) then you can submit the third form where all the necesary infos are.
Without getting into why you want to use only 1 button for 2 forms being submitted at the same time, these tools that will get the input data available for use elsewhere:
Option 1...
Instead of using <form> - collect the data with the usual Input syntax.
ex: <input type="text" name="dcity" placeholder="City" />
Instead of using the form as in this example:
<form class="contact" method="post" action="cheque.php" name="pp" id="pp">
<label for="invoice">Your Name</label>
<input type="text" id="invoice" name="invoice" />
<button class="button" type="submit" id="submit">Do It Now</button>
</form>
use:
<label for="invoice">Your Name</label>
<input type="text" id="invoice" name="invoice" />
<button type="button" onclick="CmpProc();" style="border:none;"><img src="yourimage.png"/> Do It Now</button>
Then code the function CmpProc() to handle the processing/submittion.
Inside that function use the Javascript form object with the submit() method as in...
<script type="text/javascript">
function submitform() {
document.xxxyourformname.submit();
}
</script>
Somehow I suspect making the two forms into one for the POST / GET is worth reconsidering.
Option 2...
Instead of POST to use the data to the next page consider using PHP's $_SESSION to store each of your entries for use across your multiple pages. (Remember to use the session_start(); at the start of each page you are storing or retrieving the variables from so the Global aspect is available on the page) Also less work.
Look man. This is not possible with only HTML. weither you gether the inputs in one form or else you use jquery to handle this for you.
Related
I have a form to submit and send data to 2 pages via POST.
I have tried the code with javascript. One form submit is working but other submit is not working
<form id="add">
<input type="text" name="test">
<input type="submit" onclick="return Submit();">
</form>
javascript
function SubmitForm()
{
document.forms['add'].action='filecreate.php';
document.forms['add'].submit();
document.forms['add'].action='filecreate.fr.php';
document.forms['add'].submit();
return true;
}
The first submission is not working but 2nd submission is working.
Since you appear to send the exact same data to two different handlers, you can flip the coin - and say that you just submit one form, and process them both in filecreate.php.
As you are sending a form, you cannot send two separate forms in the same HTTP request - so you can either do them both through asynchronous methods, or process them both backend after the submission of one form.
Since you haven't shown any PHP code, I'm making some assumptions and writing some pseudo-code, but it should be enough to get you started.
So first off, set a static action-property to your form.
<form id="add" action="filecreate.php">
<input type="text" name="test">
<input type="submit">
</form>
If you are sending it over POST, then you need to specify the method as well,
<form id="add" action="filecreate.php" method="POST">
Then, in PHP, you can get both files executed if you include it to the other. Meaning, in your filecreate.php, you include the filecreate.fr.php. Once you do that, the contents of that file will be executed as well.
<?php
// Once you require the file, it will be executed in place
require "filecreate.fr.php";
// .. handle the rest of your normal execution here.
That said, if you are doing the very similar thing multiple times, just with different data, you may want to create functions for it instead - going with the DRY principle ("Don't Repeat Yourself"), you can probably create a function that handles the structure and processing, then send the data separately through that function.
Try this :
<form id="add">
<input type="text" name="test">
<input type="button" onclick="return SubmitForm();">
</form>
function SubmitForm()
{
if(document.forms['add'].onsubmit())
{
document.forms['add'].action='filecreate.php';
document.forms['add'].submit();
document.forms['add'].action='filecreate.fr.php';
document.forms['add'].submit();
}
return true;
}
So I have this form:
<form method="post" action="index.php" id="searchform">
<input type="text" name="search" placeholder="Search...">
<input type="image" src="img/img1.png" alt="submit" onmouseover="hover(this);" onmouseout="unhover(this);" /></a>
</form>
When the user searches for something I want to change this div:
<div class = "mainText">
<h2>Today's Events: </h2>
</div>
To say this:
<div class = "mainText">
<h2>Results: </h2>
</div>
How can I do this?
EDIT: Is it possible to run this code from within a php if statement?
jquery .text() seems a better fit, so you can just change the text of the tag.
$(".mainText h2").text("Results:");
More on this here:
http://www.w3schools.com/jquery/html_text.asp
The action in your form is the destination of where your form ends up.
If you are looking to control the dom elements you need something like javascript or jquery to control the front end of your application.
You could use jquery to simply listen for when your user has clicked the button or submitted the form and parse the results (in this case, just switching html text). *Remove the the action destination otherwise the page will redirect to index.php
$('form').submit(function(){
$('.mainText').html('<h2>Results: </h2>');
return false;
});
Common usage is to put an ajax call in the submit function to retrieve some data from outside the page source. Hopefully that puts you on track :)
Is this possible to add to onclick the comment that is in the textarea in the same form? and how do i get it in javascript function?
<form id='comments' method='post'>
<textarea rows='8' cols='80' name='comments'></textarea> <br />
<input type='submit' name='send' onclick='sendcomment(".$photoid.",".$mynick.",".$_POST['comments'].")' value='Wyślij'>
</form>
<script>
function sendcomment(photoid, mynick,comments){ }
</script>
I'm not really sure what you are trying to do. But I think you are over complicating this. Define your action (a PHP controller to deal with the the request) and the form will be submitted by the browser when the submit button is clicked.
<form id='comments' action='/handler.php' method='post'>
<textarea rows='8' cols='80' name='comments'></textarea> <br />
<input type='submit' name='send' />
</form>
UPDATE:
It sounds to me like what you want to do is submit these by AJAX. I'd highly recommend you use the jQuery library to to this.
Add this to your page <head> tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Then change your form to use a class, rather than id because you can only have one id per name for each page. Since you are using a while loop you need to eliminate this issue.
<form class='comments' action='/handler.php' method='post'>
<textarea rows='8' cols='80' name='comments'></textarea> <br />
<input type='submit' name='send' />
</form>
Now, we need some jQuery to help us out...
$(document).on('submit', '.comments', function(event) {
event.preventDefault();
var serialized = $(this).serialize();
$.ajax({
url: "handler.php",
method: "post",
data: serialized,
})
.done(function(data) {
// take some action when the request completes
});
});
This will prevent the default action of submitting the form when you click the button, then the jQuery will take over and serialize (stringify) the form data and send it to the server as an AJAX request. Once the .done fires you can do more, like show the user a message that the submission was successful... maybe disable the submit button so they can't hammer the server with messages easily, etc... I really hope this helps!
I am using a Form in a LightBox which contains some input element.
<form name="imageUploadForm" action="uploadImage.do" method="post" enctype="multipart/form-data">
<input type="text" id="id" name="id" style="display: none;" value="">
<div id="fileUploaderDiv">
<input type='file' name="file0" id ="file0" />
</div>
<button onclick="javascript:ImageUploader.attachImage();">Upload</button>
</form>
can anybody tell me how to copy this form in new one and submit it without redirecting user or knowing him about form submission using javascript or jquery?
http://api.jquery.com/serialize/
$('#yourbutton_notintheexample_you_provided').click(function(){
var myForm = $('form[name=imageUploadForm]')
var data = myForm.serialize();
$.ajax({
url: myForm.attr('action'),
type: myForm.attr('method'),
data: data,
success: function(){
window.alert("write your form handling code here")
}
});
});
or something along the lines.
In prototype, there was a single convenience method, called Form.request, read about it here.
In order to send data to a server (through submitting a form or otherwise) one can use AJAX. The user does not need to be informed (but I'd recommend letting the user know somehow).
JavaScript tutorial
jQuery docs
I have an ajax based login form for my site and have noticed that browsers are not recognising it as a login form and are not remembering passwords for it to ease the user's login.
When the submit button is pressed the values and sent to serverside to check and a response is sent back. If the check passes the the session is set and the page performs a javascript redirect into the members area. The html is very simple and could be the cause of the problem.
HTML:
<input type='text' class='email'>
<input type='password' class='password'>
<a class='submitBtn'>SUBMIT</a>
Thanks guys!
I think I'll do it in another way.
Using a form to submit to a hidden iframe , so the window will act like ajax post(do not refresh the window) and the password remember feature will works
like
<form method="post" id="" action="checkDetail.php" target="myIframe">
<input type='text' class='email'>
<input type='password' class='password'>
<input type="submit" name="" value="" id="Submit"/>
</form>
<iframe name="myIframe" id="myIframe"></iframe>
in this way you have to change a little bit of your response code to notice iframe parent the submit result.
update
it will done automatically by browser. If a form specify 'target' attribute , and there is a iframe has a name attribute that exactly the same as the target attribute of the form, the form action will submit to the iframe.
so when your request is success , your response will appear in the iframe content. Try code like this in the response.
<?php
//php checks database here
?>
<script>
parent.formSuccess({
//your response infomation
});
</script>
and define a formSuccess method in the outer page to handle the submit callback
Found answer on stack : How can I get browser to prompt to save password?
My Version:
<form id='loginForm' target="passwordIframe" method='POST' action="blank.php">
<input name='email' type='text' st='Email'>
<input name='pass' type='password' st='Password'>
<button type='submit'>LOGIN</button>
</form>
<iframe id="passwordIframe" name="passwordIframe" style='display:none'></iframe>
I can confirm that this triggers the password remember features for Chrome (other browsers not yet tested). It is important that the action attribute points to a blank.php. I chose a blank php page and echoed out the $_POST array just to make sure that the values were being submitted via the form.
I will now implement this with my old code that simply uses javascript to pull the values out of the field and checks them via an ajax call. I wonder if I can do away with the submit button all together and just use javascript to submit the form?