• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1331
  • Last Modified:

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,&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 ---










0
IDEASDesign
Asked:
IDEASDesign
  • 3
  • 2
  • 2
1 Solution
 
DiscoNovaCommented:
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.
0
 
Michel PlungjanIT ExpertCommented:
Why not return the states as an array or JSON structure and populate and show the select using normal display manipulation


Much safer
0
 
Michel PlungjanIT ExpertCommented:
Like this:


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


.
.
.

<div id="usa_state_list">
<input type="text" name="state" value="<?php echo $_SESSION[ 'user_officestate' ]; ?>"/>
</div>
<div id="usa_state_drop">
<select name="state" size="1" id="state">
.
.
.
</div>
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
IDEASDesignAuthor 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




0
 
DiscoNovaCommented:
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).
0
 
IDEASDesignAuthor 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>

<?

}

?>


0
 
Michel PlungjanIT ExpertCommented:
Great, sorry I was away from the PC (different timezone than you...)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now