asked on

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

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,  $value</option>";
else
echo "<option value='$key'>$key,  $value</option>";

}
?>
</select>

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

--- SNIP ---

DiscoNova

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 Plungjan

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

Much safer

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

IDEASDesign

ASKER

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

DiscoNova

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).

IDEASDesign

ASKER

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 Plungjan

Great, sorry I was away from the PC (different timezone than you...)