1

次のようなフォームがあります。

 <form accept-charset="UTF-8" action="{{ path("fos_user_resetting_send_email") }}" method="post">
     <div class="field">
          <label for="username">Email:</label>
          <input class="text" id="passwordEmail" name="username" required="required" size="30" type="text">
          <div class="field-meta">Put in your email, and we send you instructions for changing your password.</div>
     </div>

     <div class="field">
          <input id="submitPasswordRequest" class="full-width button" name="commit" tabindex="3" type="submit" value="Get Password">
     </div>

     <div class="field center">
          <a href="#" onclick='togglePasswordForm(); return false;' class="password_link extra_form_link">Nevermind, I Remembered</a>
     </div>

私はAJAX経由で投稿しようとしているので、次のような簡単なテストを行いました:

  $("#submitPasswordRequest").click(function() {
       var username = $('#passwordEmail').value();
       console.log(username);

       /*
       $.ajax({
           type: "POST",
           url: "/resetting/send-email",
           data: { username: username}, // serializes the form's elements.
           success: function( data ) {
               console.log(data); // show response from the php script.
           }
       });
       */

       return false;
  });

ただし、クリック機能がトリガーされていないようで、通常のフォームアクションを介してフォームを投稿します。ここで何が間違っていますか？これをAJAX経由で処理したい。

4

5 に答える 5

2

jQuery のpreventDefault()メソッドを使用します。また、value()する必要がありますval()。

$("#submitPasswordRequest").click(function (e) {
    e.preventDefault();
    var username = $('#passwordEmail').val();

    ...

});

完全なコード: http://jsfiddle.net/HXfwK/1/

フォームのsubmitイベントをリッスンすることもできます:

$("form").submit(function (e) {
    e.preventDefault();
    var username = $('#passwordEmail').val();

    ...

});

完全なコード: http://jsfiddle.net/HXfwK/2/

于 2013-05-21T02:55:30.823 に答える
2

ボタンをクリックすると、フォームをバックエンドに送信するだけです。この動作をオーバーライドするsubmitには、フォームのアクションをオーバーライドする必要があります。古いスタイル:

<form onsubmit="javascript: return false;">

新しいスタイル：

$('form').submit(function() { return false; });

そして、送信時に ajax クエリを実行したい:

$('form').submit(function() {
    $.ajax({  }); // here we perform ajax query
    return false; // we don't want our form to be submitted
});
于 2013-05-21T02:53:59.260 に答える
1

クリック ハンドラーではなく、フォームのsubmitハンドラーを使用する必要があります。このような：

$("#formID").submit(function() {

    // ajax stuff here...

    return false;
});

HTML で、formIDフォーム要素に ID を追加します。

<form id="formID" accept-charset="UTF-8" action="{{ path("fos_user_resetting_send_email") }}" method="post">
于 2013-05-21T02:55:48.587 に答える
1

フォームが送信されてページが更新されないようにしてから、AJAX コードを実行する必要があります。

$('form').on('submit',function(e){
    e.preventDefault();

   $.ajax({
       type: "POST",
       url: "/resetting/send-email",
       data: $('form').serialize(), // serializes the form's elements.
       success: function( data ) {
           console.log(data); // show response from the php script.
       }
   });

    return false;
});
于 2013-05-21T02:57:01.433 に答える
1

jqueryとajax

$('form id goes here).submit(function(e){
e.preventDefault();

var assign_variable_name_to_field = $("#field_id").val();
...

if(assign_variable_name_to_field =="")
{
handle error here
}

(don't forget to handle errors also in the server side with php)

after everyting is good then here comes ajax

datastring = $("form_id").serialize();

$.ajax({
type:'post',
url:'url_of_your_php_file'
data: datastring,
datatype:'json',
...
success: function(msg){
if(msg.error==true)
{
show errors from server side without refreshing page
alert(msg.message)
//this will alert error message from php
}
else
{
show success message or redirect
alert(msg.message);
//this will alert success message from php
}

})

});

phpページで

$variable = $_POST['field_name']; //don't use field_id if the field_id is different than field name

...

then use server side validation
if(!$variable)
{
$data['error']= true;
$data['message'] = "this field is required...blah";
echo json_encode($data);
}
else
{
after everything is good
do any crud or email sending 
and then
$data['error'] = "false";
$data['message'] = "thank you ....blah";
echo json_encode($data);
}
于 2013-05-21T02:52:04.490 に答える