Develop Reference

Javascript open and hide radio

A little problem that anyone but me can solve with ignorance of JS.
I open various divs after clicking on the payment method, according to the frequency of payments. I also open a div with text inputs.
The problem is that the used JS is applied to everything. So if by input (radio) unpack the div, another independent input (radio) closes it.
Also, if I unpack a div with other radio inputs by input, clicking on any of the divs will close the div again.
Here fiddle - jsfiddle.net/72jzy8gb
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".ukaz").not(targetBox).hide();
$(targetBox).show();
});
});
.ukaz {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-daruj" action="https://www.darujme.cz/darovat/1320" id="myForm" method="get">
<table class="daruj-form">
<tr>
<td colspan="2" style="text-align:center;font-size:25px;">
<b style="color:#dd4814;">Částka dobrovolného příspěvku</b><br />
</td>
</tr>
<tr>
<td style="text-align:-webkit-right;"><div style="width:147px;" id="castka">
<input name="amount" type="number" style="width: 100px;" value="100"> <span style="display:inline;">Kč</span></div><br /><input name="currency" type="hidden" value="CZK">
<input name="locale" type="hidden" value="cs"></td>
<td style="vertical-align:top;text-align:-webkit-left;"><div class="castky" style="
margin-top: 6px;"><input type="radio" name="frequency" value="once"><div id="jednorazove" style="font-size:13px;color:black;font-weight:bold;display: inline;padding-left: 5px;vertical-align: super;">Jednorázově</div><br>
<input type="radio" name="frequency" value="monthly"> <div id="mesicne" style="padding-left:2px;font-size:13px;color:black;font-weight:bold;display: inline;vertical-align: super;"> Měsíčně</div></div></td>
</tr>
<tr>
<td style="width:50%;">
<input name="firstName" type="text" placeholder="Jméno"><br>
<input name="lastName" type="text" placeholder="Příjmení"><br>
<input name="email" type="email" placeholder="Váš email"><br>
<input name="phone" type="number" placeholder="Telefonní číslo"><br>
<br>
<b>Požadujete potvrzení o daru?</b><br>
<input type="radio" name="wantDonationCertificate" value="1" nazev="adresa"> Ano<br>
<input type="radio" name="wantDonationCertificate" value="0" checked=""> Ne<br>
</td>
<td><div class="1 ukaz">
<input name="street" type="text" placeholder="Ulice a číslo popisné"><br>
<input name="city" type="text" placeholder="Obec/město"><br>
<input name="postcode" type="text" placeholder="PSČ"><br>
</div>
<br>
<div class="once ukaz">
<b>Výběr platby:</b><br>
<input type="radio" name="paymentMethod" value="proxypay_charge"> Platba kartou<br>
<input type="radio" name="paymentMethod" value="funds_transfer"> Platba převodem<br>
<input type="radio" name="paymentMethod" value="payu_transfer"> Online platba PayU
</div>
<div class="monthly ukaz">
<b>Výběr platby:</b><br>
<input type="radio" name="paymentMethod" value="proxypay_charge"> Platba kartou<br>
<input type="radio" name="paymentMethod" value="funds_transfer"> Platba převodem
</div>
<b>Chcete zasílat aktuality na email?</b><br>
<input type="radio" name="custom[souhlas_se_zasilanim_novinek_svobody_zvirat_a_se_zpracovanim_osobnich_udaju_pro_tyto_ucely]" value="1" checked=""> Ano<br>
<input type="radio" name="custom[souhlas_se_zasilanim_novinek_svobody_zvirat_a_se_zpracovanim_osobnich_udaju_pro_tyto_ucely]" value="0"> Ne<br>
<input type="submit" value="Odeslat">
</td>
</tr>
</table>
</form>
This is undesirable behavior.
Thanks for help!

You should use an indicator that points on a specific element but not a group of elements.
I used a name of input instead of a type here:
$(document).ready(function() {
$('input[name="wantDonationCertificate"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".ukaz").not(targetBox).hide();
$(targetBox).show();
});
});

Use JavaScript checkbox value in HTML

I'd like to be able to use a total amount generated using javascriptand displayed on the page in a <span> field later on in an HTML form. The checkbox additions and subtractions work correctly, I have no issue with that. What I have not been able to figure out is how to use that value later on in an HTML field (shown below as the PayPal code).
I have this in the <head> which handles the javascript:
<head>
<script type="text/javascript">
var total = 0.00;
function test(item) {
if (item.checked) {
total += parseFloat(item.value);
} else {
total -= parseFloat(item.value);
}
//alert(total);
document.getElementById('Totalcost').innerHTML = total.toFixed(2);
}
</script>
</head>
The this adds/subtracts if a check box is checked:
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Shoes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Clothes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
Then I display the total with this:
Total Amount: $<span id="Totalcost">0.00</span>
All of this works correctly and checking/unchecking reflects on the Total Amount shown at the bottom of the page.
What I'd like to do is use the total amount that is show in the HTML below for the PayPal subscription link so that the amount is added into the
line.
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="myemailaddress.com">
<input type="hidden" name="item_name" value="Shows & Clothes">
<input type="hidden" name="item_description" value="Shows & Clothes">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="no_shipping" value="1">
<input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but20.gif" border="0" name="submit" alt="Make payments with PayPal - it\'s fast, free and secure!">
<input type="hidden" name="a3" value="TOTAL_AMOUNT">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="M">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
</form>
Is it possible to capture the 'totalcost' and have it dynamically added to the "a3" field in the PayPal form (where it says TOTAL_AMOUNT) for when the customer clicks the PayPal button it already has the correct value/amount in the form?
Thank you.

You can use document.getElementsByName. By default you'll get a NodeList. For example:
var a3 = document.getElementsByName("a3")[0];
a3.value = total.toFixed(2);
You can easily update its value.
Something like this:
var total = 0.00;
function test(item) {
if (item.checked) {
total += parseFloat(item.value);
} else {
total -= parseFloat(item.value);
}
document.getElementById("Totalcost").innerHTML = total.toFixed(2);
var a3 = document.getElementsByName("a3")[0];
a3.value = total.toFixed(2);
}
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="myemailaddress.com">
<input type="hidden" name="item_name" value="Shows & Clothes">
<input type="hidden" name="item_description" value="Shows & Clothes">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="no_shipping" value="1">
<input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but20.gif" border="0" name="submit" alt="Make payments with PayPal - it\'s fast, free and secure!">
<input type="hidden" name="a3" value="TOTAL_AMOUNT">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="M">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
</form>
<table>
<tr>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Shoes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Clothes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
</tr>
</table>
<span id="Totalcost">0.00</span>

form validation in JS for checkboxes

I'm trying to do a homework assignment and having some issues. I'm supposed to validate a form with Javascript. Right now I'm trying to make sure that a user has checked at least one checkbox (out of four options) in order for the form to submit. (I've gotten other segments of validation to work, so the issue seems to be local to this part of code.)
This is what the html for the checkbox form looks like:
<fieldset>
<input type="checkbox" name="boxes" id="member" value="member" />
<label for="member">I'm a member.</label>
<p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
<label for="newsletter">Please send me your monthly newsletter.</label></p>
<p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
<label for="preshow">I'm interested in hearing about pre-show events.</label></p>
<p><input type="checkbox" name="boxes" id ="none" value="none" />
<label for="none">None of the above.</label></p>
And this is what I've written to try to validate it using Javascript:
function validateForm() {
var checkBoxes = document.getElementsByName("boxes");
for (var i=0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked === true) {
return true;
break;
} else {
alert("At least one checkbox must be selected.");
return false;
}
}
}
This isn't working; the form submits whether boxes have been checked or not.
I would really love to get some help here because I don't have any idea what I'm doing wrong. Like I said, the problem seems to exist somewhere in this specific code, because other validation in separate blocks of code does work.
This is the complete HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> hw5 </title>
<link rel ="stylesheet" href="form.css"/>
<script src="form.js"></script>
<script src="states.js"></script>
<!--<script src="browser.js"></script>-->
</head>
<body>
<div>
<h1><b>Buy your tickets online</b></h1>
<form name="theForm" method="post" action="https://cs101.cs.uchicago.edu/~sterner/show-data.php" onsubmit="return validateForm(this)">
<section id="name-and-address">
<fieldset>
<h2 class="name">Full name</h2>
<label for="firstname">First name:</label> <input type="text" name ="firstname" id="firstname" autofocus="autofocus" />
<p><label for="lastname">Last name:</label> <input type="text" name ="lastname" id="lastname" /></p>
</fieldset>
<fieldset>
<h2 class="Billing Address">Billing Address</h2>
<label for="street">Street name and number:</label>
<input type="text" name ="street" id="street" />
<p><label for="city">City:</label>
<input type="text" name="city" id="city" /></p>
<p><label for="state">State:</label>
<select id="state" name="state">
</select></p>
<p><label for="zip">Zip code:</label>
<input type="text" name="zip" id="zip" /></p>
</fieldset>
</section>
<section>
<aside>
<fieldset>
<h2 class="payMethod">Method of Payment</h2>
<p class="row">
<input type="radio" id="pay-pal" name="payment" value="pay-pal" />
<label for="pay-pal">PayPal</label>
</p>
<p class="row">
<input type="radio" id="credit" name="payment" value="credit" />
<label for="credit">Credit Card</label>
</p>
</fieldset>
<fieldset>
<input type="checkbox" name="boxes" id="member" value="member" />
<label for="member">I'm a member.</label>
<p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
<label for="newsletter">Please send me your monthly newsletter.</label></p>
<p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
<label for="preshow">I'm interested in hearing about pre-show events.</label></p>
<p><input type="checkbox" name="boxes" id ="none" value="none" />
<label for="none">None of the above.</label></p>
</fieldset>
<fieldset>
<p><label for="email">Email address:</label>
<input type="email" name="email" id="email" /></p>
</fieldset>
</aside>
</section>
<section id="submit">
<fieldset>
<input type="submit" value="Buy my tickets."/>
</fieldset>
</section>
</div>
</body>
</html>

how to enable textbox ,when uncheck a checkbox using javascript

I have 5 teachers names and corresponding checkboxes(5) I am using checkall function to check all check boxes.
now I want ,when I uncheck a checkbox now enable a textbox at right side.
how to create a textbox from unchecked function using javascript?
my code is :
HTML + PHP :
<input type="checkbox" class="check form-control" id="checkFull">
<div class="form-group{{ ($errors->has('check')) ? 'has error' : '' }}">
<label for="check" class="col-sm-4 control-label">{{$teacher->tname}}:</label>
<div class="col-sm-4">
<input type="hidden" id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" value="0">
<input id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" type="checkbox" value="1" class="check form-control">
</div>
<div class="col-sm-4">
<input type="text" class="textBox">
</div>
</div>
JAVASCRIPT :
$("#checkFull").click(function() {
$(".check").prop('checked', $(this).prop('checked'));
});
what is the javascript code to enable textbox?

function changeTextBoxFormCheckBox($elm){
var $textBox= $elm.closest(".form-group").find("input[type='text']");
if($elm.is(":checked")){
$textBox.attr("disabled",true);
}else{
$textBox.attr("disabled",false);
}
}
$(".checkbox").each(function(){
changeTextBoxFormCheckBox($(this));
})
$("#checkFull").click(function () {
var checkAllProp= $(this).prop('checked');
$(".checkbox").each(function(){
var $this=$(this);
$this.prop('checked', checkAllProp);
changeTextBoxFormCheckBox($(this));
})
});
$(".checkbox").click(function () {
changeTextBoxFormCheckBox($(this));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="check form-control" id="checkFull">
<div class="form-group {{ ($errors->has('check')) ? 'has error' : '' }}">
<label for="check" class="col-sm-4 control-label">tname:</label>
<div class="col-sm-4">
<input type="hidden" id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" value="0">
<input id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" type="checkbox" value="1" class="check form-control checkbox">
</div>
<div class="col-sm-4">
<input type="text" class="textBox">
</div>
</div>

Format your html code as I mentioned. You can do change as per your need
$(document).on('change', '[type=checkbox]', function() {
if ($(this).is(":checked")) {
$("#textBox1").attr("disabled", "disabled");
} else {
$("#textBox1").removeAttr("disabled");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-4 teacherContent">
<input type="hidden" id="teacherId1" name="teacherName1" value="0">
<input type="hidden" id="teacherId2" name="teacherName2" value="1">
<input id="teacherCheck_1" class="teacherCheck" name="teacherCheckName1" type="checkbox" value="1" class="check form-control">
<input id="teacherCheck_2" class="teacherCheck" name="teacherCheckName2" type="checkbox" value="1" class="check form-control">
</div>
<div class="col-sm-4">
<input type="text" id="textBox1">
</div>
</div>

$(document).on('change', '[type=checkbox]', function() {
var val = $(this).data('value');
if ($(this).is(":checked")) {
$("#textBox"+val).attr("disabled", "disabled");
} else {
$("#textBox"+val).removeAttr("disabled");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-4 teacherContent">
<input type="hidden" id="teacherId1" name="teacherName1" value="0">
<input type="hidden" id="teacherId2" name="teacherName2" value="1">
<input id="teacherCheck_1" data-value="1" name="teacherCheckName1" type="checkbox" class="check form-control">
<input type="text" id="textBox1">
<input id="teacherCheck_2" data-value="2" class="teacherCheck" name="teacherCheckName2" type="checkbox" class="check form-control">
<input type="text" id="textBox2">
</div>
</div>

How to get different values of text box in jQuery?

I am using jQuery and I need to pass different values of same text box on different radio button clicks like text box name actual has four different values on selecting the different radio buttons how can I pass this?
<script type="text/javascript" src="jquery.min2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#loads').closest('div').hide();
$('#units').val('0');
$('input[name="myradio"]').change(function(){
if($('input[name="myradio"]:checked').val() == '100')
$('#loads').closest('div').hide();
else
$('#loads').closest('div').show();
});
$('input[readonly]').each(function(){
$(this).val('0');
});
$('#actual').val('2.56');
$("input:radio[name=myradio], #btn-calculate").click(function() {
if ($('input[name=myradio]:radio:checked').val() == '100'){
$('#actual').val('2.56');
$('#charges').val('20');
} else if ($('input[name=myradio]:radio:checked').val() == '200'){
$('#actual').val('3.50');
$('#charges').val('40');
} else if ($('input[name=myradio]:radio:checked').val() == '300'){
$('#actual').val('4.50');
$('#charges').val('60');
} else if ($('input[name=myradio]:radio:checked').val() == '400'){
$('#actual').val('5.50');
$('#charges').val('80');
}
$('#tax').val(($('#units').val())*($('#actual').val()));
$('#elec').val(($('#units').val())*($('#actual').val()));
$('#amount').val(parseInt(($('#charges').val()))+parseInt(($('#actual').val())));
$('#govt').val(($('#actual').val())-($('#units').val()));
$('#result').val(($('#amount').val())-($('#govt').val()));
});
</script>
<form method="POST" name="form1">
<label>Select your category:</label>
<label class="radio">
<input type="radio" value="100" name="myradio" checked="checked" />Domestic</label>
<label class="radio">
<input type="radio" value="200" name="myradio" />a</label>
<label class="radio">
<input type="radio" value="300" name="myradio" />b</label>
<label class="radio">
<input type="radio" value="400" name="myradio" />c</label>
<div>
<label for="units">No of units(kwh) used</label>
<input type="text" name="units" id="units" />
</div>
<div>
<label for="loads">Connected loads(kwh)</label>
<input type="text" name="loads" id="loads" />
</div>
<div>
<label for="actual">Actual</label>
<input type="text" data-value="2.60" readonly="readonly" name="actual" id="actual" />
</div>
<div>
<label for="tax">Tax</label>
<input type="text" readonly="readonly" name="tax" id="tax" />
</div>
<div>
<label for="elec">Elec</label>
<input type="text" readonly="readonly" name="elec" id="elec" />
</div>
<div>
<label for="charges">Charges</label>
<input type="text" readonly="readonly" name="charges" id="charges" />
</div>
<div>
<label for="amount">Amount</label>
<input type="text" readonly="readonly" name="amount" id="amount" />
</div>
<div>
<label for="govt">Govt</label>
<input type="text" readonly="readonly" name="govt" id="govt" />
</div>
<div>
<label for="result">Result</label>
<input type="text" readonly="readonly" name="result" id="result" />
</div>
<button type="button" id="btn-calculate">Calculate</button>
</form>
Similarly I want this in text box name amount=charges+actual and in text box name govt=actual-units and in text box name result=amount-govt for above four radio button
jsFiddle of the code.

<!DOCTYPE html>
<head>
<style type="text/css">
div {
margin: 10px 0;
}
div label {
width: 140px;
display: inline-block;
text-align: right;
}
input[readonly] {
background: #eee;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#loads').closest('div').hide();
$('#units').val('0');
$('input[name="myradio"]').change(function(){
if($('input[name="myradio"]:checked').val() == '100')
$('#loads').closest('div').hide();
else
$('#loads').closest('div').show();
});
$('input[readonly]').each(function(){
$(this).val('0');
});
$('#actual').val('2.56');
$("input:radio[name=myradio], #btn-calculate").click(function() {
if ($('input[name=myradio]:radio:checked').val() == '100'){
$('#actual').val('2.56');
$('#charges').val('20');
} else if ($('input[name=myradio]:radio:checked').val() == '200'){
$('#actual').val('3.50');
$('#charges').val('40');
} else if ($('input[name=myradio]:radio:checked').val() == '300'){
$('#actual').val('4.50');
$('#charges').val('60');
} else if ($('input[name=myradio]:radio:checked').val() == '400'){
$('#actual').val('5.50');
$('#charges').val('80');
}
$('#tax').val(($('#units').val())*($('#actual').val()));
$('#elec').val(($('#units').val())*($('#actual').val()));
$('#amount').val(parseInt(($('#charges').val()))+parseInt(($('#actual').val())));
$('#govt').val(($('#actual').val())-($('#units').val()));
$('#result').val(($('#amount').val())-($('#govt').val()));
});
});
</script>
</head>
<body>
<form method="POST" name="form1">
<label>Select your category:</label>
<label class="radio">
<input type="radio" value="100" name="myradio" checked="checked" />Domestic</label>
<label class="radio">
<input type="radio" value="200" name="myradio" />a</label>
<label class="radio">
<input type="radio" value="300" name="myradio" />b</label>
<label class="radio">
<input type="radio" value="400" name="myradio" />c</label>
<div>
<label for="units">No of units(kwh) used</label>
<input type="text" name="units" id="units" />
</div>
<div>
<label for="loads">Connected loads(kwh)</label>
<input type="text" name="loads" id="loads" />
</div>
<div>
<label for="actual">Actual</label>
<input type="text" data-value="2.60" readonly="readonly" name="actual" id="actual" />
</div>
<div>
<label for="tax">Tax</label>
<input type="text" data-value="0.00" readonly="readonly" name="tax" id="tax" />
</div>
<div>
<label for="charges">Charges</label>
<input type="text" data-value="20.00" readonly="readonly" name="charges" id="charges" />
</div>
<div>
<label for="amount">Amount</label>
<input type="text" data-value="2.60" readonly="readonly" name="amount" id="amount" />
</div>
<div>
<label for="govt">Govt</label>
<input type="text" data-value="2.60" readonly="readonly" name="govt" id="govt" />
</div>
<div>
<label for="result">Result</label>
<input type="text" readonly="readonly" name="result" id="result" />
</div>
<button type="button" id="btn-calculate">Calculate</button>
</form>
</body>
</html>

simply use click events for each of the radio buttons;
<input type="radio" value="200" name="myradio" id="radio_A"/>a
$('#radio_A').on('click', function() { $('#actual').val(somevalue); });
http://jsfiddle.net/c9sHt/32/