Me again with the Javascript question

  • Thread starter Thread starter Anonymous
  • Start date Start date
A

Anonymous

Guest
Hi there,
You would have seen my previous post .
Here, I have another question. I have a select box. Depending upon the value of the select box, I want either a text box or another select box to be viewed (but on the same row of the table, one instead of another).

Is there a way? I was thinking of the visible property.. but I do not want to use it as it defeats my purpose in putting 2 kinds of form elements (text or select) on the same place on the same row based on the value of the third select box element.

Here, I do not want the page to reload. This way, I retain the values of the form. Any ideas, please?

Thanks.
Amy.
 
if you want it without a page reload the visible property is your only option. But do note that you will have to load all possible outcomes for each selection of the first select box and so on. This meaning your page size may be large.
 
in the case that you have you need to post/get parameters to the page and then print the form accordingly

eg..

Code: 
if ($_POST['form'] == 1)  {
  echo $form1;
} else {
  echo $form2;
}
 
Thanks for your suggestions.

How do we know which form element has been visible when the page is submitted to another page. Depending on what value I select in the select box, either a text box or another select box becomes visible. So, I can consider only one of those values in the next page. Validations also follow.
Please suggest.

Ruturajv - could you ellaborate on your idea? Here, again, we submit the form right. It is not dynamic.

Thank you.
Amy.
 
amycrystal123 said:
How do we know which form element has been visible when the page is submitted to another page. Depending on what value I select in the select box, either a text box or another select box becomes visible. So, I can consider only one of those values in the next page. Validations also follow.
Click to expand...

Use the value of the select box (the same one which determines which element is showe) to determine, er, which element was shown.
 
Hi guys,
I found a way to my solution. I thought to let you know about it also. I have solved the problem by use of DHTML. I have <div id="myid">assigned to the cell where I would like to have the select box or the text box based on the onChange event of another select box.

On the onChange event of the other select box, I call a Javascript function, which based on the value of that selected item, sets the inner HTML value of the div id to either text box or select box. Please see the code below:
**********************************************************
<html>
<head>
<script language="Javascript">
function onCheck()
{
var choice = document.newForm.inputFieldType.options.selectedIndex;
if (choice == 0)
document.getElementById('myid').innerHTML = "<input type='text' name='myText' value='Type TextValue' onFocus=\"this.select()\">";
else
document.getElementById('myid').innerHTML = "<select name='mySelectBox'><option value=1>Choice1</option><option value=2>Choice2</option><option value=3>Choice3</option></select>";
}
</script>
<title>Test Form</title>
</head>

<body>

<h2>Please input the following values..</h2>
<form name = "newForm" action="TestFormInput.php" method="post">
<table>
<tr>
<td>Select Type Of Form Element:</td>
<td>
<select name="inputFieldType" onChange="return onCheck();">
<option value="Text Box" >Text Box</option>
<option value="Select Box" >Select Box</option>
</select>
</td>
</tr>

<tr>
<td>Selected Item:</td>
<td><div id="myid">
<?php
if (isset($_POST[myText]))
print "<input type='text' name='myText' value=Text box selected' onFocus=\"this.select()\">";
else if (isset($_POST[mySelectBox]))
print "<select name='mySelectBox'><option value=1>choice1</option><option value=2>choice2</option><option value=3>choice3</option></select>";
else
print print "<select name='mySelectBox'><option value=1>choice1</option><option value=2>choice2</option><option value=3>choice3</option></select>";

?>
</div></td>
</tr>

<tr><td colspan="2" align="center"><input type="submit" name="submit" value="Submit"></td></tr>
</table>
</form>
</body>
</html>
**********************************************************

Thanks for all your help !
 
You must log in or register to reply here.
Back
Top