Changing input text value with jQuery in form

Question

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="" />

When i submit the form, the value of the input text is not recorded in my database. Where is your code then? — Felippe Duarte
– Felippe Duarte, Commented May 12, 2020 at 16:32

PeterKA · Accepted Answer · 2020-05-12 16:49:12Z

3

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

edited May 12, 2020 at 16:49

answered May 12, 2020 at 16:42

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bklups Over a year ago

You're right @PeterKA : disabled element does not get submitted

Collectives™ on Stack Overflow

Changing input text value with jQuery in form

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related