How to modify existing javascript to make certain that either the current select or the new text input is completed, but not both. Also, can the text input be the same name, opsys?

The form name is ASA

The html follows:
<td>Server Operating System &nbsp;
             <cfselect name="opsys" size="1" onchange="chkappvalue();">
                        <option value="NONE" selected>Select operating system
                        <option value="Windows2008R2-64bit">Windows2008R2-64bit
                        <option value="Windows2008-32bit">Windows2008-32bit
                        <option value="Windows2003R2-32bit">Windows2003R2-32bit
            </cfselect>
            </td>

 The current javascript follows:

function chkappvalue() {
  indx = document.asa.opsys.selectedIndex;
  if (document.asa.apps[3].checked == true || document.asa.apps[4].checked == true) {
  if (document.asa.opsys.options[indx].value != "Windows2008R2-64bit") {
  alert("Note: Please note that you must use Operating System Windows2008R2-64bit");
  document.asa.opsys.selectedIndex = 1;}
  }

I need to add another item to this select. A text input. Like the following:

<td>
OR specify template name
        <cfinput name="opsys" type="text" size="20" maxlength="25" />
</td>

My question is how to modify the javascript to make certain that either the select or the text input is completed, but not both. Also, can the text input be the same name, opsys?

Thank you.
mchristopherAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Meir RivkinFull stack Software EngineerCommented:
what do u mean the select or the text input is completed?
you have dropdown list and an input text, no what is the logic?
0
mchristopherAuthor Commented:
The client wants to have the select and the option of an input text for the same data field, if 'specify template name' is selected. A check to make sure that either the select or the text box is completed, but not both is necessary, also.
Does this help? Thanks.
0
Gurvinder Pal SinghCommented:
So, if i get this right, you want to
-- make sure that if user select a value from select box, then textbox should be disabled (or removed)
-- or if he enters a value in textbox, then select box should be disabled (or removed)
Please confirm this

In such a case, you will have to update chkappvalue() method to remove textbox (if the value is selected in select box), or attach a blur event to textbox and remove select box if textbox value is not empty
0
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.

Mark BradyPrincipal Data EngineerCommented:
Yes you can do both of those things easily. Firstly, you need to add an ID property to both the select and the text input elements. That way we can work with them using javascript.

Now the best way I could think of is to use and onchange event for the select element and have a small function that if the "value" field is not empty (the user has selected something), then you use code to hide the text input. On your form you can "name-" use the same name for both of these fields as only one of them will be sent with the other form data (the other will be hidden). Here is a quick example...

function check_input() {
var obSelect = document.getElementById('opsys-select'); // The select element
var obText = document.getElementById('opsys-text'); // The text element
if(obSelect.value != '') {
       // the user has selected something from the select box
      obText.style.display = 'none';
      } else {
      obText.style.display = 'inline';
      }
}

You need to add an id field to both form elements so my function will work with them. Basically when the select box is changed/selected or de-selected it runs the code which checks it for a value. If it has a value it will not display the text input field. In the text input element you will need to add an onBlur="check_input()" and on the select element add an onchange="check_input()" so both element will trigger the function.
So make sure you add different id properties to each item/element and you can use the same name value as only one will be sent.
0
Michel PlungjanIT ExpertCommented:
I would suggest this:
<cfselect name="opsys" size="1" onchange="chkappvalue(this);">

function chkappvalue(theSel) {
  var indx theSel.selectedIndex;
  var form = theSel.form;
  if ((theForm.apps[3].checked || theForm.apps[4].checked) && theSel.options[indx].value != "Windows2008R2-64bit") {
    alert("Note: Please note that you must use Operating System Windows2008R2-64bit");
    theSel.selectedIndex = 1;
  }
  form.opsys[1].disabled = theSel.selectedIndex>0;
 }

Open in new window

0
mchristopherAuthor Commented:
What follows is the orginal code:
Server Name
      <cfinput name="server" size="20" maxlength="15" onValidate="chkappvalue">
Server Operating System &nbsp;
       <cfselect name="opsys" size="1">
            <option value="NONE" id="None" selected>Select operating system
            <option value="Windows2008R2-64bit" id="200864">Windows2008R2-64bit
            <option value="Windows2008-32bit" id="200832">Windows2008-32bit
            <option value="Windows2003R2-32bit" id="2003R2">Windows2003R2-32bit
       </cfselect>
      

function chkappvalue() {
  indx = document.asr.opsys.selectedIndex;
  if (document.asr.apps[3].checked == true || document.asr.apps[4].checked == true) {
  if (document.asr.opsys.options[indx].value != "Windows2008R2-64bit") {
  alert("Note: Please note that Sharepoint farms are only built with Server Operating System Windows2008R2-64bit");
  document.asr.opsys.selectedIndex = 1;}
  }


This is the solution I tried (but do not work):
Server Name
      <cfinput name="server" size="20" maxlength="15" onValidate="check_input()">
Server Operating System &nbsp;
       <cfselect name="opsys" size="1">
            <option value="NONE" id="None" selected>Select operating system
            <option value="Windows2008R2-64bit" id="200864">Windows2008R2-64bit
            <option value="Windows2008-32bit" id="200832">Windows2008-32bit
            <option value="Windows2003R2-32bit" id="2003R2">Windows2003R2-32bit
       </cfselect>
Or specify Template Name
      <cfinput name="opsys" id="tempName" type="text" size="20" maxlength="25">

 function check_input()  {
  indx = document.asr.opsys.selectedIndex;
  if (document.asr.apps[3].checked == true || document.asr.apps[4].checked == true) {
  if (document.asr.opsys.options[indx].value != "Windows2008R2-64bit") {
  alert("Note: Please note that Sharepoint farms are only built with Server Operating System Windows2008R2-64bit");
  document.asr.opsys.selectedIndex = 1;}                                    
       {
      var obSelect = document.getElementById('opsys-select'); // The select element
      var obText = document.getElementById('opsys-text'); // The text element
      if(obSelect.value != '') {
       // the user has selected something from the select box
      obText.style.display = 'none';
      } else {
      obText.style.display = 'inline';
      }


// I feel like I am missing something right in front of me. Thanks for your assistance.
0
Michel PlungjanIT ExpertCommented:
Yes

Add (this)

to onchange="chkappvalue(this);"

and paste my original code.
0
mchristopherAuthor Commented:
Thanks, but this did not work either.
0
mchristopherAuthor Commented:
The following two solutions do not work.
ONE
<tr bgcolor="#FFFFCC"><td colspan=2>
      Server Name
      <input name="server" size="20" maxlength="15">
</td></tr>
<tr bgcolor="#FFFFCC">
      <td>
      Server Operating System &nbsp;
       <select name="opsys" size="1" onchange="check_input()">
            <option value="NONE" id="None" selected>Select operating system
            <option value="Windows2008R2-64bit" id="2008R2">Windows2008R2-64bit
            <option value="Windows2008-32bit" id="200832">Windows2008-32bit
            <option value="Windows2003R2-32bit" id="2003R2">Windows2003R2-32bit
       </select>
      </td>
      <!--- @COMMENT: New text field for 'or Specify Template Name' --->
      <td align="left">
            Or specify Template Name
            <input name="opsys" id="tempName" type="text" size="20" maxlength="25" onBlur="check_input()">
      </td>
</tr>

 function check_input()  {
  indx = document.asr.opsys.selectedIndex;
  if (document.asr.apps[3].checked == true || document.asr.apps[4].checked == true) {
  if (document.asr.opsys.options[indx].value != "Windows2008R2-64bit") {
  alert("Note: Please note that Sharepoint farms are only built with Server Operating System Windows2008R2-64bit");
  document.asr.opsys.selectedIndex = 1;}                                    
       {
      var obSelect = document.getElementById('opsys-select'); // The select element
      var obText = document.getElementById('opsys-text'); // The text element
      if(obSelect.value != '') {
       // the user has selected something from the select box
      obText.style.display = 'none';
      } else {
      obText.style.display = 'inline';
      }

TWO
<tr bgcolor="#99FFFF"><td colspan=2>
      Server Name
      <input name="server" size="20" maxlength="15">
</td></tr>
<tr bgcolor="#99FFFF">
      <td>
      Server Operating System &nbsp;
       <select name="opsys" size="1" onchange="chkappvalue(this)">
            <option value="NONE" id="None" selected>Select operating system
            <option value="Windows2008R2-64bit" id="2008R2">Windows2008R2-64bit
            <option value="Windows2008-32bit" id="200832">Windows2008-32bit
            <option value="Windows2003R2-32bit" id="2003R2">Windows2003R2-32bit
       </select>
      </td>
      <!--- @COMMENT: New text field for 'or Specify Template Name' --->
      <td align="left">
            Or specify Template Name
            <input name="opsys" id="tempName" type="text" size="20" maxlength="25" >
      </td>
</tr>

function chkappvalue(theSel) {
  var indx theSel.selectedIndex;
  var form = theSel.form;
  if ((theForm.apps[3].checked || theForm.apps[4].checked) && theSel.options[indx].value != "Windows2008R2-64bit") {
    alert("Note: Please note that you must use Operating System Windows2008R2-64bit");
    theSel.selectedIndex = 1;
  }
  form.opsys[1].disabled = theSel.selectedIndex>0;
 }
0
Michel PlungjanIT ExpertCommented:
Sorry to have wasted your time

There were a few typos

This has been tested here: DEMO

function chkappvalue(theSel) {
  var indx = theSel.selectedIndex;
  var theForm = theSel.form;
  if ((theForm.apps[3].checked || theForm.apps[4].checked) && theSel.options[indx].value != "Windows2008R2-64bit") {
    alert("Note: Please note that you must use Operating System Windows2008R2-64bit");
    theSel.selectedIndex = 1;
  }
  theForm.opsys[1].disabled = theSel.selectedIndex>0;
 }

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.

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.