using a form spread across two pages using ajax

[wright67uk]

I have a page (below) that has half of a form and I'm using ajax to display the second half of the form (which contains php input) , everything appears fine however, when I submit the form I'm only sending the forms first half!

 

I'm not too familiar with ajax, and when i Google for info about my issue, all I find is info about two stage forms (which this is not).

 

I've also tried moving my submit button around a bit but to no avail. I need to keep the physical layout of my page, however im open to suggestions.

 

For the time being im using action="<?php echo $_SERVER['PHP_SELF']; and a get method, purely so that i can observe which parameters are being passed to the url.

 

my original page:

<?php
$user_id = 7;
#connection
$connect_solning = mysql_connect($hostname_connect, $username_connect, $password_connect) or trigger_error(mysql_error(),E_USER_ERROR);
@mysql_select_db($database_connect) or die (mysql_error());
$sql = "SELECT location FROM snag_score_cards WHERE user_id = $user_id";
$result = mysql_query($sql);
$selected_id = isset($_POST['location']) ? intval($_POST['location']) : false;
$who = '';
$options = '';
while ($row=mysql_fetch_array($result)) { if($selected_id==$row['location'])
{
$selected = ' selected="selected"'; } else { $selected = ''; }
$options .= "<option value=\"{$row['location']}\"{$selected}>{$row['location']}</option>\n";
}
?>


<div id="formright">
<form name="form" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label class="dateof" style="margin-left:10px;"> <a href="new_snag_scorecard.php">create new scorecard</a></label><br/><br/>
<label class="dateof" style="margin-left:10px; "> Select a Scorecard: </label><br />
<select name="location" style="margin-left:10px; width:200px; " onchange="showUser(this.value)"><br />
<option value="">Select a Scorecard:</option><?php echo $options ?></select><br /><br />
<label class="dateof" style="margin-left:10px;"> Date of Score: </label><br />
<input type="date" name="date" id="date" style="border:1px solid #EBEBEB; padding:0px; margin:0px; height:20px; margin-left:10px; " value=" " /><br />


<?php
$result = mysql_query("SELECT * FROM Competitions");
$num_rows = mysql_num_rows($result);
if ($num_rows >0)
{
$selected_id = isset($_POST['Competition']) ? intval($_POST['Competition']) : false;
$who = '';
$options2 = '';
while ($row=mysql_fetch_array($result)) { if($selected_id==$row['Competition'])
{
$selected = ' selected="selected"'; } else { $selected = ''; }
$options2 .= "<option value=\"{$row['Competition']}\"{$selected}>{$row['Competition']}</option>\n";
}
echo ' <br/><label class="dateof" style="margin-left:10px;" >Select a Competition: </label><br/>
<select class="selectstyle" name="competition" >
<option class="optionstyle" value="">Select a Competition</option> ' .
$options2 . '</select><br/><br/>'
;}



?>

<input type="submit" name="submit" value="submit" id="submit"/>
</div><div id="formwrap">
<div id="txtHint">
<!-- ajax loads get_snag_score.php here -->
</div>
</div>
</form>

 

 

I'm using Ajax to show the below on my page...

<?php
// Sanitize input
function sanitize($in) {
return addslashes(htmlspecialchars(strip_tags(trim($in))));
}
$q = sanitize($_GET['q']);


echo '<Br/><h2 class="location">' . $q . "</h2>" ;
#connection here


$connect_solning = mysql_connect($hostname_connect, $username_connect, $password_connect) or trigger_error(mysql_error(),E_USER_ERROR);
@mysql_select_db($database_connect) or die (mysql_error());
$sql = "SELECT par1, par2, par3 FROM snag_score_cards WHERE location = '$q'";
$result = mysql_query($sql);


while($row = mysql_fetch_array($result))
{
$par1 = sanitize($row['par1']); $par2 = sanitize($row['par2']); $par3 = sanitize($row['par3']);
}
?>

<input type="hidden" name="processForm" value="1" />
<input type="text" autocomplete="off" name="Scores" id="Scores" value="Score" class="clip" readonly style="border:0px" >
<input type="text" autocomplete="off" name="Par" id="Pars" value="Par" class="clip" readonly style="border:0px" >
<input type="text" name="Par Score" id="ParScore" value="Total" class="clip" readonly style="border:0px" ><br>


<input type="text" autocomplete="off" name="sum1" id="hole1A" value="" onchange="calc(this.value,'hole1B','hole1result')" >
<input type="text" autocomplete="off" name="sum2" readonly value="<?php echo $par1;?>" id="hole1B" onchange="calc(this.value,'hole1A','hole1result')" >
<input type="text" name="sum" value="" id="hole1result" readonly style="readonly"> <br>


<input type="text" autocomplete="off" name="sum1" id="hole2A" value="" onchange="calc(this.value,'hole2B','hole2result')" >
<input type="text" autocomplete="off" name="sum2" readonly value="<?php echo $par2;?>" id="hole2B" onchange="calc(this.value,'hole2A','hole2result')" >
<input type="text" name="sum2T" value="" id="hole2result" readonly style="readonly"> <br>


<input type="text" autocomplete="off" name="sum1" id="hole3A" value="" onchange="calc(this.value,'hole3B','hole3result')" >
<input type="text" autocomplete="off" name="sum2" readonly value="<?php echo $par3;?>" id="hole3B" onchange="calc(this.value,'hole3A','hole3result')" >
<input type="text" name="sum3" value="" id="hole3result" > <br>


<input type="hidden" name="location" value="<?php echo $q?>">

[BagoZonde]

Where your code invoke AJAX to execute second script? For such things I'm using for example jQuery Form Plugin because I can upload files with that but there are few different methods explained on net.

Edited January 18, 2013 by BagoZonde

[wright67uk]

I'm using this in the head of the original page;

 

<script>
function showUser(str)
{
if (str=="")
 {
 document.getElementById("txtHint").innerHTML="";
 return;
 } 
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
   document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
   }
 }
xmlhttp.open("GET","get_snag_score.php?q="+str,true);
xmlhttp.send();
}
</script> 

[wright67uk]

I'm using this in the head of the original page;

 

<script>
function showUser(str)
{
if (str=="")
 {
 document.getElementById("txtHint").innerHTML="";
 return;
 } 
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
   document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
   }
 }
xmlhttp.open("GET","get_snag_score.php?q="+str,true);
xmlhttp.send();
}
</script> 

[BagoZonde]

Just use:

 

<input type="submit" name="submit" value="submit" id="submit"/>
<span id="txtHint"></span>
...

 

instead of:

 

<input type="submit" name="submit" value="submit" id="submit"/>
</div><div id="formwrap">
<div id="txtHint">
...

 

So div#formwrap and all that stuff is no needed anymore. You can set styles for your span to display in div way as well (display: block;).

[wright67uk]

Ok thankyou.

 

I'm still not getting any form parameters from the Ajax page.

[BagoZonde]

I put your code on my server then just move div#formwrap under input[type=submit] button, change it to span (it's not necessary at all) and it works! Of course I'm not using connection to database (I've just put there some array to read). I hope your script is connecting with database in ajax script (so it must have login and password too). And there's one more thing: use unique input names or just use "sum1[]" instead of "sum1" and "sum2[]" instead of "sum2" because that inputs are repeating few times in ajax form (ids are different but it's no matter for $_GET) so one value will overwrite another one.

[wright67uk]

Thankyou and ive taken on board the whole span thing, and yes it works just as well! - thankyou.

 

Ive now run the code through firebug and ive realised what the problem is.... (although I dont have a solution)...

 

 

The file that im calling via ajax (get_snag_score.php) has an open form... however for some reason the form self closes...

 

my code:

...
<input type="hidden" name="location" value="<?php echo $q?>">
<!--don't end form 1-->
<p>text text text</P>
<br />
</span>

 

firebug shows;

...
<input type="hidden" name="location" value="<?php echo $q?>">
<!--don't end form 1-->
<p>text text text</P>
<br />
</form>
</span>

 

If i can force this file not to close the form, then im pretty sure everything will work fine... any ideas?

[BagoZonde]

In your ajax script do not open or close any form. You don't need it. Inputs are inserting to form into #txtHint. And my firebug shows me that all inputs are included in one form, even that ajaxed of course. I'm still confused what you're asking about. I put your code on my server and selected option. AJAX read next inputs properly. So then I submit that form and in main php file where first part of form is located, I just print_r($_GET) so it's working exactly what you're asking about?!

 

For 100% clarity that's a part of main code where submit button is located:

 

<input type="submit" name="submit" value="submit" id="submit"/>
<div id="txtHint"></div>
</form>

 

And as I told you before, look for inputs' names as there are some inputs with that same name.

Edited January 20, 2013 by BagoZonde

[wright67uk]

I was indeed opening the form in my Ajax script, I've moved the form opening tag to the main file and yes as you said everything works fine now. Thankyou for your help.