Member Avatar for Red_Rain

Hey guys
New to PHP and programming in general. I am writing my first PHP form to spit out some "instant" answers based on user input. Basically, i want the form choices to change automatically(without page reload) depending on the choices made before it . I do not know AJAX or JS but if anyone is willing to help i would greatly appreciate it! Thanks in advance.


Basically, i will have 2 forms and one will show if $outside isset and the other will show if $inside isset but i do not want the user to have to reload the page. Does this makes sense? Thanks a million for your help.

<?php if($_POST['in_or_out'] == "inside" ) { $inside = $_POST['in_or_out']; } elseif($_POST['in_or_out'] == "outside" ) {$outside = $_POST['in_or_out']; }?>
</head>

<body>
<h4> Please answer the following questions to receive a hardware recommendation or Fill out the contact us form for more complex questions</h4>
<?php if(!isset($_POST["form"])) { ?> 
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']) ?>" method="post" name="form">
<p>Indoor or Outdoor : <select name='in_or_out'><option value=''>Select one</option><option name="inside" <?php if(isset($inside)){echo "selected"; }?> value="inside">Inside</option><option name="outside" <?php if(isset($outside)) {echo "selected" ; } ?>  value="outside">Outside</option>
</select>
</p>
<?php if(isset($outside)) { ?>
<select name="application" >
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
</select>
<?php } elseif(isset($inside)) { ?>
<select name="application" >
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
</select>
<?php } ?> 

<br /> 
<input type="submit" name="submit" value="Submit">
</form>
 
<?php } ?>
</body>
</html>
  • 2 Contributors
  • 3 Replies
  • 139 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Red_Rain
Member Avatar for Shanti C

Hey, You can easily develop this by using simple javascript, See the below example :

<html>
<head>
<script type="text/javascript">
function ShowRemainingForm(id)
{
if(id==0)
{ 
document.getElementById("inside").style.display="block";
document.getElementById("outside").style.display="none";
}
else
{
document.getElementById("outside").style.display="block";
document.getElementById("inside").style.display="none";
}

}
</script>
</head>

<body>
<form action="" method="post" name="form">
<p>Indoor or Outdoor : 
<select name='in_or_out'onchange="ShowRemainingForm(this.value)">
<option value=''>Select one</option>
<option name="inside" value="0">Inside</option>
<option name="outside" value="1">Outside</option>
</select>
</p>
<br>
<div id="inside" style="display: none">
You have selected inside :
<select name="applicationIN" >
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
</select>
</div>
<div id="outside" style="display: none">
You have selected outside :
<select name="application" >
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>

</select>
</div>
<br />
<input type="submit" name="submit" value="Submit">
</body>

You should learn Javascript : http://www.w3schools.com/js/

Thanks,
Shanti.

commented: Yeah js is a must to learn +2
Member Avatar for Red_Rain

Ill teach myself what i can but i thank you for taking the time to write that our custom for me. You are truly a helpful personl. Thank you

Member Avatar for Red_Rain

Hey Shanti,
I executed this code and it works great! The only problem is when i choose "inside" the options for outside still come up. I made sure the div ID was set correctly i just cant figure out wwhy its doing it. Any ideas?

NVM figured it out, forgot to give values of 1 and 0 for inside outside. What if i wanted to do this for multiple pieces of the form?

For instance the next 2 options change dynamically as well. SHould i just make a new function or add to the old one some how? Just looking for tips on best practice i will learn the details as i can.

Edited by Red_Rain because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.