Member Avatar for chineerat

Hi!

I am trying to manipulate the value of an input box based on whether a checkbox is checked or not.
example
checked input = 1600 and enabled
unchecked input = 0 and disabled

I am having 2 problems:
1) When the page is loaded I get unchecked and input = 1600: it should be : either
checked input = 1600 and enabled
or
unchecked input = 0 and disabled

2) When the checkbox is checked for the 2nd time the input remains 0 it should go back to the initial value 1600

can anyone help me?

<script language="JavaScript">
<!--
function enable_text(status)
{
if (status== true){
var var_gate_request_original = document.f1.GateRequest0.value ; 

document.f1.GateRequest0.disabled =false;
document.f1.GateRequest0.value = var_gate_request_original ;
}

if (status== false){

var var_gate_request_original = document.f1.GateRequest0.value ; 
var var_gate_request_zero = 0 ;
	
document.f1.GateRequest0.value = var_gate_request_zero;
document.f1.GateRequest0.disabled =true;
}


}
//-->
</script>
<form  name=f1  method='post'>
<table width="200" border="1">
  <tr>
    <td><input name="R1" type="checkbox" value=""  onclick='enable_text(this.checked)'/></td>
    <td><input name="GateRequest0" type="text" value="1600" /></td>
  </tr>
</table>
</form>
  • 3 Contributors
  • 2 Replies
  • 116 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

The root cause is twofold: the page is initialized with an HTML value that doesn't match the checkbox state, and the “original” value is being read from the input at toggle time (so once you set it to 0 you lose the real original). and point this out — the reliable fix is to keep the original value somewhere that does not get overwritten and to explicitly initialize the control on page load.

Suggested approach (robust and maintainable):

  • Store the initial/original number in a stable place (a JS variable or an HTML data- attribute) rather than reading the input value when toggling.
  • On DOMContentLoaded run a single initialization routine that sets the text value and disabled state to match the checkbox.
  • Use a change event listener on the checkbox to toggle the enabled/disabled state and restore either the original value or 0.
  • If the field must be submitted even when “disabled”, either use readonly (which still submits) or keep a hidden input synchronized with the visible control (disabled inputs are not submitted).

Example pattern (keeps the original in dataset and initializes on load):

document.addEventListener('DOMContentLoaded', function () {
  var cb = document.querySelector('input[name="R1"]');
  var txt = document.querySelector('input[name="GateRequest0"]');
  txt.dataset.orig = '1600'; // store original separately
  function sync() {
    if (cb.checked) { txt.disabled = false; txt.value = txt.dataset.orig; }
    else           { txt.value = '0';     txt.disabled = true; }
  }
  cb.addEventListener('change', sync);
  sync(); // initialize to match checkbox
});

Troubleshooting notes: use Number()/parseInt when you need numeric math; avoid inline onclick handlers for easier maintenance; if using form.reset(), remember it restores HTML attribute value, so update that attribute if you want a new reset baseline.

Recommended Answers

All 2 Replies

Member Avatar for paulrajj

Hi,

Check this out.

<script language="JavaScript">
<!--
function enable_text(status)
{
if (status== true){
var var_gate_request_original  = 1600;
document.f1.GateRequest0.disabled =false;
document.f1.GateRequest0.value = var_gate_request_original ;
}

if (status== false){

var var_gate_request_original = document.f1.GateRequest0.value ; 
var var_gate_request_zero = 0;
	
document.f1.GateRequest0.value = var_gate_request_zero;
document.f1.GateRequest0.disabled =true;
}


}
//-->
</script>

<form  name=f1  method='post'>
<table width="200" border="1">
  <tr>
    <td><input name="R1" type="checkbox" value=""  onclick='enable_text(this.checked)'/></td>
    <td><input name="GateRequest0" type="text" value="0" disabled="disabled" /></td>
  </tr>
</table>
</form>
Edited by paulrajj because: n/a
Member Avatar for Taywin

Your code has problems in 2 places - default value for GateRequest0 in JScript and in HTML. In JScript part, at line #6, you try to get the current value which could be changed to 0 by the time you read it again. As a result, the value will never be changed once you change it already one time. In HTML part, you specify the default value as 1600 which is also in the first display. As a result, you see the value as 1600 when the page is loaded.

From your original post, change 2 lines...

// this line #6 in your JScript
var var_gate_request_original = document.f1.GateRequest0.value
// to
var var_gate_request_original = 1600  // default value

// and this line #5 in your HTML
<input name="GateRequest0" type="text" value="1600" />
// to
<input name="GateRequest0" type="text" value="0" disabled />

// also you can delete line #14 in your JScript because it serves nothing.
// you could also merge the if condition for 'status' because it would be either true or false. Therefore, you could use if (status) {} else {} instead of 2 if statements.
Edited by Taywin because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.