[SOLVED] HTMLForm - Javascript Question

March 19, 2014, 05:33 PM

Not an expert in Javascript so I was hoping you guys can help.

I have a parameter report with a Chained Drop Down List and a textbox where the user can input. I'm looking to use the Onclick OnBlur where if the User clicks on the Input form it will blur the Chained Drop Down and vice versa.

Below is a example using the CAR file.

-HTMLFORM BEGIN
< !doctype html>
<html lang="en">
<head>
  <title>TEST</title>
</head>



<div
 style="font-weight: bold; font-family: Arial; color: rgb(51, 102, 255);">
CAR SELECTION
</div>
<div align="left">
<select id="COUNTRY" name="COUNTRY">
<option value="">Select Country</option>
<option value="ENGLAND">ENGLAND</option>
<option value="JAPAN">JAPAN</option>
<option value="ITALY">ITALY</option>
</select>


<select id="CAR" name="CAR">
<option value="">Select Cart</option>
<option value="JAGUAR">JAGUAR</option>
<option value="TOYOTA">TOYOTA</option>
<option value="MASERATI">MASERATI</option>
</select>



<select id="BODYTYPE" name="BODYTYPE">
<option value="">Select Model</option>
<option value="SEDAN">SEDAN</option>
<option value="COUPE">COUPE</option>
</select>


</div>



<div
style="font-weight: bold; font-family: Arial; color: rgb(51, 102, 255);">
PICK CAR TEXT BOX
<form>
Enter Car <input type="text" name="inputecar">

</form> 

</div>



<div
style="font-weight: bold; font-family: Arial; color: rgb(51, 102, 255);">
OUTPUT SELECTION
</div>
  <SELECT name="OUTPUT">
    <OPTION value=HTML selected>HTML</OPTION>
    <OPTION value=PDF>PDF</OPTION>
    <OPTION value=EXL2K>EXCEL</OPTION>
  </SELECT>



-*
<input type=submit value="Submit">
</FORM>
<hr noshade size=7>
</body>
</html>
-HTMLFORM END

This message has been edited. Last edited by: <Kathryn Henning>,

March 19, 2014, 06:24 PM

Tony A

Not sure if this is what you meant. On focusing on the text input the S function will disable the combos. When the text input loses focus the JS function will enable the combos if the text input has no content.

I've added an id to the text input to allow identification and corrected some of the syntax (you had 2 </form> and some mismatched <div>s).

-HTMLFORM BEGIN
<!doctype html>
<html lang="en">
<head>
  <title>TEST</title>
</head>
<script>
function disable_combos() {
  document.getElementById("COUNTRY").disabled = true;
  document.getElementById("CAR").disabled = true;
  document.getElementById("BODYTYPE").disabled = true;
}
function enable_combos() {
  if(document.getElementById("text1").value=="") {
    document.getElementById("COUNTRY").disabled = false;
    document.getElementById("CAR").disabled = false;
    document.getElementById("BODYTYPE").disabled = false;
  }
}
</script>
<div
 style="font-weight: bold; font-family: Arial; color: rgb(51, 102, 255);">
CAR SELECTION
</div>
<div align="left">
<select id="COUNTRY" name="COUNTRY">
<option value="">Select Country</option>
<option value="ENGLAND">ENGLAND</option>
<option value="JAPAN">JAPAN</option>
<option value="ITALY">ITALY</option>
</select>

<select id="CAR" name="CAR">
<option value="">Select Cart</option>
<option value="JAGUAR">JAGUAR</option>
<option value="TOYOTA">TOYOTA</option>
<option value="MASERATI">MASERATI</option>
</select>

<select id="BODYTYPE" name="BODYTYPE">
<option value="">Select Model</option>
<option value="SEDAN">SEDAN</option>
<option value="COUPE">COUPE</option>
</select>

</div>

<div style="font-weight: bold; font-family: Arial; color: rgb(51, 102, 255);">
PICK CAR TEXT BOX
  <form>
    Enter Car <input id ="text1" type="text" name="inputecar" onfocus="disable_combos();" onblur="enable_combos();">
    <div style="font-weight: bold; font-family: Arial; color: rgb(51, 102, 255);">OUTPUT SELECTION</div>
    <SELECT name="OUTPUT">
      <OPTION value=HTML selected>HTML</OPTION>
      <OPTION value=PDF>PDF</OPTION>
      <OPTION value=EXL2K>EXCEL</OPTION>
    </SELECT>
-*
    <input type=submit value="Submit">
  </form> 
</div>
<hr noshade size=7>
</body>
</html>
-HTMLFORM END

In FOCUS since 1986	WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2
	WebFOCUS App Studio 8.2.06 standalone on Windows 10