Develop Reference

Submit multiple form in one click

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.

add new textbox and buttons with javascript

I have 3 textboxs and 6 buttons. I want to add new textbox and buttons after textbox(element2) and buttons(element2) with javascript. How can I do it. :)
<input type="text" id="element1">
<input type="button" id="element1">
<input type="button" id="element1">
<input type="text" id="element2">
<input type="button" id="element2">
<input type="button" id="element2">
<input type="text" id="element3">
<input type="button" id="element3">
<input type="button" id="element3">

Since Ids should be unique, I'll modify your HTML code :
<div id="div">
<input type="text" id="text1">
<input type="button" id="button1a">
<input type="button" id="button1b">
<input type="text" id="text2">
<input type="button" id="button2a">
<input type="button" id="button2b">
<input type="text" id="text2">
<input type="button" id="button2a">
<input type="button" id="button2b">
</div>
And the script would look like this :
<script>
var text2_new = document.createElement("input");
var div= document.getElementById("div");
var button2b= document.getElementById("button2b");
div.insertBefore(text2_new,button2b);
</script>
Repeat the the script for every new element you need to add.
In your context I'd place the group of inputs inside of <div> tags to delimit the groups.

JavaScript/Jquery : Multiple input value with multiple id

I have one html form
<form>
<input type="hidden" name="id" value="1" /><input type="text" name="qty" />
<input type="hidden" name="id" value="2" /><input type="text" name="qty" />
<input type="hidden" name="id" value="3" /><input type="text" name="qty" />
<input type="hidden" name="id" value="4" /><input type="text" name="qty" />
<input type="submit"/>
</form>
When I submit form,Say for id = 1 , qty is 5 or for id = 3, qty is 8. How to get this values in java script or jquery and submit this information to server? I get all the input text values. But I cannot differentiate which qty is for which value?

You should not have two or more elements with the same name or id!
names & ids are meant to be unique.
try this:
<form>
<input type="hidden" name="id[1]" value="1" /><input type="text" name="qty[1]" id="qty1" value="" />
<input type="hidden" name="id[2]" value="2" /><input type="text" name="qty[2]" id="qty2" value="" />
<input type="hidden" name="id[3]" value="3" /><input type="text" name="qty[3]" id="qty3" value="" />
<input type="hidden" name="id[4]" value="4" /><input type="text" name="qty[4]" id="qty4" value="" />
<input type="submit"/>
</form>
You can acces the data in JS like this:
using the element name:
var qty1 = document.forms[0].elements["qty[1]"].value;
Using the element id:
var qty1 = document.getElementById("qt1").value;

Well, to me, your hidden inputs are useless : You say that for input text one is a corresponding hidden field id with a defined value. Then you just have to name your input correctly and you know which id or something is correspondant.
If you want to use jQuery (javascript) as you said, then just do something like this :
<form>
<input type="text" name="qty1" id="qty1" />
<input type="text" name="qty2" id="qty2" />
<input type="text" name="qty3" id="qty3" />
<input type="text" name="qty4" id="qty4" />
<input type="submit" name='submit' id="submitButton" value="submit"/>
</form>
<script>
$('document').on('click','#submitButton',function(event){
event.preventDefault();
//this prevents the click to submit, as you want to get values by javascript... remove this if you post it with php
console.log('QTY1 : '+$('#qty1').val()+' - QTY2 : '+$('#qty2').val()+' - QTY3 : '+$('#qty3').val()+' - QTY 4 : '+$('#qty4').val());
//This is with jQuery, javascript would look like addEventListeneer, and get values like document.getElementById('id').value;
//then, ajax something if you really want to post your form through javascript, but this is not a good solution...
});
</script>
Other solution, better to me, would be just to use php and post directly your form...
<?php
if(isset($_POST['submit'])){
//then, user has clicked on submit button
//CONSIDERED THAT YOU HAVE CHECKED IF THE FIELDS ARE NOT EMPTY
$qty1 = $_POST['qty1'];
$qty2 = $_POST['qty2'];
$qty3 = $_POST['qty3'];
$qty4 = $_POST['qty4'];
//do your stuff with the posted values...
}else{
echo '
<form method="POST" action="yourPage.php">
<input type="text" name="qty1" id="qty1" />
<input type="text" name="qty2" id="qty2" />
<input type="text" name="qty3" id="qty3" />
<input type="text" name="qty4" id="qty4" />
<input type="submit" name="submit" id="submitButton" value="submit"/>
</form>
';
}
?>
Hope it helps

Your html is perfectly valid, but you're not using the name of the elements to your advantage.
<input type="hidden" name="id1" value="1" /><input type="text" name="qty1" />
This will return:
id1=1&qty1=X
But in the end I think your hidden field is just wasting space. All you seem to need is the quantity field with a proper name.
<input type="text" name="qty1" />
<input type="text" name="qty2" />
...
If you use the same name for the elements it will still give you the desired data, but it might need some parsing to figure out "what is what".
<input type="text" name="qty" />
<input type="text" name="qty" />
...
This will basically return:
qty=X,Y (or qty=X&qty=Y)
item ----0-1

You could wrap each pair of hidden-text inputs in div element, then iterate through these divs and find these two inputs inside each of the div elements. It might look like this:
<form>
<div id="keyValuePairs">
<div class="pair">
<input type="hidden" name="id" value="1" /><input type="text" name="qty" />
</div>
<div class="pair">
<input type="hidden" name="id" value="2" /><input type="text" name="qty" />
</div>
<div class="pair">
<input type="hidden" name="id" value="3" /><input type="text" name="qty" />
</div>
<div class="pair">
<input type="hidden" name="id" value="4" /><input type="text" name="qty" />
</div>
</div>
<input type="submit" id="sendBtn"/>
</form>
Then iterate with Jquery
$("#sendBtn").click(function(){
var arr = [];
$("#keyValuePairs .pair").each(function(){
var val = $(this).find("input[name='id']").val();
var key = $(this).find("input[name='qty']").text();
var obj = { val:val, key:key };
arr.push(obj);
});
// some ajax call or any way you want to post data server
});
at the end of iteration, arr should contain objects with val property containing what is in the value property of hidden input, and key property containing what the text present in text inputs.

Take value from form and insert into span

I have a form where the user enters an amount of money. They click a button which updates a span and the PayPal form.
Problem is that when I click update i get nothing. only £ .00 so there is no price.
html
<label>Reason for Payment</label>
<input type="text" id="reason" class="form-control" placeholder="Reason">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Total Amount</label>
<input type="text" id="value" class="form-control input-small" placeholder="Amount">
</div>
</div>
<div class="ptotal">
<span class="total">£ 20.00</span>
</div>
<div class="calculator-submodule">
<button class="btn theme-btn" id="update">Update Price</button>
<div class="calculator-total">
<form action="https://www.paypal.com/uk/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="my#email.com">
<input type="hidden" name="item_name_1" id="trip" value="Canterbury & Brighton">
<input type="hidden" name="amount_1" id="value" value="150" >
<input type="hidden" name="shipping_1" value="0">
<input type="submit" class="btn green" value="Buy Now">
</form>
js
<script>
$('#update').click(function () {
var price = $("#amount").text();
total = $('.total'),
value = $('#value'),
reason = $('#reason')
total.text("£ " + price + ".00");
value.val(price);
trip.val(reason);
});
</script>

You're getting price from a non-existent element.
var price = $("#value").val();
That seems to be what you're looking for. Live demo (click).
It also seems that you're missing some code because trip is undefined.

Can you try this, Assumed you have $("#amount") in your form, I have found only half of your form.
var price = $("#amount").val(); //instead of var price = $("#amount").text();
var total = $('.total'),
value = $('#value'),
reason = $('#reason');
I couldn't find trip for trip.val(reason);

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>