-2

我想要这样，如果人们点击发送按钮，那么应该停止表单的提交。

我的目标是提交消息，但让用户保持在同一页面上。

我的 JS：

$(document).ready(function () {
    $("#kontakt").submit(function () {
        return false;
    });

HTML：

<form id="kontakt" method="post" action="send.php">
    <br>
    <input type="text" name="von" id="von" placeholder="name" />
    <br>
    <input type="text" id="mail" name="mail" placeholder="email" />
    <br>
    <input type="text" id="betreff" id="betreff " placeholder="betreff" />
    <br>
    <textarea style="width:500px;height:400px;" id="nachricht" name="nachricht"></textarea>
    <input id="submit" type="submit" value="senden"></input>
</form>
<div id? "response"></div>

小提琴：http: //jsfiddle.net/gF6wg/

问题是，如果您单击“发送”，表单仍在提交中。

4

4 回答 4

3

您忘记关闭准备好的功能。正确的 JS 应该是这样的：

$(document).ready(function () {
    $("#kontakt").submit(function () {
        return false;
    });
});

您可以使用 Mozilla Firefox错误控制台检查 Javascript 错误（您可以通过按热键ctrl+shift+J在 Firefox 中显示它）

于 2013-09-08T15:45:51.670 回答
2

你错过了)};：

$(document).ready(function () {
    $("#kontakt").submit(function () {
        return false;
    });
)}; // <-- this

你还应该改变这个：

<div id="response"></div>
       ^ '=' instead of '?'

它肯定有效，在这里试试：http: //jsfiddle.net/gF6wg/3/

更新：这是完整页面，只需将其复制到您的 html 文件中：http: //pastebin.com/CRzKgVhk

下面是一些简单的代码，您可以使用 ajax 来提交表单：

$(document).ready(function () {
    $("#kontakt").submit(function () {
        var empty = $(this).find("input[type=text], textarea").filter(function () {
            return $.trim(this.value).length === 0;
        }).length;
        alert(empty);
        if (empty !== 0) {
            $("#response").html("Bitte alles schreiben");
        } else {
            $.post("send.php", $(this).serialize(), function(data){
                $("#response").html(data);
            });
        }
        return false;
    });
});

这是此代码的演示：http: //jsfiddle.net/mrNHy/1/

于 2013-09-08T15:28:00.833 回答
0

工作演示

尝试这个

<form id="kontakt" method="post" action="send.php">
    <br>
    <input type="text" name="von" id="von" placeholder="name" />
    <br>
    <input type="text" id="mail" name="mail" placeholder="email" />
    <br>
    <input type="text" id="betreff" id="betreff " placeholder="betreff" />
    <br>
    <textarea style="width:500px;height:400px;" id="nachricht" name="nachricht"></textarea>
    <input id="submit" type="button" value="senden"></input> <!--change type from 'submit' to 'button'-->
</form>
<div id="response"></div>

代码

 $(document).ready(function () {
$('#submit').click(function()
{
    $.ajax({
        url : 'send.php', 
        type: 'POST',
        data: $('#kontakt').serialize(),
        success : function(response)
        {

        $("#response").html(response);
        } 
    }); 
});

});

在你的 send.php 上添加这个

<?php
  $data=$_POST['serialize'];
   $name=$data['von']; // acceess the data like this
   // do your code


?>
于 2013-09-08T15:43:30.110 回答
0

试试这个： 

<script>
$("#kontakt").submit(function(event) {
 if(!event.cancelable){
  event.cancelable=true;
 }
  event.preventDefault();
  var $form = $(this),
      von = $form.find( 'input[name="von"]' ).val(),
      mail = $form.find( 'input[name="mail"]' ).val(),
      betref = $form.find( 'input[name="betref"]' ).val(),
      url = $form.attr('action');

  /* Send the data using post */
  var posting = $.post( url, { von: von, mail: mail, betref: betref } );

  /* Put the results in a div */
  posting.done(function( data ) {
    $( "#result" ).empty().append( data );
  });
});
</script>
于 2013-09-08T17:01:55.380 回答