Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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?

Posted on 2012-03-28
12
603 Views
Last Modified: 2013-12-08
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.
0
Comment
Question by:mchristopher
12 Comments
 
LVL 42

Expert Comment

by:sedgwick
ID: 37780746
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
 

Author Comment

by:mchristopher
ID: 37782538
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37815628
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 20

Expert Comment

by:Mark Brady
ID: 37815753
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37815981
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
 

Author Comment

by:mchristopher
ID: 37821809
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37821830
Yes

Add (this)

to onchange="chkappvalue(this);"

and paste my original code.
0
 

Author Comment

by:mchristopher
ID: 37821891
Thanks, but this did not work either.
0
 

Author Comment

by:mchristopher
ID: 37822047
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 37822415
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

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
PHP Curl to output a url 7 47
BATCH to EXE Converter 2 35
Search Item in Table 2 19
message Alert on an empty search 10 19
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question