simultaneously change all input values

simultaneously change all input values - javascript

How could I clear (i.e. set to "") all the input values at once?
<div id="hidden-inputs">
<input type="hidden" value="9013 NE Hwy 99" id="adderss_copy" name="adderss_copy">
<input type="hidden" value="Vancouver" id="city_copy" name="city_copy">
<input type="hidden" value="WA" id="states_id_copy" name="states_id_copy">
<input type="hidden" value="98665" id="zipcode" name="zipcode">
<input type="hidden" value="Clark County" id="county" name="county">
<input type="hidden" value="US" id="country" name="country">
<input type="hidden" value="45.687949" id="latitude" name="latitude">
<input type="hidden" value="-122.659134" id="longitude" name="longitude">
<input type="hidden" value="" id="timezone" name="timezone">
</div>
I've unsuccessfully tried the following:
$('#hidden-inputs').find(':input').val('');
$('#hidden-inputs :input').val('');

Try
$('#hidden-inputs input').val('');

Try
Wrap your code in DOM Ready
$(function () {
$('#hidden-inputs input').val('');
});

Related

Ask user for amount and user value in a form

I'm trying to integrate a payment method called SiamPay on my website but I don't know javascript :(
On SiamPay website they have this instructions:
Copy the following program code to your payment page and
dynamic generate the Amount show below by yourself
<form name="payForm" method="post" action="https://www.siampay.com/b2c2/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" name="amount" value="Amount">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
<input type="hidden" name="payMethod" value="ALL">
</form>
Example in jsp:
<%
double amount = qty * unitPrice ;
%>
<form name="payForm" method="post" action="https://www.siampay.com/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" name="amount" value="<%= amount %>">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
</form>
I would like to create a field where the user can input an amount to pay in THB (Thai currency) and transport that value to this field:
< input type="hidden" name="amount" value="<%= amount %>">.
I think this is relatively easy but because I never user javascript I'm a little confused.
I appreciate any help.
Thank you so much.
Best Regards,
Alex

There's no need to create an extra input field. You have to change the name=amount input's type to number so that it will become visible to the user. Now the user can enter a number of their choice and click the pay button to submit the payment form.
<form name="payForm" method="post" action="https://www.siampay.com/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="number" name="amount" value="" placeholder="Enter amount in THB ">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
</form>

To set value to an element, you can use the document.getElementById().value function. Set the amount data into the Amount variable as shown below.
var Amount = 123;
Also, modify the input tag for the amount to include the same id:
<input type="hidden" name="amount" id="amtId" value="Amount">
var Amount = 123;
function setAmountValue() {
document.getElementById('amtId').value = Amount;
}
<form name="payForm" method="post" action="https://www.siampay.com/b2c2/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy" onclick="setAmountValue();">
<input type="hidden" name="amount" id="amtId" value="Amount">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764">
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
<input type="hidden" name="payMethod" value="ALL">
</form>

try something like this:
<form name="payForm" method="post" action="https://www.siampay.com/eng/payment
/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" id="amount" value="<%= amount %>">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
</form>
<button id='cmdSend'>Click me</button>
<input id='howmuch' type="number" name="amount" value=1000>
And the JS:
document.getElementById("cmdSend").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("cmdSend").innerHTML = "YOU CLICKED ME!";
//Get the value the user typed:
var Value = document.getElementById("howmuch").value;
console.log(Value);
//Set the value into the hidden input, can be done in 2 ways:
document.getElementById("amount").value = Value;
document.getElementById("amount").setAttribute('value',Value);
//Check the value got assigned:
console.log(document.getElementById("amount").value);
}
Fiddle here: https://jsfiddle.net/s2ztkn8L/

Dropdown to select from multiple forms

JS
$('p select[name=Membership_Selection]').change(function(e){
if ($('p select[name=Membership_Selection]').val() == 'Z'){
$('#Z').show();
}else{
$('#Z').hide();
}
});
$('p select[name=Membership_Selection]').change(function(e){
if ($('p select[name=Membership_Selection]').val() == 'A_A''){
$('#A_A').show();
}else{
$('#A_A'').hide();
}
});
$('p select[name=Membership_Selection]').change(function(e){
if ($('p select[name=Membership_Selection]').val() == 'B_B'){
$('#B_B').show();
}else{
$('#B_B').hide();
}
});
$('p select[name=Membership_Selection]').change(function(e){
if ($('p select[name=Membership_Selection]').val() == 'C_C'){
$('#C_C').show();
}else{
$('#C_C').hide();
}
});
$('p select[name=Membership_Selection]').change(function(e){
if ($('p select[name=Membership_Selection]').val() == 'D_D'){
$('#D_D').show();
}else{
$('#D_D').hide();
}
});
$('p select[name=Membership_Selection]').change(function(e){
if ($('p select[name=Membership_Selection]').val() == 'E_E'){
$('#E_E').show();
}else{
$('#E_E').hide();
}
});
$('p select[name=Membership_Selection]').change(function(e){
if ($('p select[name=Membership_Selection]').val() == 'F_F'){
$('#F_F').show();
}else{
$('#F_F').hide();
}
});
$('p select[name=Membership_Selection]').change(function(e){
if ($('p select[name=Membership_Selection]').val() == 'G_G'){
$('#G_G').show();
}else{
$('#G_G').hide();
}
});
$('p select[name=Membership_Selection]').change(function(e){
if ($('p select[name=Membership_Selection]').val() == 'H_H'){
$('#H_H').show();
}else{
$('#H_H').hide();
}
});
CSS
/*------------------------------------*\
Members Dropdown
\*------------------------------------*/
#A_A{display:none;}
#B_B{display:none;}
#C_C{display:none;}
#D_D{display:none;}
#E_E{display:none;}
#F_F{display:none;}
#G_G{display:none;}
#H_H{display:none;}
HTML
<div id="membership" align="right">
<p> <font size="2"><center><b>Become a Member</b></p></font></center>
<table>
<tbody><tr><td>
<p> <center> <font size="2">Alphabet Soup Membership Type</font></center></td></tr><tr><td>
<p><center>
<select name ="Membership_Selection" required>
<option value="Z">-- Select an Option --</option>
<option value="A_A">a a $5 year</option>
<option value="B_B">b b $10 year</option>
<option value="C_C">c c : $15 year</option>
<option value="D_D">d d $20 year</option>
<option value="E_E">e e $25 year</option>
<option value="F_F">f f : $30 year</option>
<option value="G_G">g g : $35 year</option>
<option value="H_H">h h : $40 year</option>
</select></center></p>
<center>
<form id="Z" target="paypal" action="" method="post">
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal"></center>
</form>
<center>
<form id="A_A" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="me#mysite.com">
<input type="hidden" name="item_name" value="Alpha Member - AA">
<input type="hidden" name="item_number" value="AA">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="a3" value="5">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="Y">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
<input type="hidden" name="return" value="https://example.com/thanks.php">
<input type="hidden" name="notify_url" value="http://example.com/pay_paypal/paypal.php">
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal">
</form></center>
<center>
<form id="B_B" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="me#mysite.com">
<input type="hidden" name="item_name" value="Alpha Member - BB">
<input type="hidden" name="item_number" value="BB">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="a3" value="10">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="Y">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
<input type="hidden" name="return" value="https://example.com/thanks.php">
<input type="hidden" name="notify_url" value="https://example.com/pay_paypal/paypal.php">
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal">
</form></center>
<center>
<form id="C_C" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="me#mysite.com">
<input type="hidden" name="item_name" value="Alpha Member - CC">
<input type="hidden" name="item_number" value="CC">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="a3" value="15">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="Y">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
<input type="hidden" name="return" value="https://example.com/thanks.php>
<input type="hidden" name="notify_url" value="https://example.com/pay_paypal/paypal.php">
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal">
</form></center>
<center>
<form id="D_D" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="me#mysite.com">
<input type="hidden" name="item_name" value="Alpha Member - DD">
<input type="hidden" name="item_number" value="DD">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="a3" value="20">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="Y">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
<input type="hidden" name="return" value="https://example.com/thanks.php">
<input type="hidden" name="notify_url" value="https://example.com/pay_paypal/paypal.php">
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal">
</form></center>
<center>
<form id="E_E" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="me#mysite.com">
<input type="hidden" name="item_name" value="Alpha Member - EE">
<input type="hidden" name="item_number" value="EE">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="a3" value="25">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="Y">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
<input type="hidden" name="return" value="https://example.com/thanks.php">
<input type="hidden" name="notify_url" value="https://example.com/pay_paypal/paypal.php">
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal">
</form></center>
<center>
<form id="F_F" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="me#mysite.com">
<input type="hidden" name="item_name" value="Alpha Member - FF">
<input type="hidden" name="item_number" value="FF">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="a3" value="30">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="Y">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
<input type="hidden" name="return" value="https://example.com/thanks.php">
<input type="hidden" name="notify_url" value="https://example.com/pay_paypal/paypal.php">
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal">
</form></center>
<center>
<form id="G_G" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="me#mysite.com">
<input type="hidden" name="item_name" value="Alpha Member - GG">
<input type="hidden" name="item_number" value="GG">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="a3" value="35">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="Y">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
<input type="hidden" name="return" value="https://example.com/thanks.php">
<input type="hidden" name="notify_url" value="https://example.com/pay_paypal/paypal.php">
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal">
</form></center>
<center>
<form id="H_H" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="me#mysite.com">
<input type="hidden" name="item_name" value="Alpha Member - HH">
<input type="hidden" name="item_number" value="HH">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="a3" value="40">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="Y">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
<input type="hidden" name="return" value="https://example.com/thanks.php">
<input type="hidden" name="notify_url" value="https://example.com/pay_paypal/paypal.php">
<input class="memsubbut" value="Subscribe" type="submit" border="0" name="submit" alt="PayPal">
</form></center>
</td></tr>
</tbody>
</table>
</div><!-- #membership -->
What am I missing? I thought is was working in sandbox, but I guess didn't look closely.
Essentially, I hid all forms (buttons) in CSS. I then us JS to show them, but only one at a time.
Then HTML for the dropdown select. Is the problem in the JS, selecting the form?
Thanks in advance!

This FIDDLE BEGINS to help you with your problem.
$(document).ready(function () {
$('select[name=Membership_Selection]').change(function (e) {
switch ($(this).val()) {
case "A":
hideAllExcept($("#A"));
break;
case "B":
hideAllExcept($("#B"));
break;
case "C":
hideAllExcept($("#C"));
break;
default:
// do something defaultly
}
});
});
function hideAllExcept(toShow) {
toShow.show();
$("#membership").find('div').each(function () {
if ($(this).attr('id') != toShow.attr('id')) {
$(this).hide();
}
});
}
I had to remove A LOT of code so I could understand. Now you just need to paste some stuff in there and get to work.
Some hints:
1) Don't use center tag, like, ever;
2) Careful with some typos, like double single quotes when you only meant one. Also, 'a'
is different from 'a ', so be extra careful;
3) First, try to build the whole HTML BEFORE using styles (like the font tag, ew),
and style everything using CSS;
4) Don't use table as mean of styling;
5) Refator your code before continuing doing anything else, please.
This is NOT the entire answer you need, but it was what I was able to do.

Disable form submission if checkbox is unchecked

I am trying to use function checkbox() to disable form submission.
Can anyone suggest what am i doing wrong?
Thanks in advance.
Here is the code snippet for the JS:
<script type = "text/javascript">
function checkbox() {
if(document.form.checkbox.checked)
{
document.form.submit.disabled=false;
}
else
{
document.form.submit.disabled=true;
}
}
</script>
And here is the HTML code.
<form name="form" action="shop_paypal.php" method="post">
<input name="cmd" type="hidden" value="_xclick" />
<input name="no_note" type="hidden" value="1" />
<input name="lc" type="hidden" value="UK" />
<input name="currency_code" type="hidden" value="USD" />
<input name="bn" type="hidden" value="PP-BuyNowBF:btn_buynow_LG.gif:NonHostedGuest" />
<input type="hidden" name="item_name" id="item_name"value="YOUTUBE"/>
<select name="amount" id="amount" style="width:256px; height:32px;">
<option value="18" id="1">10,000 PINS - $18 </option>
<option value="35" id="2">20,000 PINS - $35</option>
<option value="75" id="3">30,000 PINS - $75</option>
<option value="140" id="4">50,000 PINS - $140</option>
</select>
<label>Your Facebook fan page URL: </label><br />
<input class="input-box" type="text" />
<input type="text" />
<input type="checkbox" class="checkbox" name="checkbox" id="checkbox"/>
<label class="agree">I agree to Terms & Conditions</label>
<input type="image" src="images/products/buynow.gif" class="submit" onclick= "checkbox();" name = "submit"/>
</form>

The obvious first thought would be:
var form = document.getElementsByTagName('form')[0];
function check (){
return document.getElementById('checkbox').checked;
}
form.addEventListener('submit', check);

Try this and notice how the function is simplyfied and calling is moved to the checkbox itself. When it's checked, button is enabled, and when unchecked, it's disabled (this is also a default state).
Here's also a working demo: http://jsfiddle.net/kL7We/
<script>
function enableSending() {
document.form.submit.disabled = !document.form.checkbox.checked;
}
</script>
<form name="form" action="shop_paypal.php" method="post">
<input name="cmd" type="hidden" value="_xclick" />
<input name="no_note" type="hidden" value="1" />
<input name="lc" type="hidden" value="UK" />
<input name="currency_code" type="hidden" value="USD" />
<input name="bn" type="hidden" value="PP-BuyNowBF:btn_buynow_LG.gif:NonHostedGuest" />
<input type="hidden" name="item_name" id="item_name"value="YOUTUBE"/>
<select name="amount" id="amount" style="width:256px; height:32px;">
<option value="18" id="1">10,000 PINS - $18 </option>
<option value="35" id="2">20,000 PINS - $35</option>
<option value="75" id="3">30,000 PINS - $75</option>
<option value="140" id="4">50,000 PINS - $140</option>
</select>
<label>Your Facebook fan page URL: </label><br />
<input class="input-box" type="text" />
<input type="text" />
<input type="checkbox" class="checkbox" name="checkbox" id="checkbox" onclick= "enableSending();"/>
<label for="checkbox" class="agree">I agree to</label> Terms & Conditions
<input type="button" src="images/products/buynow.gif" class="submit" name = "submit" value="Send" disabled="disabled"/>

get id from radio input by clicking a link (siblings?)

so i have a list of addresses each with edit links and i want to grab the ID of the input within the list item
<li class="last">
<div class="checkout-select-address"><input type="radio" name="checkout_selected_address" id="checkout_selected_address_3" value="" /></div>
<div class="checkout-select-address-details">
<p><label for="checkout_selected_address_3">(Mothers)</label> Edit Address</p>
<input type="hidden" id="checkout_selected_address_3_name" value="" />
<input type="hidden" id="checkout_selected_address_3_title" value="" />
<input type="hidden" id="checkout_selected_address_3_first_name" value="" />
<input type="hidden" id="checkout_selected_address_3_last_name" value="" />
<input type="hidden" id="checkout_selected_address_3_address_line_1" value="" />
<input type="hidden" id="checkout_selected_address_3_address_line_2" value="" />
<input type="hidden" id="checkout_selected_address_3_address_line_3" value="" />
<input type="hidden" id="checkout_selected_address_3_town_city" value="" />
<input type="hidden" id="checkout_selected_address_3_county" value="" />
<input type="hidden" id="checkout_selected_address_3_postcode" value="" />
<input type="hidden" id="checkout_selected_address_3_country" value="" />
</div>
<div class="clear"></div>
so clicking on the link with class "edit-link" it will get the ID for the radio input within the li
Thanks in advance

try this :
$(".edit-link").click(function(){
alert($(this).closest("li").find("input[type=radio]").attr("id"));
});
demo : http://jsfiddle.net/ZABBS/

Set a html form with javascript

I've been playing with the PayPal code:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="paypal">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="business" value="test#test.org">
<input type="hidden" name="item_name_1" value="Item1">
<input type="hidden" name="amount_1" value="1.00">
<input type="hidden" name="item_name_2" value="Item2">
<input type="hidden" name="amount_2" value="2.00">
<input type="submit" value="PayPal">
</form>
And I want to set the value of item_name_1 and amount_1 via javascript when a button is pressed elsewhere so when that form is submitted the values are all set:
So I have this function run when the add to cart is clicked:
<script type='text/javascript'>
function addtocart(){
paypal.item_name_2.value="Hello!";
}
</script>
I feel I'm on the right tracks but no joy. Help please! TIA

Try this
document.forms["paypal"].item_name_2.value="heelo";

try this
document.forms['paypay']['item_name_2'].value = "hello";

Develop Reference

JavaScript is the programming language of the Web.

simultaneously change all input values - javascript

Try $('#hidden-inputs input').val('');

Try Wrap your code in DOM Ready $(function () { $('#hidden-inputs input').val(''); });

Related

Ask user for amount and user value in a form

Dropdown to select from multiple forms

Disable form submission if checkbox is unchecked

get id from radio input by clicking a link (siblings?)

Set a html form with javascript

Categories

Resources