Is there a way to get the last value of input text fields inside the menus class?
The values are dynamic and the number of input fields are also dynamic.In this example we have 4 input fields inside the menus class and the last value I want to get is 4.
<p class="menus">
<input type="text" name="test" class="test" value="1">
<input type="text" name="test" class="test" value="2">
<input type="text" name="test" class="test" value="3">
<input type="text" name="test" class="test" value="4">
</p>
You can use jquery last-child-selector
function getValue() {
console.log($(".menus input:last-child").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="menus">
<input type="text" name="test" class="test" value="1">
<input type="text" name="test" class="test" value="2">
<input type="text" name="test" class="test" value="3">
<input type="text" name="test" class="test" value="4">
</p>
<button type="button" onclick="getValue()">Get Value</button>
Related
Is it possible to have multiple radio button groups in a single form? Usually selecting one button deselects the previous, I just need to have one of a group deselected.
<form>
<fieldset id="group1">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
<fieldset id="group2">
<input type="radio" value="">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
</form>
Set equal name attributes to create a group;
<form>
<fieldset id="group1">
<input type="radio" name="group1">value1</input>
<input type="radio" name="group1">value2</input>
</fieldset>
<fieldset id="group2">
<input type="radio" name="group2">value1</input>
<input type="radio" name="group2">value2</input>
<input type="radio" name="group2">value3</input>
</fieldset>
</form>
This is very simple you need to keep different names of every radio input group.
<input type="radio" name="price">Thousand<br>
<input type="radio" name="price">Lakh<br>
<input type="radio" name="price">Crore
</br><hr>
<input type="radio" name="gender">Male<br>
<input type="radio" name="gender">Female<br>
<input type="radio" name="gender">Other
Just do one thing,
We need to set the name property for the same types. for eg.
Try below:
<form>
<div id="group1">
<input type="radio" value="val1" name="group1">
<input type="radio" value="val2" name="group1">
</div>
</form>
And also we can do it in angular1,angular 2 or in jquery also.
<div *ngFor="let option of question.options; index as j">
<input type="radio" name="option{{j}}" value="option{{j}}" (click)="checkAnswer(j+1)">{{option}}
</div>
in input field make name same
like
<input type="radio" name="option" value="option1">
<input type="radio" name="option" value="option2" >
<input type="radio" name="option" value="option3" >
<input type="radio" name="option" value="option3" >
To create a group of inputs you can create a custom html element
window.customElements.define('radio-group', RadioGroup);
https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47
to keep selected option in each group, you need to add name attribute to inputs in group, if you not add it then all is one group.
Having several rows, where each row has a checkbox, a label, and an input text
How can I enable/disable the checkbox's neighbour input text when the check box is selected, using jquery. By this I mean to just enable/disable the input that is on same row with checkbox
I have:
<form>
<p>
<input id="chk1" type="checkbox">
<label >text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label >text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label >text 3 </label>
<input id="input3" type="text">
</p>
</form>
and do not know how to do this
$(':checkbox').change(function(){
$('input:text').?find?.prop("disabled", !$(this).is(':checked'));
});
here is fiddle
maybe like this:
$(':checkbox').change(function(){
var this_nr=$(this).attr('id').substr(-1);
$('#input'+this_nr).prop('disabled', !$(this).is(':checked'));
});
$(':checkbox').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<p>
<input id="chk1" type="checkbox">
<label >text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label >text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label >text 3 </label>
<input id="input3" type="text">
</p>
</form>
or like this:
$(':checkbox').change(function(){
$('input:text').eq($(':checkbox').index(this)).prop("disabled", !$(this).is(':checked'));
});
$(':checkbox').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<p>
<input id="chk1" type="checkbox">
<label >text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label >text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label >text 3 </label>
<input id="input3" type="text">
</p>
</form>
I would use event delegation on the form, in the handler using nextAll to find the next text box.
// disable all the text fields
$('#myform :text').each(function () {
$(this).prop('disabled', true);
});
$('#myform').on('change', ':checkbox', function (evt) {
let textbox = $(this).nextAll(':text');
textbox.prop('disabled', (i, val) => !val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<p>
<input id="chk1" type="checkbox">
<label for="chk1">text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label for="chk2">text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label for="chk3">text 3 </label>
<input id="input3" type="text">
</p>
<p>
<label for="tos">I agree to the Terms of Service</label><input id="tos" type="checkbox"><br>
<label for="comment">Comments </label><input id="comment" type="text" value="This will toggle when you check the TOS">
</p>
</form>
This works if your entire form is in this checkbox followed by textbox form; it will break if you have any other checkboxes that don't control a textbox or textboxes that shouldn't be disabled. To be more flexible, I would add a class to the items I wanted to have this behavior:
// disable all the text fields
$('#myform :text.toggle-input').each(function () {
$(this).prop('disabled', true);
});
$('#myform').on('change', ':checkbox.toggle-input', function (evt) {
let textbox = $(this).nextAll(':text.toggle-input');
textbox.prop('disabled', (i, val) => !val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<p>
<input id="chk1" class="toggle-input" type="checkbox">
<label for="chk1">text 1 </label>
<input id="input1" class="toggle-input" type="text">
</p>
<p>
<input id="chk2" class="toggle-input" type="checkbox">
<label for="chk2">text 2 </label>
<input id="input2" class="toggle-input" type="text">
</p>
<p>
<input id="chk3" class="toggle-input" type="checkbox">
<label for="chk3">text 3 </label>
<input id="input3" class="toggle-input" type="text">
</p>
<p>
<label for="tos">I agree to the Terms of Service</label><input id="tos" type="checkbox"><br>
<label for="comment">Comments </label><input id="comment" type="text" value="This won't toggle when you check the TOS">
</p>
</form>
You could use the jQuery siblings function to retrieve the neighboring textbox and enable/disable it based on the .checked property. I've called .change() at the end to set the initial state of the textboxes.
$(":checkbox")
.change(function() {
$(this)
.siblings("input[type='text']")
.prop("disabled", !this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input id="chk1" type="checkbox">
<label>text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label>text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label>text 3 </label>
<input id="input3" type="text">
</p>
</form>
I have this simple html form. with 3 radio box options.
The last radio box option is 'others'
I want the text box to input other reasons to appear only when then 'other's combo box is selected. is there any way to do that?
<html>
<body>
<div class="form-group">
<input type="radio" name="option" value="a"> Missing deadline.<br>
<input type="radio" name="option" value="b"> Unsatisfied with the work.<br>
<input type="radio" name="option" value="c"> No response from Accountant.<br>
<input type="radio" name="option" value="d"> Other reasons. <br>
<input autofocus type="text" id="reason" name="reason" placeholder="Please key in the reasons.">
</div>
<body>
</html>
Give it a try.
function showTextbox() {
document.getElementById("reason").style.display = "block";
}
<html>
<body>
<div class="form-group">
<input type="radio" name="option" value="a"> Missing deadline.<br>
<input type="radio" name="option" value="b"> Unsatisfied with the work.<br>
<input type="radio" name="option" value="c"> No response from Accountant.<br>
<input type="radio" name="option" value="d" onclick="showTextbox()"> Other reasons. <br>
<input autofocus type="text" id="reason" name="reason" placeholder="Please key in the reasons." style="display:none">
</div>
<body>
</html>
Here is a solution using jQuery, by setting an on-change event to the checkbox:
$("#test").change(function(){
$("#hidden").show()
});
#hidden {display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click Me
<input type="checkbox" id="test">
<div id="hidden">alec</div>
If I have 4 text boxes in my form, at any point can I get id of text field in which user is filling the information at the moment.
Eg. in following context, I should be able to get id of textbox 3.
Thanks
You can get the currently active element using document.activeElement, so its ID using document.activeElement.id.
Focus on any of the textboxes in the snippet to see how it works:
setInterval(function() {
console.log("Active element: " + document.activeElement.id);
},1000);
<input type="text" name="" id="1">
<br>
<input type="text" name="" id="2">
<br>
<input type="text" name="" id="3">
<br>
<input type="text" name="" id="4">
You can use getAttribute() like the following way:
function myFunc(thatText){
console.log(thatText.getAttribute('id'));
}
<div>
<input type="text" id="txt1" onchange="myFunc(this)" placeholder="1"/><br/>
<input type="text" id="txt2" onchange="myFunc(this)" placeholder="2"/><br/>
<input type="text" id="txt3" onchange="myFunc(this)" placeholder="3"/><br/>
<input type="text" id="txt4" onchange="myFunc(this)" placeholder="4"/>
</div>
There can be an onkeyup function. pass this from the DOM and in js use that argument to get id
function getElem(elem) {
console.log(elem.id)
}
<input type="text" name="test" id="1" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="2" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="3" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="4" onkeyup="getElem(this)">
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
}