Ajax form elements not accessable?

[rad1964]

I have a form, EWMS.php, that is a score sheet for a dart league. In this form I first have a user choose a division. Ajax returns that choice via MySQL database and PHP. Upon choosing a division that also fills in the next drop down choices of team, which again calls Ajax and brings in the teams associated with the division choice. All works good so far. The last call on team choice drop down brings in the players on that team in another drop down which is peppered throughout the form as it is based on these players that are chosen.

The beggining form tag and ending form tag are located in the EWMS.php file while Ajax loads other input elements from the database into the middle of the form.

So now that the form works with these drop downs grabbing MySQL data, I am testing the data the user input by using action="process.php" method="post" in the form tag.

In process.php I have some basic code:

$date=$_POST['date'];
$week=$_POST['week'];
$league=$_POST['league'];
//HOME TEAM
$teamH=$_POST['teamH'];
//VISITING TEAM
$teamV=$_POST['teamV'];

echo "On " . $date . ", week " . $week . ", in the " . strtoupper($league) ." division" . "<br />";
echo "Home Team: ". $teamH . " vs. " . "Visiting Team: ". $teamV ."<br />";

What I get from the proces.php is this:
On 11/16/2011, week 14, in the division
Home Team: vs. Visiting Team:

So while I am getting the date and week (which are located in the main EWMS.php form), but am not getting the division or the home and visiting team names which are located in my ajax calls to findleague.php, findhometeam.php and findvisitingteam.php.

Only what appears in my original form elements: date, week, totalscore hometeam, totalscore visitingteam and the add_a_player fields. All the Ajax calls that bring in the other form elements are not found.

Here is my league code from inside the EWMS.php :

<!--League drop down-->
<div id="league" style="clear:left;">
     <table width="100%" border="1" cellspacing="4" cellpadding="0" style="background-color:#ffffff;">
        <tr>
    		<td width="100" align="center"><strong>Home</strong></td>
    		<td width="250"><div id="" style="float:left;"><select class="select" id="teamH" name="teamH"><option>Choose Team</option></select></div></td>
    		<td width="100" align="center" colspan="3">
            	<select class="select" id="leagueChoice" name="league" onchange="leagueABCD('findleague.php?league='+this.value)">
    				<option>Select your division first</option>
    				<option value="a" id="divisionA">A League</option>
        			<option value="b" id="divisionB">B League</option>
        			<option value="c" id="divisionC">C League</option>
        			<option value="d" id="divisionD">D League</option>
    			</select>            
            </td>
    		<td width="250"><div id="" style="float:left;"><select class="select" id="teamV" name="teamV"><option>Choose Team</option></select></div></td>
    		<td width="100" align="center"><strong>Visitor</strong></td>
  		</tr>
        <tr>
    		<td width="100" align="center"><strong>Player / ID#</strong></td>
            <td width="220" align="center"><strong>Highlights</strong></td>
    		<td width="73" align="center" style="padding:2px;"><strong>W</strong></td>
    		<td width="74" align="center"><strong>Game</strong></td>
    		<td width="73" align="center" style="padding:2px;"><strong>W</strong></td>
            <td width="220" align="center"><strong>Highlights</strong></td>
    		<td width="100" align="center"><strong>Player / ID#</strong></td>
  		</tr>
    </table>
</div>

When a league is chosen it brings in this findleague.php :

<?php 
$league=$_GET['league'];
//echo $league;
include("sparkplug2.php");
$result = mysql_query("SELECT DISTINCT(team) FROM member_data2011spring WHERE division = '$league' ORDER BY team ASC") or die(mysql_error());
$result2 = mysql_query("SELECT DISTINCT(team) FROM member_data2011spring WHERE division = '$league' ORDER BY team ASC") or die(mysql_error());
?>

<div id="league">
	<table width="100%" border="1" cellspacing="4" cellpadding="0" id="myTable2" style="background-color:#ffffff;">
        <tr>
    		<td width="100" align="center"><strong>Home</strong></td>
    		<td width="250">
            <div id="" style="float:left;">
            	<select class="select" id="teamH" name="teamH" onchange="homeTeam('findhomeplayer.php?teamH='+this.value)">
    				<option>Choose Team</option>
					<? while($row=mysql_fetch_array($result)) { ?>
    				<option value="<?=$row['team']?>"><?=$row['team']?></option>
					<? } ?>
				</select>
            </div>
            </td>
    		<td id="leagueChoice" width="100" align="center" colspan="3">
            	<strong><?php echo strtoupper($league); ?> League</strong>
            </td>
    		<td width="250">
            <div id="" style="float:left;">
            	<select class="select" id="teamV" name="teamV" onchange="visitingTeam('findvisitingplayer.php?teamV='+this.value)">
    				<option>Choose Team</option>
					<? while($row=mysql_fetch_array($result2)) { ?>
    				<option value="<?=$row['team']?>"><?=$row['team']?></option>
					<? } ?>
				</select>
            </div>
            </td>
    		<td width="100" align="center"><strong>Visitor</strong></td>
  		</tr>
        <tr>
    		<td width="100" align="center"><strong>Player / ID#</strong></td>
            <td width="220" align="center"><strong>Highlights</strong></td>
    		<td width="73" align="center" style="padding:2px;"><strong>W</strong></td>
    		<td width="74" align="center"><strong>Game</strong></td>
    		<td width="73" align="center" style="padding:2px;"><strong>W</strong></td>
            <td width="220" align="center"><strong>Highlights</strong></td>
    		<td width="100" align="center"><strong>Player / ID#</strong></td>
  		</tr>
    </table>
</div>
	
    <!--PLACEHOLDER FOR HOME TEAMS PLAYERS-->
	<div id="playersHomeTeam" style="float:left; width:370px; border:none;">
    	<table cellpadding="0" cellspacing="0" border="0">
        	<tr>
            	<td>&nbsp;</td>
            </tr>
        </table>
    </div>

    <!--INSERTS 'A LEAGUE' MATCH DATA-->
    <?php require_once($_SERVER['DOCUMENT_ROOT'].'/reports/inc/a_league.php'); ?>
    
    <!--PLACEHOLDER FOR VISITING TEAMS PLAYERS-->
    <div id="playersVisitingTeam" style="float:left; width:370px; border:none;">
    	<table cellpadding="0" cellspacing="0" border="0">
        	<tr>
            	<td>&nbsp;</td>
            </tr>
        </table>
    </div>

Help please.

TIA,
rad1964

[rad1964]

I guess I could explain this in easier terms:

Can a form fields data in which Ajax is used to add additional fields be used export those Ajax fields once a user fills it out?

In my example above I CAN NOT capture that fields data.

HELP

rad1964

[rad1964]

no one? Bueller?

[rad1964]

not one person in this whole forum have an opinion on this problem?
Come on! folks, I thought you were all better then at experts-exchange... :(

[rad1964]

All I need is to export a form field that Ajax pulled in.

[McLaren]

I didn't wathch your code too carefully, but

All I need is to export a form field that Ajax pulled in.

what do you mean by export form field?

Can a form fields data in which Ajax is used to add additional fields be used export those Ajax fields once a user fills it out?

Maybe you mean you want to send additional data when submiting the form using AJAX? If this, then you can use this plugin:

http://jquery.malsup.com/form/

Sorry to see that you have posted a month ago, but the problem is for example I don't sit there everyday, so don't even see. Probably there are many such guys.

[rad1964]

In a nut shell..
I have a form, a user then uses a drop down to make a choice on the form, this choice makes an Ajax call which returns 32 more drop down lists, all filled with the same data choices (people that are on the team chosen). It is these Ajax elements that a user chooses (and are subsequently inserted using Ajax), I can not get to my process.php page to print the choice. I am using the $_POST method.

All other form elements, like date, week, team and add-on player work fine (why they work fine is I think they are in the forms initial rendering and not in an Ajax call insertion).

$date=$_POST['date'];
$week=$_POST['week'];
$league=$_POST['league'];
$playerH1=$_POST['playerH1'];
$playerH2=$_POST['playerH2'];
$playerH3=$_POST['playerH3'];

[McLaren]

ok, show your javasctipt code. I see there only html and PHP

[rad1964]

Here are 2 screenshots, the first is the form with all elements. The second is the results page, very simple.

[IMG]http://radmedia.org/EWMS3.jpg[/IMG]

[IMG]http://radmedia.org/EWMS3_results.jpg[/IMG]

[rad1964]

Here is my typical Ajax call:

//AJAX - Retrieves the players based on the visiting team choice
function visitingTeam(strURL) {         
     var vt = getXMLHTTP(); 
     if (vt) {
      vt.onreadystatechange = function() {
      if (vt.readyState == 4) { 
       if (vt.status == 200) {                   
		 document.getElementById("playersVisitingTeam").innerHTML=vt.responseText;
		 <!--alert(vt.responseText);-->
      }
      else { 
         alert("There was a problem while using XMLHTTP:\n");
      }
     }            
    }        
    vt.open("GET", strURL, true); 
    vt.send(null);
   }
}

[McLaren]

vt.open("GET", strURL, true); 
    vt.send(null);

strURL is the url where you send all the data I guess. You can check in firebug for example and see what data is being sent.

As you said that the data is not being send when fields are generated with AJAX. One thought that comes to my head is - your function does not know about those newly generated fields.

I don't know how to solve this in pure javascript, but with jQuery library you can use .live()

http://api.jquery.com/live/

This is an example from jqueyr page how it does recognize newly added p tag:

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer;
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Click me!</p>

  <span></span>
<script>
$("p").live("click", function(){
  $(this).after("<p>Another paragraph!</p>");
});
</script>

</body>
</html>

if you would not use live('click') and use click instead, then this would not work on newly generated paragraphs.

So if this is the case, I advise you use the jQuery, there is tons of tutorials how to use it. If you don't want, then you must search how to do the same with pure javascript.

Oh, btw

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

use .on method and new jQuery version better :)

[rad1964]

Actually I did not say: "the data is not being sent when fields are generated with AJAX."

What I probably said is this: After the new fields are added with Ajax and the form is COMPLETED by the user, the submit button, which uses a PHP page and $_POST function to retrieve the data I get no user filled data text fields or drop down choices.

When I hard code the first Ajax call into the form aand remove its Ajax function, I get it's data, but I can not do this for all my Ajax calls, hence how do I get the data a user input 'after' all Ajaz calls have been made?

So I read the possible JQuery solution.
I understand all the depreciated tag talk. [Use on()]

So I am confused at accessing and implementing JQUERY. I am a javascript beginner.

<script>
    $("p").live("click", function(){
    $(this).after("<p>Another paragraph!</p>");
    });
</script>

How do I apply the "on()" function to my submit button and then see any results?

Sorry for being so daft. :(

[McLaren]

How do I apply the "on()" function to my submit button and then see any results?

It should work similarly as live:

<script>
    $("p").on("click", function(){
    $(this).after("<p>Another paragraph!</p>");
    });
</script>

Sou you have to itentify your button somehow, for example you could have and id attribute on your button which would be called "buttonID" so then

<script>
    $("#buttonID").on("click", function(){
    alert('test');

    return false; //to prevent default action
    });
</script>

[rad1964]

OK, so after more snooping and reading.. I think the function I need is delegate() which appears also similar to live() and on().

In my drop down that lives in the form before any ajax is called, I call findhometeam.php.

Inside findhometeam.php I have tried two ways to write new data to my existing form, one was using the "$dom = new DOMDocument;" and the other was

<option id="playerH2" value="<?=$row['id']?>"><?=$row['name_first'].' '. $row['name_last'].' / '.$row['id']?></option>

Both ways write to my original form... is there a preferred method to incorporate delegate() either by DOM or PHP generation or will both work under deleate()?

Next question would be: Does delegate() go into the original form or the php page I am calling through Ajax?

Last question is: How do I wrap the delegate function around what I have?

Thanks!

rad1964

[rad1964]

Hold that thought.. as I was creating an EXTREMELY stripped down version of my form to follow only the first ajax call which populates 'teams', I found that I have indeed used $_POST to capture that newly inserted data.

So then I fine-tooth-combed the next call which populates 'players', I found numerous identical IDs which I eliminated and am seeing entire results for not only name/ID but for their highlights as well.

I hope by the time I reform my visiting team to mimic the home team, I will be able to succesfully add back into my form one element at a time and see if it breaks anything (like add-ons first, then final scores)... got my fingers crossed!

Thanks for putting up with my blaring error code :(

[Airshow]

Yes, I think your problems are 99% to do with getting the HTML correct.

As far as I can see jQuery.delegate() is at most a secondary issue. It's only necessary to use jQuery.delegate() if you need to attach javascript behaviour to dynamically inserted elements and even then, there are other approaches.

Airshow

[rad1964]

I did get everything working!
So JQuery was not needed... yet...

I also got the process.php to write to a csv file for now.
I need to have one form that was submitted compared to another form that was submitted and if they are identical THEN write to a database.