Develop Reference

How to change a input type hidden value of a selected radio button

I have 5 radio buttons in one form and 5 input type hidden values corresponding to each radio button. By default, the value of radio buttons and hidden values are 0. Now, I want to change the selected radio button value and its corresponding hidden value to 1. Also, if I re-change the selected radio button then it should make the old selected radio button value and corresponding hidden value to 0 and make the newly selected radio button value and its corresponding button value to 1. I'm able to change the value of selected to radio button and its corresponding hidden value to 1, but if I re-select to another radio button it's not changing the old hidden value to 0 and new hidden value to 1.
$('input[type=radio][name=correctanswer]').on('change', function() {
if ($(this).prop('checked', true)) {
$(this).val('1');
// $('#correct').val($(this).val());
}
$('input:radio').each(function() {
if($(this).is(':checked')) {
$(this).val('1');
// $('#correct').val($(this).val());
}
else {
$(this).val('0');
// $('#correct').val($(this).val());
}
});
$('input:hidden').each(function() {
if($('input[type=radio][name=correctanswer]').is(':checked')) {
// $(this).val('1');
$('#correct').val('1');
}
else {
$(this).val('0');
$('#correct').val('0');
}
});
});
<form action="#" th:action="#{/saveQuestionAnswer}" th:object="${question}" method="post">
<div class="form-group">
<label for="question" class="control-label">Question</label>
<textarea type="text" name="question" cols="40" rows="5" th:name="question" placeholder="question" class="form-control"></textarea>
</div>
<div class="form-group">
<input class="form-control-input" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="30" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 1" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 2" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 3" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 4" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="hidden" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 5" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>

You can loop through your radio buttons using each loop then use .closest() to get the closest div to that radio and if that radio is checked assign value to input-box either1 or 0.
Demo Code :
$('input[type=radio][name=correctanswer]').on('change', function() {
//loop through each radio
$('input:radio').each(function() {
//if checked
if ($(this).is(':checked')) {
//get closest div with class=form-group and add value to input
$(this).closest(".form-group").find("input[name=correct]").val('1');
} else {
//add 0
$(this).closest(".form-group").find("input[name=correct]").val('0');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" th:action="#{/saveQuestionAnswer}" th:object="${question}" method="post">
<div class="form-group">
<label for="question" class="control-label">Question</label>
<textarea type="text" name="question" cols="40" rows="5" th:name="question" placeholder="question" class="form-control"></textarea>
</div>
<div class="form-group">
<input class="form-control-input" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="30" class="form-control" name="options" width="50"
value="" th:name="options" placeholder="Option 1" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 2" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 3" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 4" />
</div>
<div class="form-group">
<input class="form-control-input" width="5" type="radio" name="correctanswer" id="correctanswer" th:name="correctanswer" value="0" /><input type="text" name="correct" id="correct" value="0"><input type="text" size="40" class="form-control" name="options"
width="50" value="" th:name="options" placeholder="Option 5" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>

Selecting by second level key from multidimensional HTML name array using JQuery or Javascript

How to select all the inputs with name like pref[*][location][] using jQuery selector or Javascript? I am interested in getting it by the second level key 'location'.
<input type="text" name="pref[1][term][]" value="no">
<input type="text" name="pref[1][term][]" value="no">
<input type="text" name="pref[1][location][]" value="get_this">
<input type="text" name="pref[1][location][]" value="get_this_too">
<input type="text" name="pref[1][other]" value="no">
<input type="text" name="pref[2][term][]" value="no">
<input type="text" name="pref[2][location][]" value="get_this_too">
<input type="text" name="pref[2][location][]" value="get_this_too">
<input type="text" name="pref[3][term][]" value="no">
<input type="text" name="pref[3][other]" value="no">
<input type="text" name="location" value="no">

You could use $.each function to get all the inputs you have and then filter them out using their name attribute.
To get the all input by second level key [location] we can use includes method and that way we will get the inputs containing that key only.
Live Working Demo:
$('input').each(function(i, el) {
if ($(el).attr('name').includes('[location]')) {
console.log(el)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="pref[1][term][]" value="no">
<input type="text" name="pref[1][term][]" value="no">
<input type="text" name="pref[1][location][]" value="get_this">
<input type="text" name="pref[1][location][]" value="get_this_too">
<input type="text" name="pref[1][other]" value="no">
<input type="text" name="pref[2][term][]" value="no">
<input type="text" name="pref[2][location][]" value="get_this_too">
<input type="text" name="pref[2][location][]" value="get_this_too">
<input type="text" name="pref[3][term][]" value="no">
<input type="text" name="pref[3][other]" value="no">
<input type="text" name="location" value="no">

Use filter as #AlwaysHelping suggested:
$('input[name^="pref"]').filter('[name*="location"]')
Or match the name attributes from the ending part, a bit hacky though.
$('input[name$="[location][]"]')

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();
});
});

Dropdown Input in HTML

Hey guys I have a question. I am trying to put what I select from a drop down box into a input field and I am not sure how to do it.
Here is my code:
<body>
<tr valign="top">
<select id="dropdown">
<option value="None">None</option>
<option value="manufactor">Manufactor *Pending</option>
<option value="commercial">Commercial Series *Pending</option>
<option value="part">Part</option>
<option value="motor">Motor</option>
</select>
<table>
<td>
<label for="Make1">Make:</label><br />
<input type="text" name="Make" id="Make1" value="" maxlength="20">
</td>
<td>
<label for="Manufactor1">Manufactor:</label><br />
<input type="text" name="Manufactor" id="Manufactor1" value="" maxlength="15">
</td>
<td>
<label for="Commercial1">Commercial:</label><br />
<input type="text" name="Commercial" id="Commercial1" value="" maxlength="15">
</td>
<td>
<label for="Part1">Part:</label><br />
<input type="text" name="Part" id="Part1" value="" maxlength="15">
</td>
<td>
<label for="motor1">Motor:</label><br />
<input type="text" name="Motor" id="motor1" value="" maxlength="30">
</td>
<td>
<label for="Dropdown1">Search Term:</label><br /> <--- want this to show what i selected from dropdown at the top.
<input type="text" name="Dropdown" id="Dropdown1" value="" maxlength="30">
</td>
</table>
</tr>
So I am wanting at the bottom Dropdown1 to show what I picked from the Dropdown but I am unsure of how this is done.

By using Jquery you can achieve your requirement.
By using Change function.
Here is the working fiddle for you. Fiddle
$('#dropdown').change(function(){
$('#Dropdown1').val($(this).find(":selected").text())
;
});
-Help

only first form is checked by jQuery

i have one form on my page. so i want to check each input with corresponding button. so i wrote smth like this and it only checks first input even if i click on second inputs button.
<form target="myFrame" method="post" id="addProduct">
<fieldset>
<input type="hidden" name="iProductAdd" value="6" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[6]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="7" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[7]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="4" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[4]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
</form>
and i have jQuery Code:
$(document).ready(function(){
$("form").submit(function(){
// Get the Login Name value and trim it
var name = $.trim($('.quantity').val());
// Check if empty of not
if (name === '') {
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-red.png')");
return false;
} else {
$('input[type="submit"]').each(function(){
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
});
}
});
});

Your problem is that you are using ids as it were classes. An id should be unique in a document. So defining multiple objects with the same id is an error. And all functions will apply only the first they encounter. To do what you want, you have to use classes, so change your code in this way:
$(".addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
To look for all elements of that class.