javascript - 一页上有两个 bootstrap php-js 表单

Question

A 在一个页面上有两个表单，由 this tutorial on github 创建。一个是网站页面的一部分，另一个是模态窗口中

如何使其独立工作，现​​在我按下窗口中的提交按钮，它可以在两者中工作

HTML

<div class="container">	
 <!-- Contacts -->
    <div class="contacts" id="contacts">
      <div class="container">
        <div class="row">
          <div class="col-xs-6">
            <h1>order a call</h1>
            <form id="contactForm">
              <div class="form-group">
                <input type="text" class="form-control" id="name" placeholder="name" required data-validation-required-message="name" />
                <p class="help-block"></p>
              </div>
              <div class="form-group">
                <input type="email" class="form-control" id="email" placeholder="email" required data-validation-required-message=" email" />
              </div>
              <div class="form-group">
                <input type="tel" class="form-control" id="tel" placeholder="tel" required data-validation-required-message="tel" />
              </div>
              <div id="success"> </div> <!-- For success/fail messages -->
              <button type="submit" class="btn btn-yellow btn-block">button1</button>
            </form>
          </div>
        </div>  
      </div>
    </div>

</div>
 <br />

<div class="container">
    <button class="btn btn-yellow btn-block" type="button" data-toggle="modal" data-target="#myModal" >button2 (modal)</button>
</div>

     <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h2 class="modal-title text-center" id="myModalLabel">order</h2>
            <p class="text-center">please leave your contact details</p>
          </div>
          <div class="modal-body text-center">
            <form >
              <div class="form-group">
                <input type="text" class="form-control" required="true" id="InputName" placeholder="InputName">
              </div>
              <div class="form-group">
                <input type="tel" class="form-control" required="true" id="InputTel" placeholder="InputTel">
              </div>
              <div id="success"> </div> <!-- For success/fail messages -->
              <button type="submit_modal" class="btn btn-yellow" id="submit_modal">go</button>
            </form>
          </div>
        </div>
      </div>
    </div>	
	

PHP

<?php
// check if fields passed are empty
if(empty($_POST['name'])  		||
   empty($_POST['email']) 		||
   empty($_POST['tel'])	||
   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
   {
	echo "No arguments Provided!";
	return false;
   }
	
$name = $_POST['name'];
$email_address = $_POST['email'];
$tel = $_POST['tel'];
	
// create email body and send it	
$to = 'info@myemail.com'; // put your email
$email_subject = "Contact form submitted by:  $name";
$email_body = "request from website. \n\n".
				  "name: $name \n ".
				  "Email: $email_address\n tel: $tel";
$headers = "From: info@myemail.com\n";
$headers .= "Reply-To: $email_address";	
mail($to,$email_subject,$email_body,$headers);
return true;			
?>

JS

/*
  Jquery Validation using jqBootstrapValidation
   example is taken from jqBootstrapValidation docs 
  */
$(function() {

 $("input,textarea").jqBootstrapValidation(
    {
     preventSubmit: true,
     submitError: function($form, event, errors) {
      // something to have when submit produces an error ?
      // Not decided if I need it yet
     },
      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 tel = $("input#tel").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: "/zvonoq/test4/bin/contact_me.php",
            	type: "POST",
            	data: {name: name, email: email, tel: tel},
            	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>Ваш запрос отправлен. </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...</strong> Could you please email me directly to <a href='mailto:me@example.com?Subject=Message_Me from myprogrammingblog.com'>me@example.com</a> ? Sorry for the inconvenience!");
             	  $('#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");
    });
});
 

/*When clicking on Full hide fail/success boxes */ 
$('#name').focus(function() {
     $('#success').html('');
  });

也已连接

Answer 1

如果您想单独提交每个表单，可以尝试这个..

首先给出不同的id每个表格...

<form id='id1'> .. </form> ..

并使用button instead of submit 。并在按钮单击事件上调用 javascript 函数来提交表单。 <input type='button' onclick='return submitForm('id1')'></button>

并在页面底部创建一个 JavaScript 函数

<script type='text/javascript'>
function submitForm(id)
{
     document.getElementById(id).submit();
}
</script>

这样你就会有two forms with two different ids and two buttons ... 如果需要任何进一步的帮助，请告诉我。