2014-01-26 43 views
0

我使用一种通过AJAX将POST方法的数据发送到php文件的表单。一切都很好,我可以在它的id div名称的html表格中看到结果。但是现在这个同样的表格以相同的方法包含输入字段(第二种形式)。所有的ID和名称都不同,我可以看到 alert($(“input [name = id]”).val());';
我错过了什么吗?没有数据发布在表单中

<html> 

<head> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

</head> 

<body> 


    <form name="ajaxform" id="ajaxform" action="edit.php" method="POST"> 

    <select name="user" id="simple-post" onchange="this.value.submit()"> 
    <option value="">Select a person:</option> 

<option value="0">John</option> 
    <option value="1">Peter</option> 
<option value="1">Heinrich</option>  

    </select> 
    </form> 

    <div id="simple-msg"> 
    </div> 



<script> 

$(document).ready(function() 
{ 



$("#simple-post").click(function() 
{ 

$("#ajaxform").submit(function(e) 

{ 

    $("#simple-msg").html("<img src='loading.gif'/>"); 

    var postData = $(this).serializeArray(); 

    var formURL = $(this).attr("action"); 

    $.ajax(

    { 

     url : formURL, 

     type: "POST", 

     data : postData, 

     success:function(data, textStatus, jqXHR) 

     { 

      $("#simple-msg").html('<pre><code class="prettyprint">'+data+'</code></pre>'); 


     }, 
     error: function(jqXHR, textStatus, errorThrown) 

     { 

      $("#simple-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>'); 

     } 

    }); 

    e.preventDefault(); //STOP default action 

    e.unbind(); 
}); 


$("#ajaxform").submit(); //SUBMIT FORM 

}); 


}); 

</script> 

</body> 

现在edit.php页

<?php 

$json_a=json_decode(json_encode($_POST),true); 
$output=array(); 
$i=0; 
foreach ($json_a as $key => $value){ 
    echo $key . ':' . $value; // peut-être branché! 
    $output[$i]= $value; 
    $i++; 
} 

$array_user=array(); 
$array_user[0]=$output[0]; 
$array_user[1] ="Yes"; 
$array_user[2] ="mypass"; 

echo '<form name="ajaxform1" id="ajaxform1" action="SQL_user.php" method="POST"> 
';  

echo '<input type="text" name="id" size="3" value="' .$array_user[0]. '"/>'; 
echo '<input type="text" name="online" size="3" value="' .$array_user[1]. '"/>'; 
echo '<input type="text" name="password" size="20" value="' .$array_user[2]. '"/>'; 
echo '<input type="button" id="simple-post1" value="Apply" />';  

echo '</form>'; 


echo '<br>'; 
echo'<div id ="simple-msg1">'; 
echo'</div>'; 




echo '<script> 

$(document).ready(function() 
{ 



$("#simple-post1").click(function() 
{ 

$("#ajaxform1").submit(function(e) 

{ 

    $("#simple-msg1").html("<img src='."'loading.gif'".'/>"); 

    var postData = $(this).serializeArray(); 

    var formURL = $(this).attr("action"); 

    $.ajax(

    { 

     url : formURL, 

     type: "POST", 

     data : postData, 

     success:function(data, textStatus, jqXHR) 

     { 

      $("#simple-msg1").html('."'<pre><code class=".'"prettyprint"'.">'+data+'</code></pre>'); 


     }, 
     error: function(jqXHR, textStatus, errorThrown)".'" 

     { 

      $("#simple-msg1").html('."'<pre><code class=".'"prettyprint">AJAX Request Failed<br/> textStatus='."'+textStatus+', errorThrown='+errorThrown+'</code></pre>'); 

     } 

    }); 

    e.preventDefault(); 
    e.unbind(); 

}); 


".'$("#ajaxform1").submit(); 
}); 


}); 

</script>'; 

?> 

第二种形式不工作...

+0

我只看到一个表单,或者在第一个ajax调用之后动态地添加表单,那是'data'中的内容吗? –

+0

另一种形式几乎是相同的(在另一个PHP页面)由第一个 – Kris88

回答

0

你把下面的代码,如果有id=simple-post元素被点击运行。通知,.submit嵌套在.click

$(document).ready(function() { 
    $("#simple-post").click(function() { 
     $("#ajaxform").submit(function(e){ 
     //code to execute on submit action goes here 
     } 

     $("#ajaxform").submit(); //SUBMIT FORM 
    }); 
}); 

所以事件处理程序的形式提交将只注册后id=simple-post元素被点击是,AJAX请求没有发生&形式被正常提交的原因。

您是不是要找下列内容:

$(document).ready(function() { 
    $("#ajaxform").submit(function (e) { 
     $("#simple-msg").html("<img src='loading.gif'/>"); 
     var postData = $(this).serializeArray(); 
     var formURL = $(this).attr("action"); 
     $.ajax({ 
      url: formURL, 
      type: "POST", 
      data: postData, 
      success: function (data, textStatus, jqXHR) { 
       $("#simple-msg").html('<pre><code 
class="prettyprint">' + data + '</code></pre>'); 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       $("#simple-msg").html('<pre><code class="prettyprint">AJAX  Request Failed<br/> textStatus=' + textStatus + ', errorThrown=' + errorThrown + '</code></pre>'); 
      } 
     }); 
     e.preventDefault(); //STOP default action 
     e.unbind(); 
    }); 
    $("#simple-post").click(function() { 
     $("#ajaxform").submit(); //SUBMIT FORM 
    }); 

}); 

上面的代码将设置事件处理程序的形式提交$(document).ready。表格将在以下时间通过ajax/xhr提交:

  1. 提交按钮表单被按下。
  2. id=simple-post的元素被点击。(Run Code按钮)

这是你打算做什么?

+0

的行动调用的id简单帖子是按钮,但这个id名称和其他形式是不同的第二种形式。但是你说得对,我认为事件处理者留在第一位。我怎样才能切换到第二位。这件事很奇怪,除了数据... ...所有的作品... – Kris88

+0

所以你的问题是什么?我无法理解你在问什么。所以如果可以解释,也许使用可能很酷的示例和实时代码。 – CuriousMind

+0

Hi Gaurish。我可以在zip文件中发送短代码吗? – Kris88