javascript - How can I make a submit button change color and text when form succesfully submitted -
my clients wants submit button turns green insted of orange when form succesfully submitted , change text on it. form use php , bit complex me make work. please me intresting task.
here sample of page can see form , big orange button.
http://makeme3d.kz/time/time.html
and here code
html
<div class="container form"> <div class="row"> <form form name="sentmessage" class="well" id="contactform" novalidate > <h2 align="center">get free quote today , 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 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 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 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 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 start saving</button> </div> </div> </div> </form> <div id="success"></div> </div> </div> <!-- jquery (necessary 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 compiled plugins (below), or include individual files needed --> <script src="./js/bootstrap.js"></script> </body> </html> js
/* jquery validation using jqbootstrapvalidation example taken jqbootstrapvalidation docs */ $(function() { $("input,textarea, select").not("[type=submit]").jqbootstrapvalidation( { preventsubmit: true, submiterror: function($form, event, errors) { // have when submit produces error ? // not decided if need yet }, submitsuccess: function($form, event) { event.preventdefault(); // prevent default submit behaviour // values form var name = $("input#name").val(); var bname = $("input#bname").val(); var email = $("input#email").val(); var phone = $("input#phone").val(); var firstname = name; // success/failure message // check white space in name 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'>×") .append( "</button>"); $('#success > .alert-success') .append("<strong>your message has been sent. </strong>"); $('#success > .alert-success') .append('</div>'); //clear 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'>×") .append( "</button>"); $('#success > .alert-danger').append("<strong>sorry "+firstname+" seems mail server not responding...</strong> please email me directly <a href='mailto:me@example.com?subject=message_me myprogrammingblog.com'>me@example.com</a> ? sorry inconvenience!"); $('#success > .alert-danger').append('</div>'); //clear 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 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 , send $to = 'me@mail.com'; // put email $email_subject = "contact form submitted by: $name"; $email_body = "you have received new message. \n\n". "here 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; ?>
you have ajax function being run.
add following js success function:
$(".btn-custom").css("background-color","green"); $(".btn-custom").val("new text"); obviously change these needed.
Comments
Post a Comment