两个表格一次提交

时间:2014-07-24 18:30:05

标签: javascript jquery parse-platform

我正在创建目标网页,我有两个单独的表单来提交电子邮件地址,我使用Parse来存储它们。

问题我在第一个表单上提交了一个电子邮件地址,它创建了两个对象 - 一个在表单中有电子邮件地址,第二个是空白。当我以第二种形式提交电子邮件地址时,它会按预期提交一个对象,一个电子邮件地址。

由此,我只能得出结论,当我提交第一张表格时,第二张表格会同时提交。

这是我在控制台中获得的内容:

 Subscribe                                           Parse.js:39

                                                     Parse.js:48

 Notify Me                                           Parse.js:7

 test@test.com                                       Parse.js:16

 New object created with objectId: FodANtALX8        Parse.js:21

 New object created with objectId: hLYyCNVSaW        Parse.js:53

以下是代码:

$(document).ready(function() {

$(".input-group-btn").click(function() {
    console.log("Notify Me");

    var Address = $(".form-control").val();

    var Email = Parse.Object.extend("Email");
    var email = new Email();

    email.set("Address", Address);

    console.log(Address);

    email.save(null, {
        success: function(email) {
            // Execute any logic that should take place after the object is saved.
            console.log('New object created with objectId: ' + email.id);

        },
        error: function(email, error) {
            // Execute any logic that should take place if the save fails.
            // error is a Parse.Error with an error code and description.
            alert('Could not accept email address: ' + error.message);
        }
    });

});


$(".btn-wide").click(function() {
    console.log("Buy");
});

$(".btn-primary").click(function() {
    console.log("Subscribe");

    var Address = $(".subinput").val();

    var Email = Parse.Object.extend("Email");
    var email = new Email();

    email.set("Address", Address);

    console.log(Address);

    email.save(null, {
        success: function(email) {
            // Execute any logic that should take place after the object is saved.
            console.log('New object created with objectId: ' + email.id);
            $('.subinput').val("");
        },
        error: function(email, error) {
            // Execute any logic that should take place if the save fails.
            // error is a Parse.Error with an error code and description.
            alert('Could not accept email address: ' + error.message);
        }
    });

});

});

是HTML的相应部分:

<form>
      <div class="input-group">
           <input type="text" class="form-control" placeholder="person@gmail.com">
           <span class="input-group-btn">
           <button class="btn btn-primary" type="button">Notify Me</button>
           </span>
      </div>
</form>


<form>
     <div class="col-sm-8">
         <input type="text" class="subinput" placeholder="Enter your email for updates" spellcheck="false">
      </div>
      <div class="col-sm-4">
          <button class="btn btn-large btn-primary" type="submit">
              Subscribe now
           </button>
      </div>
</form>

1 个答案:

答案 0 :(得分:1)

Subscribe函数中,您要求jquery查找btn-primary这两个按钮共享的css类。为您的按钮添加一个唯一的ID,并让jquery查找,以避免再次出现此问题。