Jump to content

using a form spread across two pages using ajax


wright67uk

Recommended Posts

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?>">

Link to comment
Share on other sites

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> 

Link to comment
Share on other sites

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> 

Link to comment
Share on other sites

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;).

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by BagoZonde
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.