Form Dropdown Resets onsubmit

[melbahtoast]

Hi everyone,

 

Newbie here, curious to know what's going on with my script/form. Everything seems to be working perfectly except for my state dropdown/list. If the user does not enter a valid e-mail address, the form gives an alert message that is toggled in a div above the form, however the state drop down is then reset to "AL" the first of choices. The page does not "refresh" so I'm not really sure what's going on here. I tried a set selected value and a not set value but nothing changed. Code:

 

Form:

<form action="<?= $_SERVER['PHP_SELF'] ?>" method="post" onsubmit="toggle_visibility('formalert');">
<strong>Business Name</strong><br>
<input type="text" name="business_name" value="<?php if(isset($_POST['submit'])){echo $business_name;} ?>" /><br>
<?php if(isset($_POST['submit'])){echo $errbn;} ?><br>


<strong>Address</strong><br>
<input type="text" name="address" value="<?php if(isset($_POST['submit'])){echo $address;} ?>" /><br>
<?php if(isset($_POST['submit'])){echo $errad;} ?><br>


<strong>Suite/Apt #</strong><br>
<input type="text" name="suite" value="<?php if(isset($_POST['submit'])){echo $suite;} ?>" /><br>
<?php if(isset($_POST['submit'])){echo $errsu;} ?><br>

<strong>City</strong><br>
<input type="text" name="city" value="<?php if(isset($_POST['submit'])){echo $city;} ?>" /><br>
<?php if(isset($_POST['submit'])){echo $errci;} ?><br>


<strong>State</strong><br>
<select name="state" id="select">
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select><br><?php if(isset($_POST['submit'])){echo $errst;} ?>
</div>

<div class="span4">
<strong>Zip Code</strong><br>
<input type="text" name="zip" value="<?php if(isset($_POST['submit'])){echo $zip;} ?>" /><br>
<?php if(isset($_POST['submit'])){echo $errzi;} ?><br>


<strong>Phone Number</strong><br>
<input type="text" name="phone" value="<?php if(isset($_POST['submit'])){echo $phone;} ?>" /><br>
<?php if(isset($_POST['submit'])){echo $errph;} ?><br>

<strong>Web Site</strong><br>
<input type="text" name="web_site" value="<?php if(isset($_POST['submit'])){echo $web_site;} ?>" />
<br>
<?php if(isset($_POST['submit'])){echo $errwe;} ?><br>

<strong>E-Mail</strong><br>
<input type="text" name="email" value="<?php if(isset($_POST['submit'])){echo $email;} ?>" /><br>
<?php if(isset($_POST['submit'])){echo $erre;} ?><br>

<strong>Pay Pal Transaction ID</strong><br>
<input type="text" name="pay_pal" value="<?php if(isset($_POST['submit'])){echo $pay_pal;} ?>" /><br>
<?php if(isset($_POST['submit'])){echo $errpa;} ?><br>


<input type="submit" name="submit" value="Submit" />

</form>

 

Script:

<div id="formalert">
<?php
if(isset($_POST['submit'])){
$business_name=$_POST['business_name'];
$address=$_POST['address'];
$suite=$_POST['suite'];
$city=$_POST['city'];
$state=$_POST['state'];
$zip=$_POST['zip'];
$phone=$_POST['phone'];
$web_site=$_POST['web_site'];
$email=$_POST['email'];
$pay_pal=$_POST['pay_pal'];


$to="myemail@domain.com";
$re="Scan Order";
$headers = "From: $email\r\n";
$msg = "$business_name, \r\n $address, \r\n $suite, \r\n $city, \r\n $state, \r\n $zip, \r\n $phone, \r\n $web_site, \r\n $email, \r\n $pay_pal";

if(!$business_name){
$errbn="Please enter a business name.";
}else if(!$address){
$errad="Please enter an address.";
}else if(!$city){
$errci="Please enter a city.";
}else if(!$state){
$errst="Please enter a state.";
}else if(!$zip){
$errzi="Please enter a zip code";
}else if(!$phone){
$errph="Please enter a phone number";
}else if(!$web_site){
$errwe="Please enter a web site";
}else if(!$email){
$erre="Please enter an email.";
}else if(!$pay_pal){
$errpa="Please enter a Pay Pal Transaction ID";
}else{
$email = trim($email);
$_ename = "/^[-!#$%&\'*+\\.\/0-9=?A-Z^_'{|}~]+";
$_host = "([0-9A-Z]+\.)+";
$_tlds = "([0-9A-Z]){2,4}$/i";

if ( !preg_match($_ename."@".$_host.$_tlds,$email)){
echo "<div class=\"alert alert-error\"> Sorry the e-mail address you entered is not valid. Please enter a valid one</div>";
}else{
mail($to, $re, $msg, $headers);
echo "<div class=\"alert alert-success\"> Success! Your form has been sent!</div>";
}
}
}
?></div>

 

Script that calls togglediv:

<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>

 

I also tried adding/removing the error message after state but doesn't seem to help. Punch around on here and G and can't seem to find anything to point me in the right direction.

 

Thanks in advance,

Mel

[Psycho]

If the page is not reloading then this is a Javascript problem - not PHP. Moving to appropriate forum.

 

EDIT: Looking closer at your code - it IS being posted. That is why the select list is being reset.

Edited January 20, 2013 by Psycho

[PFMaBiSmAd]

The page is actually being redisplayed after the form is submitted, but because it's the same content, it might appear like it isn't.

 

To make the selected option 'sticky', you need to output the selected attribute inside the correct <option > tag.

 

The easiest way would be to dynamically produce the list of options, by making a php array of the values, iterate over the array, and output the selected attribute when the submitted value matches the current option tag being output.

[melbahtoast]

Thanks for the info! Here's what I have.

 

Script:

<?php
function dynamic($option,$value,$type)
{
if($type=='checkbox' && @in_array($value,$option)) { echo ' CHECKED'; return; }
if($option==$value)
{
 if($type=='option') { echo ' SELECTED'; }
 if($type=='radio') { echo ' CHECKED'; }
}
}
?>

 

Dropdown:

<select name="state" class="textfield" id="select">
<option value="AL"<?php dynamic(@$state,'AL','option'); ?>>AL</option>
<option value="AK"<?php dynamic(@$state,'AK','option'); ?>>AK</option>
<option value="AZ"<?php dynamic(@$state,'AZ','option'); ?>>AZ</option>
<option value="AR"<?php dynamic(@$state,'AR','option'); ?>>AR</option>
<option value="CA"<?php dynamic(@$state,'CA','option'); ?>>CA</option>
<option value="CO"<?php dynamic(@$state,'CO','option'); ?>>CO</option>
<option value="CT"<?php dynamic(@$state,'CT','option'); ?>>CT</option>
<option value="DE"<?php dynamic(@$state,'DE','option'); ?>>DE</option>
<option value="DC"<?php dynamic(@$state,'DC','option'); ?>>DC</option>
<option value="FL"<?php dynamic(@$state,'FL','option'); ?>>FL</option>
<option value="GA"<?php dynamic(@$state,'GA','option'); ?>>GA</option>
<option value="HI"<?php dynamic(@$state,'HI','option'); ?>>HI</option>
<option value="ID"<?php dynamic(@$state,'ID','option'); ?>>ID</option>
<option value="IL"<?php dynamic(@$state,'IL','option'); ?>>IL</option>
<option value="IN"<?php dynamic(@$state,'IN','option'); ?>>IN</option>
<option value="IA"<?php dynamic(@$state,'IA','option'); ?>>IA</option>
<option value="KS"<?php dynamic(@$state,'KS','option'); ?>>KS</option>
<option value="KY"<?php dynamic(@$state,'KY','option'); ?>>KY</option>
<option value="LA"<?php dynamic(@$state,'LA','option'); ?>>LA</option>
<option value="ME"<?php dynamic(@$state,'ME','option'); ?>>ME</option>
<option value="MD"<?php dynamic(@$state,'MD','option'); ?>>MD</option>
<option value="MA"<?php dynamic(@$state,'MA','option'); ?>>MA</option>
<option value="MI"<?php dynamic(@$state,'MI','option'); ?>>MI</option>
<option value="MN"<?php dynamic(@$state,'MN','option'); ?>>MN</option>
<option value="MS"<?php dynamic(@$state,'MS','option'); ?>>MS</option>
<option value="MO"<?php dynamic(@$state,'MO','option'); ?>>MO</option>
<option value="MT"<?php dynamic(@$state,'MT','option'); ?>>MT</option>
<option value="NE"<?php dynamic(@$state,'NE','option'); ?>>NE</option>
<option value="NV"<?php dynamic(@$state,'NV','option'); ?>>NV</option>
<option value="NH"<?php dynamic(@$state,'NH','option'); ?>>NH</option>
<option value="NJ"<?php dynamic(@$state,'NJ','option'); ?>>NJ</option>
<option value="NM"<?php dynamic(@$state,'NM','option'); ?>>NM</option>
<option value="NY"<?php dynamic(@$state,'NY','option'); ?>>NY</option>
<option value="NC"<?php dynamic(@$state,'NC','option'); ?>>NC</option>
<option value="ND"<?php dynamic(@$state,'ND','option'); ?>>ND</option>
<option value="OH"<?php dynamic(@$state,'OH','option'); ?>>OH</option>
<option value="OK"<?php dynamic(@$state,'OK','option'); ?>>OK</option>
<option value="OR"<?php dynamic(@$state,'OR','option'); ?>>OR</option>
<option value="PA"<?php dynamic(@$state,'PA','option'); ?>>PA</option>
<option value="RI"<?php dynamic(@$state,'RI','option'); ?>>RI</option>
<option value="SC"<?php dynamic(@$state,'SC','option'); ?>>SC</option>
<option value="SD"<?php dynamic(@$state,'SD','option'); ?>>SD</option>
<option value="TN"<?php dynamic(@$state,'TN','option'); ?>>TN</option>
<option value="TX"<?php dynamic(@$state,'TX','option'); ?>>TX</option>
<option value="UT"<?php dynamic(@$state,'UT','option'); ?>>UT</option>
<option value="VT"<?php dynamic(@$state,'VT','option'); ?>>VT</option>
<option value="VA"<?php dynamic(@$state,'VA','option'); ?>>VA</option>
<option value="WA"<?php dynamic(@$state,'WA','option'); ?>>WA</option>
<option value="WV"<?php dynamic(@$state,'WV','option'); ?>>WV</option>
<option value="WI"<?php dynamic(@$state,'WI','option'); ?>>WI</option>
<option value="WY"<?php dynamic(@$state,'WY','option'); ?>>WY</option>
</select><br><div class="fielderror"><?php if(isset($_POST['submit'])){echo $errst;} ?></div>

 

Works perfectly!

[PFMaBiSmAd]

That code is kind of painful (for php to execute as well.) Each @ error suppressor you have in your code causes the statement it is on to take 2-3 times longer to run, even when there isn't an error being produced (php made this faster in php5.4, but it still takes extra time just because the @ is in your code and you have a lot of them.) You are also repeating each state value three times in each line and you have hard coded all the lines.

 

The following has no need for any @ error suppressors and has no repetition of code/data -

 

<?php

$states = array('AL','AK','AZ','AR', ... complete list of the states);

$state = isset($state) ? $state : ''; // set to an empty default value if not set in the main code above due to the form submission
$option_list = ''; // build list in a variable for output later in the html document
foreach($states as $option){
   $selected = $state == $option ? ' selected': '';
   $option_list .= "<option value='$option'$selected>$option</option>\n";
}
?>

<select name="state" class="textfield" id="select">
<?php echo $option_list; ?>
</select>

[Psycho]

Plus, you can combine PFMaBiSmAd's suggestion with a function as you tried to do. That makes it reusable

 

function createOptions($optionList, $selectedValue==false)
{
   $optionsHTML = '';
   foreach($optionList as $value)
   {
    $selected = ($value == $selectedValue) ? ' selected="selected"' : '';
    $optionsHTML .= "<option value='{$value}'{$selected}>{$value}</option>\n";
   }
   return $optionsHTML;
}


$statesList = array('AL','AK','AZ','AR', ... complete list of the states);

$state = isset($state) ? $state : ''; // set to an empty default value if not set in the main code above due to the form submission
$stateOptions = createOptions($statesList, $state);
?>

<select name="state" class="textfield" id="select">
<?php echo $stateOptions; ?>
</select>