Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
BOOK: Professional Ajax ISBN: 978-0-471-77778-6
This is the forum to discuss the Wrox book Professional Ajax by Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett; ISBN: 9780471777786
Important: For the new 2nd edition of this book, please post here instead: [url="http://p2p.wrox.com/forum.asp?FORUM_ID=307"]http://p2p.wrox.com/forum.asp?FORUM_ID=307[/url]
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Professional Ajax ISBN: 978-0-471-77778-6 section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old July 10th, 2006, 03:23 AM
Registered User
 
Join Date: Jul 2006
Location: bayonne, new jersey, USA.
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via Yahoo to amorphic8
Default passing array from combo box thru ajax

I have created a form that uses PHP and MySQL.
Using unobtrusive JavaScript, I have re-assigned the form's submit button to a JavaScript function that packages the POST request to my PHP script to enter values into a database asynchronously and returns false to prevent the PHP script from being accessed the usual way.

The form contains a multiple select box, and the problem is that only the first selection gets entered into the database. When I allow the form to be processed the usual way (sans-Ajax) all of the selected values of the multiple select box array get entered (which is what I want).

The select box option value pairs are generated dynamically, so I have abbreviated that part from the code below:


Code:
<form id="add_team_members" name="add_team_members" method="post" action="scripts/add_team_members_to_event.php">
                <label for="team_member_id">Select Team Members:</label><br />
                <select name="team_members[]" id="team_members[]" multiple="multiple" size="5">


                    <option value="1">Team member 1 name</option>
                    <option value="2">Team member 2 name</option>


</select><br />
                <input type="submit" value="add team member(s) " name="submit_team_members" id="submit_team_members" />
                <input name="button" type="button" value="skip this step " />
                <input name="s2_event_id" id="s2_event_id" type="hidden" value="" />
            </form>


The JavaScript function I am using to grab control of the form is:
Code:
function grab_add_team_members_form(){
    oAdd_team_members_form = document.getElementById('add_team_members');
    oAdd_team_members_form.onsubmit = function(){
        add_team_members('add_team_members');
        return false;
    }
}
When I comment (or remove) the 'return false' line, the request is submitted both via the add_team_member function and the default method; the result is that the first item in the select box is entered twice and the others once each. I believe this is becuase the Ajax request only sees the first value, while the default method gets the whole array.

The JavaScript function that handles the processing is:
Code:
function add_team_members(sFormName){
    var oTeam_form=document.getElementById(sFormName);
    var sBody=postRequestBody(oTeam_form);
    oTeam_XMLHttp = create_XMLHttp();
    var oStep_2_feedback=document.getElementById("step_2_feedback");
    if(oTeam_XMLHttp){
        oTeam_XMLHttp.open('post', oTeam_form.action, true);
        oTeam_XMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    //alert(sBody);
    oTeam_XMLHttp.onreadystatechange = function(){
        if(oTeam_XMLHttp.readyState==4){
            if(oTeam_XMLHttp.status==200){
                oStep_2_feedback.innerHTML=oTeam_XMLHttp.responseText;
            }
            else{
                oStep_2_feedback.innerHTML="An error occured: "+oXMLHttp.statusText;
            }
        }
    };
    oTeam_XMLHttp.send(sBody);
}
I bet this looks familiar, huh?

The request body is being generated using the iterative URIencode function getRequestBody from the book page 42. I have used it verbatim, so no need to reproduce here. For other POST requests (not involving a combo box) this works fine.

I think that the problem is that when the value of the select combo box gets URI encoded, it is no longer treated as an array (although, I am not sure), so when it is passed to the PHP script that generates the INSERT query, only one value is present.

Here is what my PHP code for generating the query and INSERTing the data looks like (although I don't suspect this is the problem, as I said it seems to work fine when sent the request directly from the form via the non-Ajax default method).

Code:
$aTeam_members=$_POST['team_members'];//this is where the combo box array is supposed to be
$iTeam_members=sizeof($aTeam_members);
$event_id= $_POST['s2_event_id'];

    $sInsert_team_members = "INSERT into events_team_members (team_member_id, event_id) VALUES"; 
    for($i=0;$i<$iTeam_members; $i++){
        $team_member_id=$aTeam_members[$i];
            $sInsert_team_members.="('$team_member_id','$event_id')";
            if($i<($iTeam_members -1)){
                $sInsert_team_members.=", ";
            }
    }

    $oConn=mysql_connect($hostname_ra_admin, $username_ra_admin, $password_ra_admin);
    @mysql_select_db($database_ra_admin) or $sStatus = "Holy #&@*$!! That didn't work!!";
    if($oResult = mysql_query($sInsert_team_members)){
        $sStatus.="Success!<br />";
        $sStatus .=$sInsert_team_members."<br />";
        $sStatus .=$iTeam_members;
    }
    else{
        $sStatus .= "Close, but no cigar, seƱor!";
        $sStatus .=$sInsert_team_members;
    }

mysql_close($oConn);


echo $sStatus;
Well, there it is. My entire weekend of code. Hope there is someone out there who can help me get the combo multiple select box array to find it's way into my database via Ajax.

The list of options is very small (between 10-15 options), so I suppose a work-around would be a series of checkboxes or something, but multiple select is a much cooler way to handle it, don't you think?

Anyone with some insight on this care to shine a light for me?

rich


Similar Threads
Thread Thread Starter Forum Replies Last Post
Combo box to display items from parent combo box Gini Visual Studio 2008 0 June 18th, 2008 12:30 AM
Combo box choice creating filtered combo box stevensj5 Access 11 September 13th, 2007 11:33 AM
passing variables through a combo box ozPATT Access VBA 3 January 13th, 2006 09:21 AM
Passing php array values to javascript array gkrishna Pro PHP 0 November 6th, 2004 03:20 AM
filling a combo box using an array tware VB Databases Basics 0 September 21st, 2004 08:40 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.