Question

我的客户希望在表单成功提交并在其上更改文本时，提交按钮变为橙色绿色。我的表单使用php和它有点复杂到我使它工作。请有人帮助我完成有趣的任务。

以下是您可以看到表格和大橙色按钮的页面示例 http://makeme3d.kz/time/time.html

这是我的代码

HTML

    <div class="container form">
       <div class="row">
 <form form name="sentMessage" class="well" id="contactForm" novalidate >

 <h2 align="center">Get Free Quote Today and Start Saving</h2>
        <div class="col-md-6 left">

  <div class="control-group ">
    <label class="control-label">Full name</label>
    <div class="controls">
    <input type="text" class="form-control"  id="name" placeholder="Full name" 
            required  data-validation-required-message="Please enter your name" />
            <p class="help-block"></p>
 </div>
  </div>
  <div class="control-group">
<div class="controls">
    <label class="control-label">Business name</label>
    <input type="text" class="form-control" id="bname"  placeholder="Business name"
    required data-validation-required-message="Please enter your Business name" />
 </div>
  </div>
 </div>
<div class="col-md-6 right">
<div class="control-group">
<div class="controls">
    <label class="control-label">Email address</label>
    <input type="email" class="form-control" id="email"  placeholder="Email"
    required data-validation-required-message="Please enter your Email" />
    <p class="help-block"></p>
  </div>
 </div>
  <div class="control-group">
<div class="controls">
    <label class="control-label">Best contact phone number</label>
    <input type="phone" class="form-control" id="phone" placeholder="Phone"
     required data-validation-required-message="Please enter your Phone number" />
  </div>
</div>

</div>
<div class="row">
<div class="col-md-12">
<div class="btn-submit" align="center"> 
<button type="submit" class="btn-custom btn-lg">Click Here to Start Saving</button>
</div>
</div>
</div>
</form>
<div id="success"></div>



    </div>

    </div>




<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script src="./js/jqBootstrapValidation.js"></script>
    <script src="./js/contact_me.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="./js/bootstrap.js"></script>


  </body>
</html>

JS

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



 $("input,textarea, select").not("[type=submit]").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 bname = $("input#bname").val();
           var email = $("input#email").val();
           var phone = $("input#phone").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: "./bin/contact_me.php",
                type: "POST",
                data: {name: name, bname: bname, email: email, phone: phone},
                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>Your message has been sent. </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('');
  });

PHP

<?php
// check if fields passed are empty
if(empty($_POST['name'])        ||
   empty($_POST['email'])       ||
    empty($_POST['bname'])      ||
   empty($_POST['phone'])   ||
   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
   {
    echo "No arguments Provided!";
    return false ;
   }

$name = $_POST['name'];
$bname = $_POST['bname'];
$email_address = $_POST['email'];
$phone = $_POST['phone'];

// create email body and send it    
$to = 'me@mail.com'; // put your email
$email_subject = "Contact form submitted by:  $name";
$email_body = "You have received a new message. \n\n".
                  "Here are the details:\n \nName: $name \n  \nBusiness name: $bname \n \nPhone: $phone \n  \nEmail: $email_address\n\n".

$headers = "From: TimeClockWizardSpecialOffering\n";
$headers .= "Reply-To: $email"; 
mail($to,$email_subject,$email_body,$headers);
return true;            
?>

Answer 1

您正在运行ajax功能。

将以下JS添加到成功函数中：

$(".btn-custom").css("background-color","green");
$(".btn-custom").val("New Text");

显然可以根据需要更改这些内容。

当成功提交表单时，如何使提交按钮更改颜色和文本

1 个答案: