We Keep Coding

JQuery and AJax for multiple submiting buttons of the same class without refeshing the page?

This is my first post I am able to call PHP without refreshing the page. But I am having trouble finding a way to generalize this for multiple buttons.
HTML
<form action="#" class="t" method="POST" id="p1">
<label for="t1">text_1</label>
<input type="text" id="t1" name="t1" value="<?= $t1='' ?>" />
<input type="submit" class="button" id="b1" name="insert" value="submit">
</form>
<form action="#" class="t" method="POST" id="p2">
<label for="t2">text_2</label>
<input type="text" id="t2" name="t2" value="<?= $t2='' ?>" />
<input type="submit" class="button" id="b2" name="select" value="submit">
</form>
I can send the value from the first text input to PHP, but I cannot figure how to do this with multiple forms.
JavaScript
$(document).ready(function(){
$('body').on('submit', '#p1', function(event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type : 'POST',
url : 'answers.php',
data : formData,
success : function(data) {
alert(data);
$('#p').text(data);
}
});
});
});
PHP
$tab1 = (isset($_POST['tab1'])) ? $_POST['tab1'] : null;
$t1 = (isset($_POST['t1'])) ? $_POST['t1'] : null;
echo $tab1;
echo $t1;

I added a code snippet. When submitted it will console.log the value of the desired inputs value
$(document).ready(function(){
$('body').on('submit', '.t', function(event) {
event.preventDefault();
var formData = $(this).serialize();
console.log(formData);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" class="t" method="POST" id="p1">
<label for="t1">text_1</label>
<input type="text" id="t1" name="t1" value="1" />
<input type="submit" class="button" id="b1" name="insert" value="submit">
</form>
<form action="#" class="t" method="POST" id="p1">
<label for="t2">text_2</label>
<input type="text" id="t2" name="t2" value="2" />
<input type="submit" class="button" id="b2" name="select" value="submit">
</form>

Dynamically updating PayPal currency and amount fields using javascript function

I am trying to dynamically update the amount and currency value fields in the following PayPal Buy Now form based on the radio button selection using the function below. I am unable to get it to pass the currency and amount values to the form.
The form:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" name="f" id="f">
<input name="audio-book" type="radio" class="sum" value="54.95" checked="checked" /> NZ$ 54.95
<input name="audio-book" type="radio" class="sum" value="43.95" /> AU$ 43.95
<input name="audio-book" type="radio" class="sum" value="45.00" /> US$ 45.00
<input name="audio-book" type="radio" class="sum" value="34.95" /> EU€ 34.95
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="xxxxxxxxxx">
<input type="hidden" name="lc" value="NZ">
<input type="hidden" name="item_name" value="xxxxxxxxx">
<input type="hidden" name="amount" id="amount" value="">
<input type="hidden" name="currency_code" id="currency_code" value="">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="rm" value="1">
<input type="hidden" name="return" value="xxxxx">
<input type="hidden" name="cancel_return" value="xxxxxx">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted">
<input type="image" class="alignleft wp-image-2884 size-full" src="../uploads/btn_buynow_pp_142x27.png" border="0" name="submit1" id="button" onclick="javascript:doSubmit();" alt="PayPal - The safer...">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
and the function:
<script>
function doSubmit(){
var $cost=0;
var $code="";
var $currency=['NZD', 'AUD', 'USD', 'EUR'];
var parent = document.getElementsByClassName('sum');
for (i = 0; i<parent.length; ++i){
if(parent[i].checked === true){
cost = Number(parent[i].value);
code = currency[i];}
}
document.getElementById('amount').value = cost;
document.getElementById('currency_code').value = code;
document.getElementById('f').submit();
return true;
}
</script>

It seems like everything is fine with the code . The only thing you need to change in the script is the below line :
Currently you have :
code = currency[i];
Change it to :
code = $currency[i];
I just tried it at my end and it worked .

Please have look at my sample fiddle:
http://jsfiddle.net/ghtgggb2/
Couple of things
move the script to the bottom (not sure where it is in your HTML)
move the function to the form for testing onsubmit="return doSubmit()"

Refresh a single database field in a div on submit

Hi i am trying to refresh a single DIV on my page called #total_number. Inside that DIV is a column of a table i've called into the DIV. The DIV counts the number number of records submitted.
What I want it to do is when I submit - I want the DIV to count the total number of records submitted.
<div id="total_number"></div>
<form id="form1" name="form4" method="POST" action="pay.asp">
<label for="comment2"></label>
<input name="comment" type="text" id="comment" size="60" />
<input name="comme" type="hidden" id="comme" value="<%=(rs_user.Fields.Item(" email ").Value)%>" />
<input name="comfn" type="hidden" id="comfn" value="<%=(rs_user.Fields.Item(" fname ").Value)%> <%=(rs_user.Fields.Item("lname ").Value)%>" />
<input name="item" type="hidden" id="item" value="<%=(rs_resq.Fields.Item(" item ").Value)%>" />
<input name="ctype" type="hidden" id="ctype" value="album" />
<input name="price" type="hidden" id="price" value="<%=(rs_resq.Fields.Item(" email ").Value)%>" />
<input type="hidden" name="MM_insert" value="form1">
<input name="imageField" type="image" id="changePanel" src="imgs/buttons/Untitled-1.png" align="top" />
</form>
<script>
$(document).ready(function() {
$("form").on('submit', function(event) {
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "insert.asp",
data: data
}).success(function() {
$("#feedback").append("<div class='messages' style='border:1px purple solid; padding:2px; margin:5px;'>Photo has been added to your favorites!</div>");
setTimeout(function() {
$(".messages").fadeOut(function() {
$(".messages").remove();
});
}, 1000);
$("input[type=text]").val("");
});
});
});
</script>
Now I want a code that will only refresh the DIV #total_number on click on the submit button.

Is it something like the following:
<div id="total_number" count="0" readonly>No submitted records yet!</div>
<form id="form1" name="form4" method="POST" action="pay.asp">
<label for="comment2"></label>
<input name="comment" type="text" id="comment" size="60" />
<input name="comme" type="hidden" id="comme" value="<%=(rs_user.Fields.Item(" email ").Value)%>" />
<input name="comfn" type="hidden" id="comfn" value="<%=(rs_user.Fields.Item(" fname ").Value)%> <%=(rs_user.Fields.Item("lname ").Value)%>" />
<input name="item" type="hidden" id="item" value="<%=(rs_resq.Fields.Item(" item ").Value)%>" />
<input name="ctype" type="hidden" id="ctype" value="album" />
<input name="price" type="hidden" id="price" value="<%=(rs_resq.Fields.Item(" email ").Value)%>" />
<input type="hidden" name="MM_insert" value="form1">
<input name="imageField" type="image" id="changePanel" src="imgs/buttons/Untitled-1.png" align="top" />
</form>
<script>
$(document).ready(function() {
$("form").on('submit', function(event) {
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "insert.asp",
data: data
}).success(function() {
var count = parseInt($("$total_number").attr('count'));
var nCount = (count+1);
$("$total_number").attr('count',nCount).html(nCount+' Records been submitted');
$("#feedback").append("<div class='messages' style='border:1px purple solid; padding:2px; margin:5px;'>Photo has been added to your favorites!</div>");
setTimeout(function() {
$(".messages").fadeOut(function() {
$(".messages").remove();
});
}, 1000);
$("input[type=text]").val("");
});
});
});
</script>

Try Something
<div id="total_number"></div>
<form id="form1" name="form4" method="POST" action="pay.asp">
<label for="comment2"></label>
<input name="comment" type="text" id="comment" size="60" />
<input name="comme" type="hidden" id="comme" value="<%=(rs_user.Fields.Item(" email ").Value)%>" />
<input name="comfn" type="hidden" id="comfn" value="<%=(rs_user.Fields.Item(" fname ").Value)%> <%=(rs_user.Fields.Item("lname ").Value)%>" />
<input name="item" type="hidden" id="item" value="<%=(rs_resq.Fields.Item(" item ").Value)%>" />
<input name="ctype" type="hidden" id="ctype" value="album" />
<input name="price" type="hidden" id="price" value="<%=(rs_resq.Fields.Item(" email ").Value)%>" />
<input type="hidden" name="MM_insert" value="form1">
<input name="imageField" type="image" id="changePanel" src="imgs/buttons/Untitled-1.png" align="top" />
</form>
<script>
$(document).ready(function() {
$("form").on('submit', function(event) {
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "insert.asp",
data: data
}).success(function() {
var count = parseInt($("$total_number").attr('count'));
var nCount = (count+1);
$("#total_number").html(nCount); //Puts response data inside <div id="total_number"></div>
});
});
});
</script>
OR
<div id="submit">ajax</div>
<div id="div_element"></div>
<script>
$('#submit').click(function(event){
$("#div_element").load('URL?html=some_arguments');
});
</script>

jQuery Change Input text upon selection of radio button having multiple forms in same page

Im looking to do something like #JCOC611 did here: https://stackoverflow.com/a/5099898/3223200
In which you can change the TEXT value depending on the RADIO BUTTON selection
Who ever, I would like to have several forms in the same page, how can this be done?
The original code is
<input type="text" id="it" value="">
<input type="radio" name="hey" value="one">
<input type="radio" name="hey" value="two">
<input type="radio" name="hey" value="three">
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Demo here: http://jsfiddle.net/jcoc611/rhcd2/1/
And I would like something like this:
<form action="hello.php" name="form01" method="post">
<input type="hidden" name="productid" value="01" />
<input type="radio" name="price" value="1000">
<input type="radio" name="price" value="2000">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form02" method="post">
<input type="hidden" name="productid" value="02" />
<input type="radio" name="price" value="6000">
<input type="radio" name="price" value="2400">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form03" method="post">
<input type="hidden" name="productid" value="03" />
<input type="radio" name="price" value="500">
<input type="radio" name="price" value="700">
<input type="text" id="it" name="pricevalue" value="">
</form>
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Using multiple forms in the same page, but to use the same function
How can this be done?

Use:
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
jsFiddle example
By using .closest() and .find() you can pick the text input element closest to the relative radio button selected.
Note that IDs must be unique.

A bit less code if you use siblings().
$(document).ready(function(){
$("input[type=radio]").click(function(){
$(this).siblings("input[type=text]").val(this.value);
});
});
jsFiddle example

Java Script - Most Effective Way To Set Value Of An Input Field

I've got a short question colegues! Here it is: is this the fastest script way to change the input field's value when some of the 3 buttons are clicked? Here is the script:
<form name="viewtype" action="javascript:alert(document.viewtype.option.value);">
<input name="option" type="hidden" value="" />
<input name="" type="button" onclick="document.viewtype.option.value='0';"/>
<input name="" type="button" onclick="document.viewtype.option.value='1';"/>
<input name="" type="button" onclick="document.viewtype.option.value='2';"/>
<input name="" type="submit"/>
</form>

I'd do it like so:
HTML:
<form name="viewtype">
<input type="hidden" name="option">
<input type="button" value="0">
<input type="button" value="1">
<input type="button" value="2">
<input type="submit">
</form>
JavaScript:
var form = document.forms.viewtype,
buttons = form.querySelectorAll( '[type="button"]' );
[].forEach.call( buttons, function ( button ) {
button.onclick = function () {
form.elements.option.value = this.value;
};
});
form.onsubmit = function ( e ) {
e.preventDefault();
alert( this.elements.option.value );
};
Live demo: http://jsfiddle.net/9B7du/1/