Disable <Select> box after onclick Javascript

Hi - Thanks for looking at my question.

I have a very simple form that consists of a select box and a button:

  <select name="USRMaterial_Type" id="USRMaterial_Type">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>

<input type="button" value="Submit" onClick="BTN.value='Auto';SUBBTN.value='User';theform.USRMaterial_Type.disabled=true;subm(this.form,'HiddenSubmitFrame');javascript:form.submit();">
I want the SELECT box to diable once the user clicks the button which is does but when the form submits it does not pass the selected value because the element is disabled!

My issue is this part:

Is there a way to do this?


Who is Participating?
Ashish PatelCommented:
<input type="button" value="Submit" onClick="BTN.value='Auto';SUBBTN.value='User';theform.hUSRMaterial_Type.value=theform.USRMaterial_Type.value;theform.USRMaterial_Type.disabled=true;subm(this.form,'HiddenSubmitFrame');javascript:form.submit();">
Ashish PatelCommented:
Simple, create a hidden input field and before submit() pass the selected value of select into hidden field value and use it into other page from the hidden input field
Once s control is disabled, the value will not be sent with the form. Try creating a hidden control and then add a step to your onclick event to copy the value from the select to the hidden control BEFORE you disable.

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

LOL: I type too slow.!!
Ashish PatelCommented:
<input type="hidden" name="hUSRMaterial_Type" value="">
<input type="button" value="Submit" onClick="BTN.value='Auto';SUBBTN.value='User';theform.USRMaterial_Type.disabled=true;subm(this.form,'HiddenSubmitFrame');theform.hUSRMaterial_Type.value=theform.USRMaterial_Type.value;javascript:form.submit();">
Albert Van HalenAnalyst developerCommented:
Just enable the selectbox again when you post the form
PigdogmonsterAuthor Commented:
Thanks gents :)
espeicially asvforce as that is the solution I used.

I do however have a second part to this question that I hope you can help me with.

I have a 4 text box's but I only want 1 to appear on the screen until the user enters something in that text box.
What is the best way to do this?  I was thinking onclick but the user may not enter any text in the box and the 2nd would appear?

Any ideas?

Thanks again

try onchange, then in the function, check the control.value length to make sure it has content..

function unhide(oThis){
   if (oThis.length > 0)
       {   add your unhide code here }
     { hide those suckers again }

<input   id="text1" type=text  onchange="unhide(this);">
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.