We help IT Professionals succeed at work.

Dynamically inserted SELECT dropdown box (done via ajax) not being recognized in FORM

IDEASDesign
IDEASDesign asked
on
1,347 Views
Last Modified: 2013-12-07
I'm dealing with an annoyance right now with a web form that is not recognizing a SELECT dropdown box that I'm dynamically writing into a form using ajax.    

When the form is displayed initially, when the user chooses "United States" from the "Countries" dropdown box, .. the "State" text input box that's below it is replaced with a SELECT dropdown box containing all US states.  Any other selections made from the Countries dropdown box turn the "State" field back into a text input box.  (This is pretty much the jist of the ajax functionality).

The problem is, .. in Firefox, ... the "State" field isn't being recognized as part of the form.  I know this because the required field checking I have in place nags about it.  I've of course considered getting rid of the required field checking for the State field.  However, ... then I would then be unable to modify the value for that field when needed.  

Everything works fine in IE6 and IE7.  The problem seems to only be happening in Firefox, .. though I haven't yet tried it in any browsers.  

Regretably, I don't have any links or examples to share.  I was hoping that someone might be able to explain why this oddity is occurring, however, and suggest some revisions that would make the problem go away.  Below is the relevant code.  Thanks in advance.

- Yvan

--- SNIP ---

PHP CODE:

echo "
<ajax-response>
      <response type=\"element\" id=\"usa_state_list\">";


      if( $country == "USA" )
      {
                  echo '<select name="state" size="1" id="state">';

                              foreach( $state_list as $key => $value )
                              {

                                    if( $key == "$state" )
                                          echo "<option value='$key' selected='$key'>$key, $value</option>";
                                    else
                                          echo "<option value='$key'>$key,  $value</option>";

                              }
                  echo '</select>';
      }
      else {
            echo "<input type='text' name='state' value='$state'/>";
      }


echo "
      </response>
</ajax-response>";

---------------------------------------

HTML CODE:


<select name="country" size="1" id="country" onchange='if( doceditform.country.value == String("USA") ){ updateStateList("USA"); } else { updateStateList(""); }'>
<?php
foreach( $country_list as $key => $value )
{

if( $key == $_SESSION[ 'user_officecountry' ] )
echo "<option value='$key' selected='$key'>$key,&nbsp;&nbsp;$value</option>";
else
echo "<option value='$key'>$key,&nbsp;&nbsp;$value</option>";

}
?>
</select>

<div id="usa_state_list">
<input type="text" name="state" value="<?php echo $_SESSION[ 'user_officestate' ]; ?>"/>
</div>

--- SNIP ---










Comment
Watch Question

You're not exactly showing how exactly are you "replacing the element", but I'd make sure that I set the new element's owner into the corresponding form (better yet, this is handled automatically when the item is correctly brought as part of the DOM-tree. Since you're telling it works on IE (which actually doesn't tell much of how well it is really working) I'm guessing you're doing something like replacing some element's innerHTML with the new content instead of DOM manipulation, which might or might not work - depending on the phase of the moon and a couple of other things that have even less to do with the actual problem than the moon.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Why not return the states as an array or JSON structure and populate and show the select using normal display manipulation


Much safer
IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Mplungjan - this is a very interesting possible solution (thank you).  However, ..  when you have 2 form fields in a form that have the same name , .. simply hiding and showing one instead of the other doesn't allow for a proper value assignment.  In fact, it seems that the last form field in the form is the one that always has precedence, visible or not.

Do you have any suggestions as to how I might remedy this?

Thanks,
- Yvan




I'd suggest having them with a different name, and on the server side, accepting only the value from the "field that *should* be visible" to be handled. Of course, most likely, what happens here is that the browser happily send both of the fields to the server, and there only the last one is accepted.

You could also try to set the hidden element's disabled-property to true. At least by the standard, such elements should not be transmitted (of course, if you show the element again, you need to set the disabled-property back to false, or otherwise it won't be editable).

Author

Commented:
Thanks again for you help.  I adapted your example and ended up with something that will work just fine for me. Here's what I ended up with:

- Yvan


--- SNIP ---


<? if (isset($_POST['submit'])) {

if ($_POST['whichfield'] == "USA") {

echo $_POST['state1'];

} else {

echo $_POST['state2'];

}

}

else {

?>

<form name="doceditform" id="doceditform" method="POST">

Country: <select name="country" size="1" id="country"
onchange='if( doceditform.country.value == String("USA") ){ document.getElementById("usa_state_list").style.display="none";document.getElementById("usa_state_drop").style.display="";doceditform.whichfield.value = "USA"; } else { document.getElementById("usa_state_list").style.display="";document.getElementById("usa_state_drop").style.display="none";;doceditform.whichfield.value = "OTHER";} '>

<option value="USA">USA</option>
<option value="Other">Some Other Country</option>

</select>

<br><br>

<div id="usa_state_drop">

State: <select name="state1" id="state1">

<option value="NH">NH</option>
<option value="FL">FL</option>
<option value="TX">TX</option>

</select>

</div>

<div id="usa_state_list" style="display:none;">

State: <input type="text" name="state2" id="state2" value="" />

</div>

<br><br>

<i>Hidden:</i> <input type="text" name="whichfield" value="USA">

<br><br>

<input type="submit" name="submit">

</form>

<?

}

?>


Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Great, sorry I was away from the PC (different timezone than you...)
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.