1. 首页
  2. 问答
  3. 两种形式和按钮引导阿贾克斯

两种形式和按钮引导阿贾克斯

2017-04-01 17 views
0

我有我的网页有问题。它在HTML，Bootstrap和PHP中。两种形式和按钮引导阿贾克斯

我在HTML页面两种形式。首先是接触的形式，另一种是在一个模式，这就是分布形式。

的问题是在分配表单中的数据，因为当我按一下按钮，它发送的联系方式，而不是分配形式。

这是代码。

分配形式：

<div class="col-lg-12 animated slideInUp"> 
     <form name="sentMessage" action="contact_me.php" id="contactForm2" novalidate> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="form-group"> 
         <input type="text" class="form-control" placeholder="NOMBRE *" id="name" required data-validation-required-message="Por favor introduce tu nombre."> 
         <p class="help-block text-danger"></p> 
        </div> 
        <div class="form-group"> 
         <input type="email" class="form-control" placeholder="EMAIL *" id="email" required data-validation-required-message="Por favor introduce tu E-mail."> 
         <p class="help-block text-danger"></p> 
        </div> 
        <div class="form-group"> 
         <input type="tel" class="form-control" placeholder="TELEFONO *" id="phone" required data-validation-required-message="Por favor introduce tu numero de Telefono."> 
         <p class="help-block text-danger"></p> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="form-group"> 
         <textarea class="form-control" style="height:135px;" placeholder="TU MENSAJE *" id="message" required data-validation-required-message="Por favor introduce tu mensaje."></textarea> 
         <p class="help-block text-danger"></p> 
        </div> 
       </div> 
       <div class="clearfix"></div> 
       <div class="col-lg-12 text-center"> 
        <div id="success"></div> 
        <button type="submit" class="btn btn-primary">UNIRME AL EQUIPO</button> 
       </div> 
      </div> 
     </form> 
    </div> 
</div>

联系方式：

<div class="col-lg-12"> 
    <form name="sentMessage" action="contact_me.php" id="contactForm" novalidate> 
     <div class="row"> 
      <div class="col-md-6"> 
       <div class="form-group"> 
        <input type="text" class="form-control" placeholder="NOMBRE *" id="name" required data-validation-required-message="Por favor introduce tu nombre."> 
        <p class="help-block text-danger"></p> 
       </div> 
       <div class="form-group"> 
        <input type="email" class="form-control" placeholder="EMAIL *" id="email" required data-validation-required-message="Por favor introduce tu E-mail."> 
        <p class="help-block text-danger"></p> 
       </div> 
       <div class="form-group"> 
        <input type="tel" class="form-control" placeholder="TELEFONO *" id="phone" required data-validation-required-message="Por favor introduce tu numero de Telefono."> 
        <p class="help-block text-danger"></p> 
       </div> 
      </div> 
      <div class="col-md-6"> 
       <div class="form-group"> 
        <textarea class="form-control" placeholder="TU MENSAJE *" id="message" required data-validation-required-message="Por favor introduce tu mensaje."></textarea> 
        <p class="help-block text-danger"></p> 
       </div> 
      </div> 
      <div class="clearfix"></div> 
      <div class="col-lg-12 text-center"> 
       <div id="success"></div> 
       <button type="submit" class="btn btn-primary">Enviar Mensaje</button> 
      </div> 
     </div> 
    </form> 
</div>

的JavaScript contact_me：

$(function() { 

    $("input,textarea").jqBootstrapValidation({ 
     preventSubmit: true, 
     submitError: function($form, event, errors) { 
      // additional error messages or events 
     }, 
     submitSuccess: function($form, event) { 
      event.preventDefault(); // prevent default submit behaviour 
      // get values from FORM 
      var name = $("input#name").val(); 
      var email = $("input#email").val(); 
      var phone = $("input#phone").val(); 
      var message = $("textarea#message").val(); 
      var firstName = name; // For Success/Failure Message 
      // Check for white space in name for Success/Fail message 
      if (firstName.indexOf(' ') >= 0) { 
       firstName = name.split(' ').slice(0, -1).join(' '); 
      } 
      $.ajax({ 
       url: "../contact_me.php", 
       type: "POST", 
       data: { 
        name: name, 
        phone: phone, 
        email: email, 
        message: message 
       }, 
       cache: false, 
       success: function() { 
        // Success message 
        $('#success').html("<div class='alert alert-success'>"); 
        $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
         .append("</button>"); 
        $('#success > .alert-success') 
         .append("<strong>Tu mensaje ha sido enviado. </strong>"); 
        $('#success > .alert-success') 
         .append('</div>'); 

        //clear all fields 
        $('#contactForm').trigger("reset"); 
       }, 
       error: function() { 
        // Fail message 
        $('#success').html("<div class='alert alert-danger'>"); 
        $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
         .append("</button>"); 
        $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"); 
        $('#success > .alert-danger').append('</div>'); 
        //clear all fields 
        $('#contactForm').trigger("reset"); 
       }, 
      }) 
     }, 
     filter: function() { 
      return $(this).is(":visible"); 
     }, 
    }); 

    $("a[data-toggle=\"tab\"]").click(function(e) { 
     e.preventDefault(); 
     $(this).tab("show"); 
    }); 
});

来源

2017-04-01 Manuel Alejandro Pop

回答

0

，因为你已经在这两种形式得到了相同的ID名称问题引起。它保持ID名称独特的每一页（如问题的原则和良好做法）是非常重要的，但如果你不这样做，jQuery的抓住第一个匹配的ID - 这就是为什么只能从第一种形式的输入被提交。

我建议改变第二种形式的ID，以NAME_1，EMAIL_1，PHONE_1和MESSAGE_1（以使其唯一），然后在脚本中替换：

// get values from FORM 
var name = $("input#name").val(); 
var email = $("input#email").val(); 
var phone = $("input#phone").val(); 
var message = $("textarea#message").val();

有了：

// Determine which form is being submitted 
var form_0 = $form.attr('id') === 'contactForm2' ? true : false; 

// If it's the first form, assign the values from that form, 
// otherwise assign the values from the second form 
var name = form_0 ? $('#name').val() : $('#name_1').val(); 
var email = form_0 ? $('#email').val() : $('#email_1').val(); 
var phone = form_0 ? $('#phone').val() : $('#phone_1').val(); 
var message = form_0 ? $('#message').val() : $('#message_1').val();

然后以适当的形式提交正确的值。

希望这会有所帮助。

如果你不熟悉，在上面的代码中的“三元”运营商 - 他们只是方便的快捷方式，如果{}否则{}语句 - 退房：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

来源

2017-04-01 20:13:43 RickL

相关问题

 相关问题