As a dummy notification, I want a success dialog to pop up on button click of my submit button. I've used a script found here on SO but for some reason, it still doesn't work. I've already tried declaring the script as function myFunction() and calling it in the action="myFunction() but it still didn't work.
My html:
<!-- HTML of contact form -->
<section id="contact">
<div class="inner">
<h2>Drop me a line. <i class="title_line"></i> </h2>
<p class="lead"> Don't hesitate to send me an email.<br>
I’d love to hear from you! </p>
<div class="row">
<div class="col1">
<form name="htmlform" method="post" action="" dir="ltr" lang="en" class="">
<label>Name<span class="required">*</span></label>
<input type="text" name="first_name" placeholder="Your Name" required>
<label>Email<span class="required">*</span></label>
<input type="email" name="email" placeholder="E-Mail" required>
<label>Message<span class="required">*</span></label>
<textarea name="comments" cols="1" rows="5" placeholder="Tell me everything" required></textarea>
<button name="send" id="emailsend" type="submit" lang="en" class="submit">Send</button>
</form>
<div id="le-alert" class="alert alert-success fade">
<button href="#" type="button" class="close">×</button>
<h4>Alert title</h4>
<p>Roses are red, violets are blue...</p>
</div>
</div>
<div class="col2">
<h4>Meet Me</h4>
<br>
<p>1234 SE 42nd St.</p>
<p>Mercer Island, WA </p>
<p>USA </p>
<h4>My Email</h4>
<br>
<p>vik.yaban#gmail.com</p>
<h4>Employement</h4>
<br>
<p>vik.yaban#gmail.com</p>
</div>
</div>
</div>
<div id="success-alert" class="alert alert-success fade">
<button class="close" type="button" data-dismiss="alert"></button>
<h4 class="alert-heading">Success!</h4>
<p>Email Sent!</p>
</div>
</section>
<!-- End Contact Form -->
<!-- Javascript to make the dialog -->
<script type="text/javascript">$('#emailsend').click(function () {
$('#success-alert').addClass('in'); // shows alert with Bootstrap CSS3 implementation
});
$('.close').click(function () {
$(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implementation
});</script>
<!-- End Javascript -->
you can try your jquery code in document.ready function.
$(document).ready(function(){
$('#emailsend').click(function () {
$('#success-alert').addClass('in'); // shows alert with Bootstrap CSS3 implementation
});
$('.close').click(function () {
$(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implementation
});
})
Related
I'm fairly new to Braintree. Im integrating the DropIn UI in the Sandbox environment. The 'payment_method_nonce' is returning empty after I submit my form, which makes the transaction fail. The DropIn UI displays correctly in the specific div, and to make sure everything was working correctly I added in a place holder for the PaymentMethodNonce which was 'fake-valid-nonce', which made the transaction valid. I am stuck on why the Braintree server is not sending back a Nonce value.
I make an Ajax call to token.php to get the Client Token which enables the DropIn UI to render correctly.
Ajax call below:
<script>
$.ajax({
url: "/braintree/token.php",
type: "get",
dataType: "json",
success: function (data) {
braintree.setup(data, 'dropin', {container: 'dropin-container'});
);
</script>
This is token.php which generates the Client Token:
require ("braintree.php");
$clientToken = $gateway->clientToken()->generate();
echo json_encode($clientToken);
When I inspect the HTML, BrainTree shows a 'server-error-message' div, and it displays "There was an error processing your request. Try again." Other posts regarding this issue have mentioned that the way a HTML form can be set up and submitted can cause this issue.
Here is my Form:
<div class="container">
<div class="row flex-nowrap">
<div class="alpha-container col-12">
<div class="content-container">
<form id="infoForm" method="post" action="/congrats.php">
<div class="tab">
<h2>Pick a Time</h2>
<div>
<!-- Google Schedule API goes here -->
</div>
<div>
<h4>Distance:</h4>
<p></p>
<br>
<h4>Duration:</h4>
<p></p>
<h4>Estimate:</h4>
<p></p>
</div>
</div>
<div class="tab">
<h2>Contact Information</h2>
<div class="contact-form">
<div class="contact-block">
<label for="fullname"></label>
<input type="text" name="Data[fullname]" class="contact" placeholder="Full Name">
</div>
<div class="contact-block">
<label for="email"></label>
<input type="email" name="Data[email]" class="contact" placeholder="Email Address">
</div>
<div class="contact-block">
<label for="phonenumber"></label>
<input type="number" name="Data[phonenumber]" class="contact" placeholder="Phone Number">
</div>
</div>
</div>
<div class="tab">
<h2>Payment Information</h2>
<div class="payment-form">
<label for="firstName"></label>
<input type="text" placeholder="First Name" name="Data[first_name]">
<label for="lastName"></label>
<input type="text" placeholder="Last Name" name="Data[last_name]">
<div id="dropin-container"></div>
</div>
</div>
<!-- Next/Previous Buttons -->
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!--Progress Bar -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
</div>
</div>
</div>
</div>
The form uses Javascript to hide the steps of the form and then adds a submit button then it has reached the last step. 'congrats.php' is where I'll be processing the transaction. I am including both jQuery and Braintree JS in my header.
Edit: My solution was found by editing my HTML form. The form above used javascript to add a submit button once on the last step of the form. My new form now just has a button tag with type=submit and now the 'payment_method_nonce' is being created. For whatever reason, the Braintree server was not receiving my payment information upon submit.
I'm new to modals, i want to submit a form and then show success popup if user form is validated else want to show error popup. Also my it should execute php file for sending the email to user in background.
So, far i'm successful in executing the php file in background and show the model when user clicks on submit button.
But i want the popup to show when the form is validated. Also i want to use type="submit" instead of type="button" for form submit.
Here's my code :
<!-- javascript code to execute php file -->
<script type="text/javascript">
function executePhp() {
$.post("sendmail.php");
return false;
}
</script>
<!-- javascript code ends -->
<form class="well" action="" method="">
<div class="form-group col-md-6">
<label for="inputPassword4">Full Name</label>
<input type="text" name="name" class="form-control" id="inputPassword4" placeholder="Enter Full Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Phone Number</label>
<input type="number" name="mobile" class="form-control" id="inputEmail4" placeholder="Enter Mobile Number">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Email</label>
<input type="email" name="email" class="form-control" id="inputPassword4" placeholder="Enter Your Email">
</div>
</div>
<button type="button" class="btn btn-primary" onclick="executePhp()" style="margin-left: 3%;"
data-toggle="modal" data-target="#myModal">Check</button>
</form>
<!-- Code for popup -->
<!-- Modal -->
<div class="modal fade mymodal" id="myModal" role="dialog">
<div class="modal-dialog mydialog">
<!-- Modal content-->
<div class="modal-content mycontent">
<div class="modal-header myheader">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Message</h3>
</div>
<div class="modal-body mybody">
<br>
<br>
<h3>Thanks for choosing</h3>
<h4>
Your details will arive by email.
Sit back, we'll get back to you soon.
</h4>
<br>
<br>
</div>
<div class="modal-footer myfooter">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Code for popup end-->
Thank you.
You can use Jquery to achieve this.
In you php you can have two variables before the validation like:
$popup_message = "";
$popup_message_color = "";
Now if the form is validated you can display the modal like this:
$popup_message = "login successfully.";
$popup_message_color = "success";
//Open Modal
echo "<script type='text/javascript'>
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>";
In the modal body you can display the message and color.
<div class="modal-body">
<p class="text-<?php echo $popup_message_color; ?>"><?php echo $popup_message; ?></p>
</div>
The same would be done for if validation fails, just change your message and color to $popup_message_color = "danger";
Note If you are validation to another page then the modal should be in that page and you change the close buttons to a link to go back.
Also php script should come after you loaded the jquery.
I am trying to clear all the errors and make input values blank on closing of magnific popup.
I inspected the class of 'close' button and tried to fire jquery event but it is not working.
$("button.mfp-close").on('click',function(){
console.log("Closed");
});
When i click on mfp-close then there is no log in console.
HTML snippet is:
<div class="mfp-content"><div id="customdesign" class="white-popup mfp-with-anim">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p><span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p><form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst"
placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp- close">×</button>
</div></div>
How can we handle this operation??
First of all, if you are using bootstrap framework, use bootstrap modal instead magnific popup, no need for extra js librabry, you can achieve same with bootstrap modal
in your HTML, button you have class="mfp- close" it should be class="mfp-close" as you are binding it like this $("button.mfp-close")
To reset form on pop-up close, you can achieve it with $('form')[0].reset();
Script
$("button.mfp-close").on('click',function(){
alert("Closed");
$('form')[0].reset();
});
HTML
<a class="popup-modal" href="#customdesign">Open modal</a>
<div class="mfp-content">
<div id="customdesign" class="white-popup-block mfp-hide">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p>
<span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p>
<form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst" placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
</div>
Working fiddle example
i'm having a very simple app which includes a form and 2 buttons.'
Description
When the user clicks the first button the site checks if he has a discount coupon and if he has then it calculates the discount ammount based on the coupon. Thats pretty simple. If the user doesn't enter a code the the precess continues normaly.
The problem
With the data i'm posting i'm also posting the coupon field. If the user has entered a valid coupon then i disable the coupon input with jQuery and withit i also disable the ammount field. That causes a problem which makes the fields edited with jQuery "unpostable".
For example if you dont enter a coupon code then the field stays unlocked and jQuery never edits it.
The code
<form class="form-horizontal row-fluid" action="<?= base_url() . 'transactions/new' ?>" method="POST" id="form" name="form">
<div class="control-group">
<div class="alert js_hidden" id="psc_val_warning">
Παρακαλούμε εισάγεται το ποσό που αντιστοιχεί στα PINS
</div>
<label class="control-label" for="basicinput">Συνολικό ποσό</label>
<div class="controls">
<div class="input-append">
<input type="number" name="psc_val" class="span8" id="psc_val" required><span class="add-on">€</span>
</div>
</div>
</div>
<div class="control-group">
<div class="alert alert-error js_hidden" id="coupon_error">
Το κουπόνι δεν είναι έγκυρο!
</div>
<div class="alert alert-success js_hidden" id="coupon_success">
Το κουπόνι εξαργυρώθηκε με επιτυχία!
</div>
<label class="control-label" for="basicinput">Κουπόνι</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">#</span><input class="span8" id="coupon_code" type="text" name="coupon_code" maxlength="11">
</div>
</div>
</div>
<hr>
<div class="control-group">
<label class="control-label" for="basicinput">Σημειώσεις</label>
<div class="controls">
<textarea class="span8" rows="5" name="notes"></textarea>
</div>
</div>
<hr>
<center>
<button class="btn btn-large btn-success js_hidden" id="proceed_btn" onclick="submit_form()">Proceed</button>
</center>
</form>
<center>
<a class="btn btn-large btn-info" onclick="validate()" id="check_btn">Check</a>
</center>
The JS part
function display_proceed_btn() {
$("#psc_val").prop('disabled', true);
$('#check_btn').fadeOut( "slow", function() {
$('#proceed_btn').fadeIn( "slow", function() {
});
});
}
function submit_form() {
$('#form ').submit();
}
there is the other part which takes the coupon and uses the API to see the discount value but it does pretty much the same thing $("#coupon_code").prop('disabled', true);
Add the coupon code to a hidden field once you disable the input field.
Remember to actually recalculate the final amount on the server and not trusting any user editable field ;-)
I'm struggling with a solution for this. I have the first block of code, which I want to use for css formatting/look feel etc.
<div class="login-form">
<!-- Start Error box -->
<div class="alert alert-danger hide">
<button type="button" class="close" data-dismiss="alert"> ×</button>
<h4>Error!</h4>
Your Error Message goes here
</div> <!-- End Error box -->
<form action="#" method="get" >
<input type="text" placeholder="User name" class="input-field" required/>
<input type="password" placeholder="Password" class="input-field" required/>
<button type="submit" class="btn btn-login">Login</button>
</form>
</div>
Then I have this separate code that uses a script to submit the user info once entered. I want to move the actions that this script performs onto the above code. Therefore having the look and feel of the first block of code and the actions of the second.
I'm learning at the moment, so it seems logical to try and use example code that exists as a starting point. I'm not able to find any help on goofle that direcly helps resolve this question.
I think if I could work out if I can wrap the script around the top block I could get it from there, just need some direction.
<div class="container" id="login-block">
<script type="text/template" id="login-template">
<header id="header"></header>
<div class="login">
<form class="login-form">
<div class="error" style="display:none"></div>
<input type="text" id="login-username" placeholder="Username" />
<input type="password" id="login-password" placeholder="Password" />
<button>Log In</button>
</form>
</script>
This is what I wanted to achieve. Works now, only taken 3 hours to work it out ;-/
<div class="container" id="login-block todoapp">
<div class="row">
<div class="col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
<div class="page-icon-shadow animated bounceInDown" > </div>
<div class="login-box clearfix animated flipInY" id="login-block">
<div class="page-icon animated bounceInDown">
<i class="glyphicon glyphicon-user"></i>
</div>
<div class="login-logo">
<img src="img/login-logo.png" alt="Company Logo" />
</div>
<hr />
<div class="login-form content">
<!-- Start Error box -->
<div class="alert alert-danger hide">
<button type="button" class="btn btn-login" data-dismiss="alert"> ×</button>
<h4>Error!</h4>
Your Error Message goes here
</div></div> <!-- End Error box -->
<script type="text/template" id="login-template">
<header id="header"></header>
<div class="login">
<form class="login-form">
<div class="error" style="display:none"></div>
<input type="text" id="login-username" placeholder="Username" />
<input type="password" id="login-password" placeholder="Password" />
<button>Log In</button>
</form>
</script>
<div class="login-links">
<a href="forgot-password.html">
Forgot password?
</a>
<br />
<a href="sign-up.html">
Don't have an account? <strong>Sign Up</strong>
</a>
</div>
</div>
</div>
</div> </div>