Develop Reference

Change input text on radio button selection different forms

I am trying to make the input text change when pressing on radio button
the form it self have 5 option with multiple radio buttons and input text
the input text that i am trying to change is in different form since also when changing the input text in the main form it should change it on the other one
i get this for now
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
but this change the input text in the current form
how can i make to change the second form input text
main form
<form action="cart.php" name="cart" id="cart" target="cart"
method="post" onsubmit="return cart();">
<input name="selector0" type="hidden" value="A">
<input name="selector0hyphen" type="hidden" value="-">
<div class="selector">
<div class="selector">
ccc
</div>
<p>
<label>
<input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
TYPE : p </label>
<br>
<label>
<input type="radio" name="selector1" value="K" id="selector1_1">
TYPE : l </label>
</p>
<div class="selector">j</div>
<p>
<label>
<input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
aaa</label>
<br>
<label>
<input type="radio" name="selector2" value="U" id="selector2_1">
u</label>
</p>
<input name="selector2hyphen" type="hidden" value="-">
<div class="selector">bbb</div>
<p>
<label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
inches. Please use 3 digit</label></p>
<input name="selector3hyphen" type="hidden" value="-">
<div class="selector"> wd</div>
<p>
<label>
<input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
<br>
<label>
<input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
<br>
<label>
<input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
<br>
<label>
<input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
</p>
<div class="selector">t Type</div>
<p>
<label>
<input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
<br>
<label>
<input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
<br>
<label>
<input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
<br>
<label>
<input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
<br>
<label>
<input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
<br>
<label>
<input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
</p>
<div class="selector">acc</div>
<p>
<label>
<input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
<br>
<label>
<input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
<br>
<label>
<input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
<br>
<br>
</p>
<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
</p>
</div>
second form where input should change
<tbody>
<tr>
<th>Model </th>
<td style="width:100%;">
A<input name="selector1" type="text" value="_" maxlength="3">
<input name="selector2" type="text" value="_" maxlength="3">
<input name="selector3" type="text" value="000" maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_" maxlength="3">
<input name="selector6" type="text" value="_" maxlength="3">
</td></tr>
</tbody>
so for now if i press on radio button it change the input in the same form
i need to change the input text on the second form
for example i press on type p it change the first input text in the second form
thanks

Problem in your code:
find("input[type=text]").val(this.value); will give you all the input type=text, and update all of them with this.value, what you really want is to target the specific element, so should be something like .find("input[name=" + this.name + "][type=text]")
Solution:
Use .find("input[name=" + this.name + "][type=text]") to find the last element with name="xxxx" and type=text, this will return only one result since the combination is unique
The idea is to target the single input element you want to update, also you should clean up your code, attribute orders etc, remove id if you are not using it.
UPDATE: change input update radio button.
.find("input[type=radio][name=" + this.name + "][value=" + this.value + "]")
when update your text input, you can target the input where type=radio with same name and same value then use .prop("checked", true) to check it.
$(document).ready(function() {
$("input[type=radio]").click(function() {
$(this).closest('body').find("input[name=" + this.name + "][type=text]").val(this.value);
});
$("input[type=text]").on('input', function() {
$(this).closest('body').find("input[type=radio][name=" + this.name + "][value=" + this.value + "]").prop("checked", true);
});
//init
$("input[type=radio]:checked").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
main form
<div class="selector">
<div class="selector">
ccc
</div>
<p>
<label>
<input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
TYPE : p </label>
<br>
<label>
<input type="radio" name="selector1" value="K" id="selector1_1">
TYPE : l </label>
</p>
<div class="selector">j</div>
<p>
<label>
<input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
aaa</label>
<br>
<label>
<input type="radio" name="selector2" value="U" id="selector2_1">
u</label>
</p>
<input name="selector2hyphen" type="hidden" value="-">
<div class="selector">bbb</div>
<p>
<label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
inches. Please use 3 digit</label></p>
<input name="selector3hyphen" type="hidden" value="-">
<div class="selector-column-boxhead"> wd</div>
<p>
<label>
<input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
<br>
<label>
<input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
<br>
<label>
<input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
<br>
<label>
<input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
</p>
<div class="selector-column-boxhead">t Type</div>
<p>
<label>
<input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
<br>
<label>
<input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
<br>
<label>
<input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
<br>
<label>
<input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
<br>
<label>
<input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
<br>
<label>
<input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
</p>
<div class="selector-column-boxhead">acc</div>
<p>
<label>
<input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
<br>
<label>
<input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
<br>
<label>
<input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
<br>
<br>
</p>
<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
</p>
</div>
second form where input should change
<tbody>
<tr>
<th>Model </th>
<td style="width:100%;">
A<input name="selector1" type="text" value="_" maxlength="3">
<input name="selector2" type="text" value="_" maxlength="3">
<input name="selector3" type="text" value="000" maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_" maxlength="3">
<input name="selector6" type="text" value="_" maxlength="3">
</td>
</tr>
</tbody>

The form your changing the input is the first form,
select the next form by adding the next method after ( closest( form) )
Don't Forget form tags plus they have to be next to one another.
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').next() .find("input[type=text]").val(this.value);
});
});

$(this).closest() is used to find the closest parent element. It would only select the element that is the parent of $(this) element.
You should give the text inputs unique IDs so that they can be easily identified.
Change this-
<input name="selector1" type="text" value="_" maxlength="3">
To this-
<input name="selector1" id="selector1" type="text" value="_" maxlength="3">
And then in jquery,
$("input[type=radio]").click(function () {
$("#selector1").val(this.value);
});

Try this code
Add a common class to every radio button
$(document).ready(function() {
$('.class_name_of_radio').change(function() {
$("input[type=text][name="+this.name+"]").val(this.value);
});
});

Create a onchange function for all the radio button on all the forms. Pass the value of the radio button on the function and get the value from the function.
Eg:
Function myChange(myRadioVal)
{
$("#inputTextBoxId").val(myRadioVal);
//code here
}

how to check whether all radio and range selected or not before clicking submitting

How to check whether all radio button checked or not before clicking the submit button. i want to know how to do these things in JQUERY.
let me know the answer
HTML FILE:
<div class="col datepicker">
<p class="question">1. what is birth date ?</p>
<input type="date" value="select date">
<span class="error">Must pick date</span>
</div>
<div class="col Dragger">
<p class="question">2. how much you like us?</p>
<div class="range range-positive range-background-dark">
<input type="range" name="volume" min="{{range.min}}" max="{{range.max}}" value="{{range.value}}" ng-change="sliding(range.value)" ng-model="range.value">
</div>
<ul>
<li><strong>Unlikely</strong></li>
<li><strong>{{range.result}}</strong></li>
<li><strong>Verylikely</strong></li>
</ul>
</div>
<div class="col smileyrating">
<p class="question">3. How was your visit ?</p>
<input type="radio" name="emotion" value="1" id="good" class="input-hidden" required />
<label for="good">
<img class="good" src="img/good.png">
</label>
<input type="radio" name="emotion" value="3" id="ok" class="input-hidden" required />
<label for="ok">
<img class="ok" src="img/Okay.png">
</label>
<input type="radio" name="emotion" value="5" id="bad" class="input-hidden" required />
<label for="bad">
<img class="bad" src="img/bad.png">
</label>
</div>
<div class="col selectTable">
<p class="question">4.are you willing to travel?</p>
<table>
<tr>
<td>
<input type="radio" name="check" id="yes" class="input-hidden" value="0" required="">
<label for="yes">Yes</label></td>
<td>
<input type="radio" name="check" id="no" class="input-hidden" value="1" required="">
<label for="no">No</label></td>
</tr>
</table>
</div>
<div class="col matrixTable">
<p class="question">4.how you maintain </p>
<table>
<tr><th><h5>Economic</h5></th></tr>
<tr>
<td><input type="radio" name="Ecomomic" value="0"><br><span>strong</span></td>
<td><input type="radio" name="Ecomomic" value="1"><br><span>verystrong</span></td>
<td><input type="radio" name="Ecomomic" value="2"><br><span>strong</span></td>
<td><input type="radio" name="Ecomomic" value="3"><br><span>veryweek</span></td>
<td><input type="radio" name="Ecomomic" value="4"><br><span>notsure</span></td>
</tr>
<tr><th><h5>Healthcare</h5></th></tr>
<tr>
<td><input type="radio" name="Healthcare" value="0"><br><span>strong</span></td>
<td><input type="radio" name="Healthcare" value="1"><br><span>verystrong</span></td>
<td><input type="radio" name="Healthcare" value="2"><br><span>strong</span></td>
<td><input type="radio" name="Healthcare" value="3"><br><span>veryweek</span></td>
<td><input type="radio" name="Healthcare" value="4"><br><span>veryweek</span></td>
</tr>
<tr><th><h5>Immigration</h5></th></tr>
<tr>
<td><input type="radio" name="Immigration" value="0"><br><span>strong</span></td>
<td><input type="radio" name="Immigration" value="1"><br><span>verystrong</span></td>
<td><input type="radio" name="Immigration" value="2"><br><span>strong</span></td>
<td><input type="radio" name="Immigration" value="3"><br><span>veryweek</span></td>
<td><input type="radio" name="Immigration" value="4"><br><span>veryweek</span></td>
</tr>
</table>
</div>
<div class="col thumbrating">
<p class="question">5. How was your visit ?</p>
<input type="radio" name="emotion" value="1" id="like" class="input-hidden" required />
<label for="like">
<img class="good" src="img/Like.png">
</label>
<input type="radio" name="emotion" value="3" id="unlike" class="input-hidden" required />
<label for="unlike">
<img class="bad" src="img/Unlike.png">
</label>
</div>
</div>
if possible please let me know how to do in angularjs also.

Javascript/HTML - Passing function return variable into a hidden input value

I've read heaps of posts about this and I'm still having issues with passing the return variable from my function to a hidden input value. The function is checking all radio buttons on the page (12 of them) and finding the one which is selected. It is either passing NULL or the javascript to screen.php. I have tested the checked() function and it works (used alert() to show the value). I've read heaps of posts on passing values to hidden inputs and none of those solutions have worked for me.
If you need to see more code, I can post it on pastebin.
<script language="text/javascript">
function checked()
{
var inputs = document.getElementsByClassName('radio');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
return valueSelected;
}
</script>
</head>
<body>
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1>KSM</h1>
</div>
</div>
<div id="buttons">
<ul>
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="1" />
<input type="hidden" name="status" value="READY" />
<input type="hidden" name="pickupid" id="pickupid" value="" />
<input type="submit" class="submit" name="READY" onclick="document.getElementById('pickupid').value = checked();">
</form>
<div id="search">
<ul id="nav">
<li class="tab1">Ordered</li>
</ul>
</div>
<div id="content">
<div id="container">
<table>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</td>
</tr>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="5" value="005" />
<label for="5"> <span>005</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="6" value="006" />
<label for="6"> <span>006</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="7" value="007" />
<label for="7"> <span>007</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="8" value="008" />
<label for="8"> <span>008</span> </label>
</td>
</tr>
<tr>
<td>
<input type="radio" class="radio" name="pickup" id="9" value="009" />
<label for="9"> <span>009</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="10" value="010" />
<label for="10"> <span>010</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="11" value="011" />
<label for="11"> <span>011</span> </label>
</td>
<td>
<input type="radio" class="radio" name="pickup" id="12" value="012" />
<label for="12"> <span>012</span> </label>
</td>
</tr>
</table>
</div>
</div>
</body>

What's going on with the current code you have is you're submitting the form before the JS has time to execute your function and put the data into the hidden input. I wouldn't really suggest doing it in the way you're doing now, but here's a quick fix.
In your HTML change the form to this
<form id="form_ready" method="post" action="../backend/screen.php" onsubmit="return checked()">
And in your JS change your checked function to:
function checked(){
var inputs = document.getElementsByClassName('radio');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
return (document.getElementById('pickupid').value = valueSelected);
}
Also, get rid of the onclick on that submit button.

How to differentiate the names of each group of radio buttons?

I'm using formvalidation.io plugin to do the validation. By default, it validates the name of the radio buttons. But I can not do it that way. I need to know somehow / logic to differentiate each name of each radio buttons group.
Can someone help me?
EXAMPLE:
<div>
<div id="perguntas">
<label>1 - Pergunta 1</label>
<input type="hidden" name="pergunta[]" value="$pergunta->id" />
<div id="respostas">
<input type="radio" name="resposta[$pergunta->id]" value="1" /> Male
<input type="radio" name="resposta[$pergunta->id]" value="2" /> Female
<input type="radio" name="resposta[$pergunta->id]" value="3" /> Other
</div>
<div>
<textarea name="mensagem[$pergunta->id]" rows="3" />
</div>
</div>
<div id="perguntas">
<label>2 - Pergunta 2</label>
<input type="hidden" name="pergunta[]" value="$pergunta->id" />
<div id="respostas">
<input type="radio" name="resposta[$pergunta->id]" value="1" /> Male
<input type="radio" name="resposta[$pergunta->id]" value="2" /> Female
<input type="radio" name="resposta[$pergunta->id]" value="3" /> Other
</div>
<div>
<textarea name="mensagem[$pergunta->id]" rows="3" />
</div>
</div>
<div id="perguntas">
<label>3 - Pergunta ...</label>
<input type="hidden" name="pergunta[]" value="$pergunta->id" />
<div id="respostas">
<input type="radio" name="resposta[$pergunta->id]" value="1" /> Male
<input type="radio" name="resposta[$pergunta->id]" value="2" /> Female
<input type="radio" name="resposta[$pergunta->id]" value="3" /> Other
</div>
<div>
<textarea name="mensagem[$pergunta->id]" rows="3" />
</div>
</div>
<div id="perguntas">
<label>16 - Pergunta 16</label>
<input type="hidden" name="pergunta[]" value="$pergunta->id" />
<div id="respostas">
<input type="radio" name="resposta[$pergunta->id]" value="1" /> Male
<input type="radio" name="resposta[$pergunta->id]" value="2" /> Female
<input type="radio" name="resposta[$pergunta->id]" value="3" /> Other
</div>
<div>
<textarea name="mensagem[$pergunta->id]" rows="3" />
</div>
</div>
</div>

JavaScript (jQuery) disable checkbox issue

Okay, so I have a bit of a problem. I have some code, the JS works (at least with the non-CSS modified version), but it fails with the CSS modified version. Wondering if anyone can lend me some help to figure out what went wrong with the implementation of the CSS...
What I want to have happen, is the any of the first 4 chekboxes, if checked, disable all others. But, if any of the other checkboxes (numbers 5 and up) are checked, none are disabled (unless of course someone checks one of the first four).
My JavaScript:
<script type="text/javascript">
$(window).load(function(){
var $inputs = $('input[type=checkbox]', $('#test'));
var $inputs2 = $('input[type=checkbox]', $('#test2'));
$inputs.change(function(){
var $this = $(this);
$inputs.not(this).prop('disabled',($this.index() < 4 && this.checked));
if($this.index() < 4 && this.checked){
$inputs.not(this).prop('checked',false);
}
});
$inputs2.change(function(){
var $this = $(this);
$inputs2.not(this).prop('disabled',($this.index() < 4 && this.checked));
if($this.index() < 4 && this.checked){
$inputs2.not(this).prop('checked',false);
}
});
});
The first Div:
<div id="test" style="float:left; width:50%">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="font-size:3px"> </td></tr>
<tr>
<p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr>
<td width="150px"><input type="checkbox" id="1" name="1" class="css-checkbox" value="1" />
<label for="1" class="css-label">1</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="2" name="2" class="css-checkbox" value="2" />
<label for="2" class="css-label">2</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="3" name="3" class="css-checkbox" value="3" />
<label for="3" class="css-label">3</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="4" name="4" class="css-checkbox" value="4" />
<label for="4" class="css-label">4</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
<label for="5" class="css-label">5</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="6" name="6" class="css-checkbox" value="6" />
<label for="6" class="css-label">6</label></td></tr>
</table>
</div>
My CSS, if needed:
<style>
#Error {display: none;}
input[type=checkbox].css-checkbox {display:none;}
input[type=checkbox].css-checkbox + label.css-label {padding-left:20px;height:20px;display:inline-block;line-height:20px;background-repeat:no-repeat;background-position: 0 0;font-size:15px;vertical-align:middle;cursor:pointer;}
input[type=checkbox].css-checkbox:checked + label.css-label {background-position: 0 -20px;}
input[type=checkbox].css-checkbox:disabled + label.css-label {background-position: 0 -40px;}
.css-label{ background-image:url(web-two-style.png);}
</style>
The problem is: the following works, and the following was later modified with CSS and I can't figure out what went wrong.
What works:
<div id='test'>
<input type="checkbox" name="check1" value="1" id="check1" >first
<input type="checkbox" name="check2" value="1" id="check2" >second
<input type="checkbox" name="check3" value="1" id="check3" >third
<input type="checkbox" name="check4" value="1" id="check4" >fourth
<input type="checkbox" name="check5" value="1" id="check5" >fifth
<input type="checkbox" name="check6" value="1" id="check6" >sixth
<input type="checkbox" name="check7" value="1" id="check7" >seventh
<input type="checkbox" name="check8" value="1" id="check8" >eight
</div>
It gets even odder when I add the code that worked to the same div as the one that doesn't, since it the above non-CSS then works properly and will disable (where appropriate) all the checkboxes regardless of CSS, but when the CSS are checked, all are disabled:
<div id="test" style="float:left; width:50%">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="font-size:3px"> </td></tr>
<tr>
<p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr>
<td width="150px"><input type="checkbox" id="1" name="1" class="css-checkbox" value="1" />
<label for="1" class="css-label">1</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="2" name="2" class="css-checkbox" value="2" />
<label for="2" class="css-label">2</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="3" name="3" class="css-checkbox" value="3" />
<label for="3" class="css-label">3</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="4" name="4" class="css-checkbox" value="4" />
<label for="4" class="css-label">4</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
<label for="5" class="css-label">5</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="6" name="6" class="css-checkbox" value="6" />
<label for="6" class="css-label">6</label></td></tr> <input type="checkbox" name="check1" value="1" id="check1" >first
<input type="checkbox" name="check2" value="1" id="check2" >second
<input type="checkbox" name="check3" value="1" id="check3" >third
<input type="checkbox" name="check4" value="1" id="check4" >fourth
<input type="checkbox" name="check5" value="1" id="check5" >fifth
<input type="checkbox" name="check6" value="1" id="check6" >sixth
<input type="checkbox" name="check7" value="1" id="check7" >seventh
<input type="checkbox" name="check8" value="1" id="check8" >eight
</table>
</div>

.index() returns the index relative to the sibling elements. In your working example the siblings of an <input> are the other inputs. In your non-working example the only sibling is the <label> element.
In your "odd" example all inputs are siblings again.
In order to make it work anyway you can use .index(element):
$inputs.index($this)
This returns the index of the input $this within the jquery input collection $inputs. Working fiddle.

I would change the ID's on your input fields, ID's can't start with a number
<input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
may cause problems with your JS. I would try something like
<input type="checkbox" id="field-5" name="5" class="css-checkbox" value="5" />