Submit multiple form in one click - javascript

So basically I'm having two forms like this:
<form method="post" action="url1">
<input type="hidden" name="add-to-cart" value="product_id1">
<input type="hidden" name="wc_bookings_field_start_date_year" value="2018">
<input type="hidden" name="wc_bookings_field_start_date_month" value="06">
<input type="hidden" name="wc_bookings_field_start_date_day" value="30">
<button type="submit">Add to cart</button>
</form>
<form method="post" action="url1">
<input type="hidden" name="add-to-cart" value="product_id2">
<input type="hidden" name="wc_bookings_field_start_date_year" value="2018">
<input type="hidden" name="wc_bookings_field_start_date_month" value="06">
<input type="hidden" name="wc_bookings_field_start_date_day" value="30">
<button type="submit">Add to cart</button>
</form>
Is there anyway I can merge the two button into one button that submit both forms? Kind of add both product to cart at the same time

You can use a seperate button independent of either forms. On that Button's click event, you can submit both the forms using their submit method.
var btn = document.getElementById("myBtn");
var forms = document.getElementsByTagName("form");
for(var i = 0; i < forms.length; i++) {
forms[i].submit();
}
<form method="post" action="url1">
<input type="hidden" name="add-to-cart" value="product_id1">
<input type="hidden" name="wc_bookings_field_start_date_year" value="2018">
<input type="hidden" name="wc_bookings_field_start_date_month" value="06">
<input type="hidden" name="wc_bookings_field_start_date_day" value="30">
<button type="submit">Add to cart</button>
</form>
<form method="post" action="url1">
<input type="hidden" name="add-to-cart" value="product_id2">
<input type="hidden" name="wc_bookings_field_start_date_year" value="2018">
<input type="hidden" name="wc_bookings_field_start_date_month" value="06">
<input type="hidden" name="wc_bookings_field_start_date_day" value="30">
<button type="submit">Add to cart</button>
</form>
<button id="myBtn">Add both</button>

As far as I know you can't do it since it will make the browser redirect to the URL specified in action attribute of your forms. And it can't redirect to two different locations.
To accomplish multiple form submission , you can use an XMLHttpRequest with JavaScript's FormData API or encode it in JSON before sending it to server.

Related

Create form after index.php&value=1

Hello I have this form code as shown below
<td>
<form action="pay/index.php">
<input type="submit" class="btn btn-primary">
<input type="hidden" value="1.00" name="amount">
</form>
</td>
The result is index.php?amount=1.00, I want to create
index.php?amount=1.00&value=1
How should I add &value=1 after it?
When you use method="GET", which is the default, all the named inputs become URL parameters. So you just need to add another hidden input with the name value.
<form action="pay/index.php">
<input type="submit" class="btn btn-primary">
<input type="hidden" value="1.00" name="amount">
<input type="hidden" value="1" name="value">
</form>

Same form multiple times on page, Get values of submitted form

I have the same form multiple times on my page, I'm trying to use jquery to detect which form is submitted and get its values. But currently only the first form on the page works and the other ones wont trigger. How can I fix this issue?
Forms look like this:
<form id="prepare_payment_form" action="#" method="post">
<input name="merchant_id" type="hidden" value="'.$paypal_acount.'"/>
<input name="merchant_amount" type="hidden" value="'.$entity_price.'"/>
<input name="site_owner_id" type="hidden" value="'.$site_owner_id.'"/>
<input name="site_owner_commission" type="hidden" value="'.$site_owner_commission.'"/>
<input name="currency_code" type="hidden" value="'.$entity_unit->currency.'"/>
<input name="use_sandbox" type="hidden" value="'.$use_sandbox.'"/>
<input name="entity_guid" type="hidden" value="'.$entity_unit->guid.'"/>
<input name="trackingId" type="hidden" value="'.$entity_unit->guid.'-'.$buyer->guid.'-'.$entity_unit->container_guid.'-'.time().'"/>
<input name="entity_plugin" type="hidden" value="'.$plugin_name.'"/>
<input id="prepare_payment" type="submit" name="prepare_payment" class="paypal_button" value="" />
</form>
Jquery code:
$("#prepare_payment").unbind('click').click(function(e) {
e.preventDefault();
var data = {
action: 'the_php_page_that_will_handle_the_request.php',
payment_data: $('#prepare_payment_form').serialize()
};
});
I figured it out thanks. used this:
form:
<form id="'.time().'" action="#" method="post">
<input name="merchant_id" type="hidden" value="'.$paypal_acount.'"/>
<input name="merchant_amount" type="hidden" value="'.$entity_price.'"/>
<input name="site_owner_id" type="hidden" value="'.$site_owner_id.'"/>
<input name="site_owner_commission" type="hidden" value="'.$site_owner_commission.'"/>
<input name="currency_code" type="hidden" value="'.$entity_unit->currency.'"/>
<input name="use_sandbox" type="hidden" value="'.$use_sandbox.'"/>
<input name="entity_guid" type="hidden" value="'.$entity_unit->guid.'"/>
<input name="trackingId" type="hidden" value="'.$entity_unit->guid.'-'.$buyer->guid.'-'.$entity_unit->container_guid.'-'.time().'"/>
<input name="entity_plugin" type="hidden" value="'.$plugin_name.'"/>
<input id="prepare_payment" type="submit" name="prepare_payment" class="paypal_button" value="" />
</form>
Jquery:
$("form").submit(function (e) {
e.preventDefault();
var data = {
action: 'the_php_page_that_will_handle_the_request.php',
payment_data: $(this).serialize()
};
});

Add Value To URL On Form Submit With Jquery

I have this form below when i submit it i want it to append a value to the 6 urls generated from a php query.
<form id="emailform" action="" method="post">
<input type="text" value="" size="30" name="email" id="email">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
This is an example of my link, sitename.com/demo.php?1=demo&2=haha How can i use the form and jquery to append &email=formvalue to the url so sitename.com/demo.php?1=demo&2=haha = sitename.com/demo.php?1=demo&2=haha&email=formvalue ?
Please keep in mind that these urls are generated dynamically with a query.
I tried using attr on a but it doesnt work. I know you have to check for the submit then use attr.
$('#emailForm').submit(function(){ //listen for submit event
}
You can use hidden field like this
<form action="" method="post">
<input type="hidden" name="new_value" value="value"/>
<input type="text" value="" size="30" name="email" id="email">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
or you can add to action of form like this
<form action="http://action_url?new_value=value" method="post">
<input type="text" value="" size="30" name="email" id="email">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
You'd better to use markup input type="hidden" to submit the value
Your Form :
<form action = "sitename.com/demo.php" method="post" >
<input type="hidden" name="1" value="demo" />
<input type="hidden" name="2" value="haha" />
<input type="text" value="" size="30" name="email" />
<input type="submit" name="submit" value="Submit" class="containue-button" />
</form>
Then you just need to submit this form in javascript or jquery.
: )
use serilaize method
$('#emailForm').submit(function(){
//listen for submit event
var all_submit_data = $( '#emailForm' ).serialize() ;
//this will have all input fields values in serilized
}
ref : https://api.jquery.com/serialize/

Getting radio button's value before form submission

How can I get radio button's value before form submission through PHP or jQuery?
It would be great if anybody could suggest some way :)
You can easily do it with Javascript.
<script>
function getRadioValue(id) {
var radioBtn = document.getElementById(id);
alert(radioBtn.value);
}
</script>
<form action="" method="post">
<input type="radio" id="btn1" name="123" value="value1" onclick="getRadioValue(this.id)"/>
<input type="radio" id="btn2" name="123" value="value2" onclick="getRadioValue(this.id)"/>
<input type="radio" id="btn3" name="123" value="value3" onclick="getRadioValue(this.id)"/>
<input type="submit">
</form>
var value = $('#your-form :radio:first').val();
Drive your users nuts:
<form onsubmit="alert(this.fooBar.value);" action=""
onclick="alert(this.fooBar.value);">
<div>
<input type="text" name="fooBar" value="foo bar">
<input type="submit">
</div>
</form>

Sending Dual Forms with one submit, while pulling the email field from first Form into the second

I have two forms I need to send - the first form is a PHP mailer that takes the info from a bunch of fields and mails it to a recipent. That form has a checkbox and if checked I need the email from that for to be sent via ANOTHER form to a list server adding them to mailing list. I need all this to happen when clicking the submit button from the first form. Can anyone help me with a solution. Thanks.
Form
<form class="form_1" method="post" enctype="multipart/form-data" onSubmit="return validate()">
<div class="field">
<div class="text2">
<input type="text" id="name" value="<?php echo $_POST['name'];?>" name="name" title="Name" />
</div>
<!--text2-->
<div class="req">*</div>
<!--req-->
</div>
<!--field-->
<div class="field field_right">
<div class="text2">
<input type="text" id="email" name="email" value="<?php echo $_POST['email'];?>" title="Email" />
</div>
<!--text2-->
<div class="req">*</div>
<!--req-->
</div>
Sign-up for newsletter
Upload Resume:
<div class="clearer"></div>
<br />
<div class="field">
<input type="submit" value="Send" class="btn3" />
</div>
<!--field-->
</form>
Form 2
<form action="http://www.example.com/mailing_list.html" method="post" name="xxxxxxx" onSubmit="return (!(UPTvalidateform(document.UPTmxxxxxx)));">
<input type="hidden" name="submitaction" value="3">
<input type="hidden" name="mlid" value="xxxxxx">
<input type="hidden" name="siteid" value="xxxxxx">
<input type="hidden" name="tagtype" value="q2">
<input type="hidden" name="demographics" value="-1">
<input type="hidden" name="redirection" value="http://www.xxxx.com/thankyou.php">
<input type="hidden" name="uredirection" value="http://">
<input type="hidden" name="welcome" value="">
<input type="hidden" name="double_optin" value="">
<input type="hidden" name="append" value="">
<input type="hidden" name="update" value="on">
<input type="hidden" name="activity" value="submit">
<tr><td colspan="2"></td></tr><tr><td> </td><td> <div class="text1"><input type="text" name="email" id="email" />
</div></td></tr><tr><td colspan="2"><button type="submit" name="send" value="send" class="button1"></button></td></tr>
On your form, have the button tie back to a javascript event
<input type = 'button' value='Submit!' onclick='submitForms()' />
Then have that javascript function, submitForms, actually submit both of your forms.
document.forms["form1"].submit();
document.forms["form2"].submit();
You will probably need to do the second submission using PHPs curl wrapper so that you only have one form for the user to fill in. Is there any reason you must have two forms?
So it would work like this:
User submits form
Code sends first email
If checkbox checked then submit curl request to second form
Complete
A recent SO answers contains a simple intro to the curl post request process: How to issue HTTP POST request?

Categories

Resources