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
610 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
[X]
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
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
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

705 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