We Keep Coding

Changing input text value with jQuery in form

I have 2 checkbox input and 1 input text.
When i click on checkbox #1 i want to disabled checkbox #2 then, add a text (my-text-1) in input text and make it unchangeable
When i click on checkbox #2 i want to disabled checkbox #1 then, add a text (my-text-2) in input text and make it unchangeable
with jQuery 3.4.1
So, it works but ...
When i submit the form, the value of the input text is not recorded in my database. It's like the field is empty.
$(document).ready(function(){
$("#checkbox1").on('click', function(){
if($(this).is(':checked')) {
$("#inputtext").val("my-text-1").prop('disabled', true);
$("#checkbox2").prop('disabled', true);
} else {
$("#inputtext").val("").prop('disabled', false);
$("#checkbox2").prop('disabled', false);
}
});
$("#checkbox2").on('click', function(){
if($(this).is(':checked')) {
$("#inputtext").val("my-text-2").prop('disabled', true);
$("#checkbox1").prop('disabled', true);
} else {
$("#inputtext").val("").prop('disabled', false);
$("#checkbox1").prop('disabled', false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Checkbox #1</label>
<input id="checkbox1" type="checkbox" value="" name="checkbox1"><br/>
<label>Checkbox #2</label><input id="checkbox2" type="checkbox" value="" name="checkbox2"><br/>
<label>Text : </label><input name="inputtext" id="inputtext" type="text" size="50" maxlength="50" value="" />

Instead of using disabled property on the input[text] element use readonly property. Data for disabled elements does not get submitted:
$("#inputtext").val("my-text-1").prop('readonly', true);
Another alternative would be to enable the element prior to submitting the form.
Reference

How display data entered in one text box to another text box on checkbox tick?

I'm trying to reflect data entered in one text box to another text box on checkbox tick. The default state of checkbox is checked. The value should change after it is unchecked and gets checked back again. Even though the code seems to be working, the only output I'm getting is 'on'.
$(".check").click(function() {
if ($(this).is(":checked")) {
$('.add1').val(this.value) === $('.add2').val(this.value);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=checkbox checked class="check">
<input type="text" id="first" class="add1" />
<input type="text" id="second" class="add2" />
Kindly note that I would like to do this by class.
Here's the fiddle: https://jsfiddle.net/starscream166/n87vLd51/1/

The issue is because this refers to the checkbox. Hence this.value, which you place in the value of the textboxes, it the string 'on'.
To fix this place the val() of .add1 in to .add2, as in the below example. Also note the use of change instead of click when dealing with checkboxes, as it improves accessibility.
$(".check").change(function() {
if (this.checked) {
$('.add2').val($('.add1').val());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" checked class="check">
<input type="text" id="first" class="add1" />
<input type="text" id="second" class="add2" />

Please check here: https://jsfiddle.net/4kp3msax/1/
OR you can do the following code.
$(".check").click(function() {
if ($(this).is(":checked")) {
var add1 = $('.add1').val();
$('.add2').val(add1);
}
});

Pass $('.add2').val() the result of $('.add1').val()
.val() can be used to retrieve or assign an input's value. It can be called without a parameter, which will return the string value of the input. Or, it can be called with a parameter which will assign the value to the input.
$(".check").click(function() {
if ($(this).is(":checked")) {
$('.add2').val($('.add1').val());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=checkbox checked class="check">
<input type="text" id="first" class="add1" />
<input type="text" id="second" class="add2" />

Works when any of one field data changed
let swt_data = "";
$(".add1").on("change", function() {
swt_data = $(this).val();
})
$(".check").click(function() {
if ($(this).is(":checked")) {
if (swt_data != $('#first').val() != $('#second').val()) {
$('#first').val(swt_data);
$('#second').val(swt_data)
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=checkbox checked class="check">
<input type="text" id="first" class="add1" />
<input type="text" id="second" class="add1" />

Tracking the order checkboxes are checked

I have a dynamically created table that is filled with rows and columns of checkboxes.
Their unique id's are dynamically created as well.
I would like to store the order that the checkboxes are checked by the user in the checkboxs' values.
If a checkbox is unchecked, its value should be reset to "" or to "0".
It doesn't matter how many times a checkbox is checked and unchecked.
I only need the ultimate order, so an incrementing variable should work fine.
For example:
There are checkbox1 - checkbox10 and all their values are initially set to "".
If the user first clicked on checkbox3 its value would be set to "1".
If the user then clicked on checkbox5 its value would be set to "2".
If the user then clicked on checkbox8 its value would be set to "3".
If checkbox3 and checkbox5 were unclicked, their values would be reset to "".
If checkbox3 were checked yet again its value would be set to "4".
It would not matter that there was no checkbox with a value of 1 or 2.

https://jsfiddle.net/a6fm7h9h/
$(document).ready(function() {
var checkboxChecks = 1;
$('input[type=checkbox]').on('change', function() {
var $this = $(this);
if ($this.is(':checked')) {
$this.val(checkboxChecks++);
} else {
$this.val('');
}
});
});
input {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="" name="cb1" />
<input type="checkbox" value="" name="cb2" />
<input type="checkbox" value="" name="cb3" />
<input type="checkbox" value="" name="cb4" />
<input type="checkbox" value="" name="cb5" />
<input type="checkbox" value="" name="cb6" />
<input type="checkbox" value="" name="cb7" />
<input type="checkbox" value="" name="cb8" />
<input type="checkbox" value="" name="cb9" />
<input type="checkbox" value="" name="cb10" />

You could do this:
If you don't have jQuery on your website, add this code first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
And then, add this (which should do the trick without any modifications):
<script>
var myCount = [];
$(document).ready(function() {
$("input[type='checkbox']").change(function() {
if($(this).is(":checked")) {
myCount.push($(this).attr('id'));
$(this).val(myCount.indexOf($(this).attr('id'))+1);
}else{
delete myCount[myCount.indexOf($(this).attr('id'))];
$(this).val("");
}
});
});
</script>
Hope this works, let me know!
Cheers

Just drawing from what others posted, this seems to work fine.
$(document).ready(function() {
var checkboxChecks = 10001;
$('.myTablesClass').on('change', 'tr td .myInputsClass', function(){
var $this = $(this);
if ($this.is(':checked')) {
$this.val(checkboxChecks++);
} else {
$this.val('');
}
});
});`

Is it possible to assign value of text-field to radio button

I am providing multiple check-box and radio button when i enter any value in text field than the same value will assign to radio button and How it is possible using jQuery. Below is the image for reference. I am storing Question and multiple answer and i am going to store true answer out of them like shown in image.
$data = array();
for($i=0,$j=1;$i<count($_REQUEST['quiz_options']);$i++,$j++)
{
$data["quiz_Options".$j] = $_REQUEST['quiz_options'][$i];
}
$data["quiz_Id"] = $Quiz_ID;
$data["quiz_Correct_Answer"] = $_REQUEST['quiz_opt'];
$quiz->insertOptions($data,'quizoptions');
<input class="col-md-4" type="text" name="quiz_options[]" value=""/>
<input type="radio" name="quiz_opt[]" value=""/>
//Here I want to assign my textfield value to the radio button when i write something in my text field.
Please see the example here

You could attach a keydown event to the the textbox and update the value of the radiobutton.
something like this(pseudocode):
$('#textboxId').on('keydown',function(){
$('#radiobuttonId').val($(this).value);
});

Maybe you can use a data attributes (HTML5)
Example
:)

You have to on blur or onchange and should use one class for all dynamic textbox creation. try this code
<input name="quiz_options[]" class ="changesNo1" value="" />
<input name="quiz_options[]" class ="changesNo1" value="" />
<input name="quiz_options[]" class ="changesNo1" value="" />
<input type=radio value="" name="quiz_opt[]">
<input type=radio value="" name="quiz_opt[]">
<input type=radio value="" name="quiz_opt[]">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var test_arr = $("input[name='quiz_options[]']");
$(document).on('change keyup blur','.changesNo1',function(){
$.each(test_arr, function(i, item) {
$("input[name='quiz_opt[]']").val($(item).val());
var d=$("input[name='quiz_opt[]']").val(); // your reference
//alert(d); // This alert for your reference
});
});
</script>

enable multiple checkboxes when a checkbox is checked

I have 5 text boxes whose IDs and names are all different from each other. But i have to enable all 5 text boxes when a certain checkbox is checked. How do i do this with JavaScript?

With jQuery you can do
<input id="check" type="checkbox" value=""><br>
<input type="text" value="" disabled="disabled"><br>
<input type="text" value="" disabled="disabled"><br>
<input type="text" value="" disabled="disabled"><br>
var $input = $('input[type="text"]');
$('#check').live('click', function() {
$(this).is(':checked') ? $input.removeAttr('disabled') : $input.attr('disabled', 'disabled');
})
Check working example at http://jsfiddle.net/CpmkE/3/