I just found sweet alert and would like to implement it in a simple form confirmation but I am bombarded with information, and I'm trying to understand the JavaScript as I go with no luck.
I want to use the success message here (third example) but I dont understand how to implement this properly.
I as well would like to have the page refresh after, but I need to tackle this first.
Also, is it possible to use sweet alert to validate a form for empty fields and display an error message?
I understand this is all very rudimentary, I would greatly appreciate some assistance with this as I don't have much of a clue of what I'm doing.
HTML
<form id="form" class="topBefore" action="<echo htmlspecialchars">
<div>
<h5 class="desc">Please Enter Your Information</h5>
<input type="text" placeholder="DONATION AMOUNT" />
<input type="text" placeholder="FIRST NAME">
<input type="text" placeholder="LAST NAME">
<input type="text" placeholder="ADDRESS" />
<input type="text" placeholder="CITY" />
<input type="text" placeholder="STATE" />
<input type="text" placeholder="ZIP" />
<input type="email" placeholder="E-MAIL">
<input type="text" placeholder="PHONE" />
<h5>How did you find Flower Spark / All Hallows Guild?</h5>
<input type="text" placeholder="How did you find Flower Spark?"/>
<div>
<h5>Select payment method:</h5>
<div class="pad-bot">
<select name="Field106" class="field select medium" tabindex="11">
<option value="First Choice">Credit Card/PayPal</option>
<option value="Second Choice">Check/Money Order</option>
</select>
</div>
</div>
<button id="submit">
<span class="state">Submit</span>
</button>
</div>
</form>
JS
swal("Good job!", "You clicked the button!", "success")
$('#form').on('submit', function () {
swal("Good job!", "You clicked the button!", "success")
});
OR
document.getElementById('submit').addEventListener('click', function () {
swal("Good job!", "You clicked the button!", "success")
});
Add this JavaScript to your page, either after the form or wrapped in an onload handler:
$("#form").submit(function(e) {
if(/* Validate form */) {
swal("Good job!", "You clicked the button!", "success");
setTimeout(function() {
window.location = "redirect page";
}, 3000);
} else {
//Display alert
}
e.preventDefault();
});
Place whatever code you want to validate your form (eg check for missing fields) in the if
statement, and whatever error message you want in the else
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.