?
Solved

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

Posted on 2007-10-08
7
Medium Priority
?
1,329 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 ---










0
Comment
Question by:IDEASDesign
  • 3
  • 2
  • 2
7 Comments
 
LVL 7

Expert Comment

by:DiscoNova
ID: 20034558
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20034605
Why not return the states as an array or JSON structure and populate and show the select using normal display manipulation


Much safer
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 20034715
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:IDEASDesign
ID: 20036538
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
 
LVL 7

Expert Comment

by:DiscoNova
ID: 20036589
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
 

Author Comment

by:IDEASDesign
ID: 20036648
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20039266
Great, sorry I was away from the PC (different timezone than you...)
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
This holiday season, we’re giving away the gift of knowledge—tech knowledge, that is. Keep reading to see what hacks, tips, and trends we have wrapped and waiting for you under the tree.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Suggested Courses
Course of the Month14 days, 19 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question