Ajax Multiform Posting

Discussion in 'JavaScript' started by buk, Aug 2, 2011.

0
  1. #1
    Hello everybody,
    I have a form and select menus. Number of select menus are dynamic. i want to post it with ajax to the same page. It seems working on the demo below but in demo i post the form to test2.php When i change the test2.php to test.php ajax posts whole page not only the form values. Also there is a random number generator shows that page are reloaded or not.

    http://fcbk.imeee.org/test.php

    test.php
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" media="screen" rel="Stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 $("#submit").click(function(event){
          $.post( 
             "test2.php",
             $("#sorular").serializeArray(),
                 function(data) {
                $('#results').html(data);
             }
          );

      });

}); 
</script> 
</head>

<body>
   <ul class="arkadaslar">
   
        <form name="ss" id="sorular">
        
        <?php for($i = 1; $i <= 4; $i++):?>
               <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="70%" align="left" valign="top"></td>
                    <td width="30%" align="left" valign="top">
                    
                      <label>
                      <select name="soru[]" size="1" id="select">
                        <option>Give point</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                      </select>
                      </label>
                    </td>
                  </tr>
                  
                </table><br /><br /> 
               <?php endfor; ?>   
               <input id="submit" type="button" value="Submit"> 
               </form>

</ul>

    <p><tt id="results">
    
    
    </tt></p>
    
     <?php
     echo rand(5, 15);
     ?>

</body>
</html>
    PHP:

    test2.php
    <?php
    print_r($_POST);
?>
    PHP:
     
    Last edited: Aug 2, 2011
    buk, Aug 2, 2011 IP
  2. astrazone

    astrazone Member

    Messages:
    358
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    33
    #2 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" ="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" media="screen" rel="Stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 $("#submit").click(function(event){
		var soruArr = [];
		$(".select").each(function(){
			soruArr.push($(this).val());
		})
          $.post(
             "test.php",
             {'soru[]': [soruArr]},
                 function(data) {
                $('#results').html(data);
				
             }
          );

      });

}); 
</script> 
</head>

<body>
   <ul class="arkadaslar">
   
        <form name="ss" id="sorular">
        
        <?php for($i = 1; $i <= 4; $i++):?>
               <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="70%" align="left" valign="top"></td>
                    <td width="30%" align="left" valign="top">
                    
                      <label>
                      <select name="soru" size="1" class="select">
                        <option>Give point</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                      </select>
                      </label>
                    </td>
                  </tr>
                  
                </table><br /><br /> 
               <?php endfor; ?>   
               <input id="submit" type="button" value="Submit"> 
               </form>

</ul>

    <p><tt id="results">
    
    
    </tt></p>
    
     <?php
     echo rand(5, 15);
     ?>

</body>
</html>
    PHP:
    <?php
	$select = explode(",",$_POST['soru'][0]);
	echo print_r($select);
?>
    PHP:
    did some changes here and there... I dont know if its the best way to do this but it works for me :)

    good luck
     
    astrazone, Aug 3, 2011 IP