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
588 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 20

Expert Comment

by:Mark Brady
Comment Utility
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
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

Author Comment

by:mchristopher
Comment Utility
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
Comment Utility
Yes

Add (this)

to onchange="chkappvalue(this);"

and paste my original code.
0
 

Author Comment

by:mchristopher
Comment Utility
Thanks, but this did not work either.
0
 

Author Comment

by:mchristopher
Comment Utility
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
Comment Utility
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now