Question

This is my code. Onclick of submit, if the answer is correct the value will be saved in database. What I want here is that, when I click on a submit button all other submit buttons in the form must be disabled. Can i do this? Please help me.

    <textarea name="questn" id="questn" readonly="readonly" cols="45" rows="5"><?php echo $quest['questnId']; ?>.&nbsp<?php echo $quest['question'];?></textarea>
   <input type="submit" class="myButton" name="option" value="<?php echo $quest['optiona'];?>"/>
   <input type="submit" class="myButton" name="option"  value="<?php echo $quest['optionb'];?>" />
   <input type="submit" class="myButton" name="option"  value="<?php echo $quest['optionc'];?>" />
   <input type="submit" class="myButton" name="option"  value="<?php echo $quest['optiond'];?>" />

The reason I used submit instead of radio is that i want the value on the button to be displayed over it dynamically.

Answer 1

you can write an onsubmit event on your form to disable all buttons.

<form action="xyz.html" onsubmit="handleSubmit()">
  <input type="submit" name="option" value="b1"/>
  <input type="submit" name="option" value="b2"/>
  <input type="submit" name="option" value="b3"/>
  <input type="submit" name="option"  value="b4"/>
</form>



function handleSubmit(){
   var list = document.getElementsByName('option');

   for(var i=0;i<list.length;i++){
      list[i].disabled=true;
   }

   alert('all disabled');
}​

http://jsfiddle.net/4BDaU/1/

---

2) if you dont want to disable the one clicked, i will suggest use onclick on buttons to call the handleSubmit. the code will look like this.

  <input type="submit" name="option" onclick="handleSubmit(this)" value="b1"/>
  <input type="submit" name="option" onclick="handleSubmit(this)" value="b2"/>
  <input type="submit" name="option" onclick="handleSubmit(this)" value="b3"/>
  <input type="submit" name="option" onclick="handleSubmit(this)" value="b4"/>

you handle function will now accept this which will be than excluded in the loop.

function handleSubmit(current){
   var list = document.getElementsByName('option');

   for(var i=0;i<list.length;i++){
      if(list[i]!=current)   // new condition added
         list[i].disabled=true;
   }

   alert('all disabled');
}​

Also note that, you don’t need add onsubmit in your form in this case