Solved

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

Posted on 2014-04-10
13
146 Views
Last Modified: 2014-04-21
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
Comment
Question by:Tpaul_10
  • 6
  • 6
13 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
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
 
LVL 51

Expert Comment

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

Author Comment

by:Tpaul_10
Comment Utility
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
 
LVL 51

Expert Comment

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

Author Comment

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

Author Comment

by:Tpaul_10
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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
 

Author Comment

by:Tpaul_10
Comment Utility
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
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
Comment Utility
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
 

Author Comment

by:Tpaul_10
Comment Utility
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
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You are welcome - good luck.
0
 

Author Closing Comment

by:Tpaul_10
Comment Utility
Thank You Julian...appreciate all your help and your solution was the very best out of all.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

763 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