将表格提交为div

时间:2012-10-05 10:44:25

标签: image html

任何人都可以告诉我为什么这不起作用或给我另一种方式来做我想要的。

点击提交时我在页面上有一个表单我想让它处理成add.php,并在一个名为right的DIV中打开它。

表单页面

<script>
$("#Submit").click(function() {

var url = "add.php"; // the script where you handle the form input.

$.ajax({
       type: "POST",
       url: url,
       data: $("#myForm").serialize(), // serializes the form's elements.
       success: function(html){ $("#right").html(html); }
     });

return false; // avoid to execute the actual submit of the form.
});
</script>
</head>
<body>
<form action="add.php" method="post" enctype="multipart/form-data" id ="myForm">
 Name: <input type="text" name="name"><br> 
 E-mail: <input type="text" name = "email"><br> 
 Phone: <input type="text" name = "phone"><br> 
Photo: <input type="file" name="photo"><br>
<input type="submit" value="Upload">

</form>

</body>

现在,如果我添加动作到表单,将其指向add.php一切正常,所以其他脚本还可以,但是当我这样做时,没有任何反应,它不会像我一样将add.php加载到'正确'的div中想要它。

有人有任何建议吗?

3 个答案:

答案 0 :(得分:0)

您的$(“#Submit”)选择器与任何内容都不匹配(提交按钮没有id并且在该绑定尝试之后定义),因此该函数不会绑定到任何事件,因此从不执行。

相反,表单按其应有的方式运行:提交后,将其内容发布到“action”属性中指定的url。这就是发生的事情,div从未触及过。

你必须回过头来了解jquery选择器是如何工作的。如何将函数绑定到事件。

答案 1 :(得分:0)

这是您的确切代码吗?有几个问题:

  • $("#Submit").click应该准备好包装好 处理程序,因此它在页面实际加载之前不会运行。
  • 没有匹配#Submit
  • 的按钮
  • 没有匹配#right
  • 的div

尝试

<script type="text/javascript">

jQuery(document).ready(function($) {

$("#Submit").click(function() {

var url = "add.php"; // the script where you handle the form input.

$.ajax({
       type: "POST",
       url: url,
       data: $("#myForm").serialize(), // serializes the form's elements.
       success: function(html){ $("#right").html(html); }
     });

return false; // avoid to execute the actual submit of the form.
});
});
</script>
</head>
<body>
<div id="right">
</div>

<form action="add.php" method="post" enctype="multipart/form-data" id ="myForm">
 Name: <input type="text" name="name"><br>
 E-mail: <input type="text" name = "email"><br>
 Phone: <input type="text" name = "phone"><br>
Photo: <input type="file" name="photo"><br>
<input type="submit" value="Upload" id="Submit">

</form>

<script type="text/javascript"> jQuery(document).ready(function($) { $("#Submit").click(function() { var url = "add.php"; // the script where you handle the form input. $.ajax({ type: "POST", url: url, data: $("#myForm").serialize(), // serializes the form's elements. success: function(html){ $("#right").html(html); } }); return false; // avoid to execute the actual submit of the form. }); }); </script> </head> <body> <div id="right"> </div> <form action="add.php" method="post" enctype="multipart/form-data" id ="myForm"> Name: <input type="text" name="name"><br> E-mail: <input type="text" name = "email"><br> Phone: <input type="text" name = "phone"><br> Photo: <input type="file" name="photo"><br> <input type="submit" value="Upload" id="Submit"> </form>

答案 2 :(得分:0)

你必须在body标签的div上创建哪个id是正确的

<input id="submit" type="submit" name="upload" >

在body标签中添加新div,如下所示

<div id="right"></div>