• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 170
  • Last Modified:

Help with Populating a text box based on a selction from a drop down. (Java Script)

Experts,

Have asked this question last week (here is the link:
http://www.experts-exchange.com/Programming/Languages/Scripting/Q_28402628.html)

But I had to make some changes the way it is working and have a different code (please see below)

Issue is : If I comment the <form> tag , the code below is working and if I uncomment the <form> tag  it is not working...could you please see the code below what I am doing wrong.

Thanks and appreciate your quick response.

Here is the code..
<html>
<script type="text/javascript">
  function test()
  {
    var select = document.getElementById("select");
    var texts = document.getElementById("texts");
    var val = select.options.value;
    texts.innerHTML = "";
    if (select.options.value == 2)
    {
      texts.innerHTML += 'Year:</td><div><td><input type="text" name="test" value="" /></div>';
    }
  }
</script>

<body>
<!---  <form name="myform">--->
  <select id="select" size="1" onChange="JavaScript:test();" name ="test">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
    
  <hr/>
    <tr><td>
    <div id="texts"></div>
    </td></tr>
<!---    </form>--->
  </body>
</html>

Open in new window

0
Tpaul_10
Asked:
Tpaul_10
  • 6
  • 6
2 Solutions
 
Julian HansenCommented:
To solve your problem change the

select.options.value

to

select.value
<html>
<script type="text/javascript">
  function test()
  {
    var select = document.getElementById("select");
    var texts = document.getElementById("texts");
    var val = select.value;
    texts.innerHTML = "";
    if (select.value == 2)
    {
      texts.innerHTML += 'Year:</td><div><td><input type="text" name="test" value="" /></div>';
    }
  }
</script>

<body>
<!---  <form name="myform">--->
  <select id="select" size="1" onChange="JavaScript:test();" name ="test">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
    
  <hr/>
    <tr><td>
    <div id="texts"></div>
    </td></tr>
<!---    </form>--->
  </body>
</html>

Open in new window

0
 
Julian HansenCommented:
Here is an alternative using JQuery

Just a note on your HTML markup - it is badly broken - the text you are adding to the #texts text box has </td> and <td> around the <div> and outside of a table - not good.

Code posted partially corrects this but without knowing what you are trying to achieve cannot suggest complete fix - therefore answered in context of question asked
<html>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var html = 'Year: <div><input type="text" name="test" value="" /></div>';
$(function() {
	$('#select').change(function() {
		if ($(this).val() == 2) {
			$('#texts').html(html);
		}
		else {
			$('#texts').html('');
		}
	});
});
</script>

<body>
<!---  <form name="myform">--->
  <select id="select" size="1" onChange="JavaScript:test();" name ="test">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
    
  <hr/>
    <tr><td>
    <div id="texts"></div>
    </td></tr>
<!---    </form>--->
  </body>
</html>

Open in new window

0
 
Tpaul_10Author Commented:
Thanks for the reply Julian, appreciate it.

Basically when I choose option "2" it should populate a text box and if I choose other options the text should be hidden.

1. First code is still not working if I uncomment my form tag.
2. Second code works but I need to place the text box in a specific place in my form with the class or styles etc.,
Here is what I am trying to add and if I add the following code it is not working.

var html = '<tr><td align="right" valign="top"><span class='MyformClass_bold'>Year:&nbsp;</span></td><td><div><input type="text" name="test" value="" /></div></td></tr>';

Open in new window


Any help is very much appreciated.

Thanks again for your response.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Julian HansenCommented:
This seems to work with the <form> tag uncommented

Your html won't work because it is enclosed in single quotes and inside the string you declare a class attribute with single quotes - which will generate an error. You need to replace the enclosing quotes of the class with double quotes.

Also I still can't work out why you are putting your input inside a <tr><td> - there is no enclosing table and that is just very bad markup - can you elaborate?
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var html = '<tr><td align="right" valign="top"><span class="MyformClass_bold">Year:&nbsp;</span></td><td><div><input type="text" name="test" value="" /></div></td></tr>';
$(function() {
	$('#select').change(function() {
		if ($(this).val() == 2) {
			$('#texts').html(html);
		}
		else {
			$('#texts').html('');
		}
	});
});
</script>
</head>
<body>
<form name="myform">
  <select id="select" size="1" onChange="JavaScript:test();" name ="test">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
    
  <hr/>
  <div id="texts"></div>
</form>
</body>
</html>

Open in new window

0
 
Tpaul_10Author Commented:
Thanks again for your inputs, appreciate it.

I have a long form and I have this select in the middle of the page and have the proper tags enclosed (Please review the code below).

The reason I am putting <tr><td> to display the text box in the place where I need the it (i.e. exactly below my select).

If I am not using the <tr><td>, the text box is populating on top of the page.

Here is the HTML code I have
<table width="900" border="0" cellspacing="1" cellpadding="1" align="center">
<tr>
  		<td align="right" valign="top">
        <span class='MyClass'>
          <input type="text" name="FirstText">
        </span>
      </td>
</tr>  
<tr>
  		<td align="right" valign="top">
        <span class='MyClass'>
          <input type="text" name="SecondText">
        </span>
      </td>
</tr>  
<tr>
  		<td align="right" valign="top">
        <span class='MyClass'>
         <select></select>
        </span>
      </td>
</tr>  
<tr>
  		<td align="right" valign="top">
        <span class='MyClass'>
          <input type="text" name="ThirdText">
        </span>
      </td>
</tr> 
.... 
<tr>
  		<td align="right" valign="top">
        <span class='MyClass'>
         <select>This is the select I am working</select>
        </span>
      </td>
</tr>  
--Populate the text box below this select
..

Other Form fileds
</table>  

Open in new window


Thank you and appreciate your help. Hope I have answered your question
0
 
Tpaul_10Author Commented:
Julian,

Just wanted to let you know that the code from your previous response isn't working -:(
May be the HTML part is messing things up...but I need to have the HTML to have the text box below my select as per my previous code. Any help is very much appreciated.

Thanks and appreciate your help
0
 
Julian HansenCommented:
Ok but here is the problem

1. You are puting your <tr> ... </tr> code inside a <div> which is not correct
2. Your markup you are adding has two columns whereas the code above - each row only has one column

What I would do is this i.e. markup the row and just hide or show it when the relevant value in the select is selected.
Also - your code was using many deprecated features like width / align attributes - I have styled using css so it validates against HTML 5.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var html = '<tr><td><span class="MyformClass_bold">Year:&nbsp;</span></td><td><div><input type="text" name="test" value="" /></div></td></tr>';
$(function() {
  $('#select').change(function() {
    if ($(this).val() == 2) {
      $('#noshow').show();
    }
    else {
      $('#noshow').hide();
    }
  });
});
</script>
<style type="text/css">
table {
  width:900px;
  border: 0;
  border-collapse: collapse;
  text-align: center;
}
td {
  padding: 1px; 
  margin: 1px;
  text-align: right;
  vertical-align: top;
}
#noshow {
  display: none;
}
</style>
</head>
<body>
<form name="myform">
  <table>
    <tr>
        <td>
        <span class='MyClass'>
          <input type="text" name="FirstText">
        </span>
        </td>
    </tr>  
    <tr>
        <td>
        <span class='MyClass'>
          <input type="text" name="SecondText">
        </span>
        </td>
    </tr>  
    <tr>
        <td>
        <span class='MyClass'>
         <select></select>
        </span>
        </td>
    </tr>  
    <tr>
        <td>
        <span class='MyClass'>
          <input type="text" name="ThirdText">
        </span>
        </td>
    </tr> 
    <tr>
        <td>
          <span class='MyClass'>
            <select id="select" size="1" onChange="JavaScript:test();" name ="test">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
          </span>
        </td>
    </tr>
    <tr id="noshow">
      <td>
        <span class="MyformClass_bold">Year:&nbsp;</span> <input type="text" name="test" value="" />
      </td>
    </tr>
  </table>
</form>
</body>
</html>

Open in new window

0
 
Tpaul_10Author Commented:
Julian,

Sincere THANKS to you for taking time and providing me with the code. I have made some changes to match my requirement and it is working as expected.  THANKS again as I have been struggling with this for many days.

I have two questions related to this  ..(please note that this is my first time handling Jquery)
1. You have http://code.jquery.com/jquery.js and is it ok if I save this file and call it in my page instead of the website name?

1. <script src="http://code.jquery.com/jquery.js"></script>

Open in new window


2. I am not sure if this question needs to be asked separately. But please let me know if it needs to be.
How can I call this function on body load...the reason I am asking because If I am editing an already created item where I know the option or value of my select option (which is either 1,2 or 3) and the text box should be visible or displayed in this scenario if the select option is 2.

THANKS again for all your help and appreciate it sincerely.
0
 
Julian HansenCommented:
1. Yes you can use JQuery locally - goto www.jquery.com and you can download the version you would like from there.

2. With JQuery you should do all of your processing on body load. This is done as follows
$(function() {
// ANYTHING DONE HERE WILL ONLY EXECUTE AFTER DOCUMENT HAS LOADED
});

Open in new window

This was already done in the previous post - here is how you would initialise your select on load and process the change event
$(function() {
// INITIALISE OUR SELECT HERE
    setSelect();
// ADD YOUR EVENT HANDLER HERE AS WELL
   $('#select').change(setSelect);
});

function setSelect()
{
    if ($('#select').val() == 2) {
      $('#noshow').show();
    }
    else {
      $('#noshow').hide();
    }
}
</script>

Open in new window

0
 
Tpaul_10Author Commented:
Thank You Julian, appreciate your quick help and I am in the process of making the changes.
I will update you with the details soon.

Thanks again for all your help.
0
 
Julian HansenCommented:
You are welcome - good luck.
0
 
Tpaul_10Author Commented:
Thank You Julian...appreciate all your help and your solution was the very best out of all.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now