?
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
Medium Priority
?
615 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
10 Comments
 
LVL 42

Expert Comment

by:Meir Rivkin
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:Gurvinder Pal Singh
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month16 days, 22 hours left to enroll

862 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