I want to log in a user by pressing the enter key. when I press the enter key it clears the form value. and by clicking with the mouse on the sign in button it allows the user to log in and redirect on the home page.
here is my login.min.js
var Login = function () {
var e = function () {
$(".login-form").validate({
errorElement: "span",
errorClass: "help-block",
focusInvalid: !1,
rules: {username: {required: !0}, password: {required: !0}, remember: {required: !1}},
messages: {username: {required: "Username is required."}, password: {required: "Password is required."}},
invalidHandler: function (e, r) {
$(".alert-danger", $(".login-form")).show()
},
highlight: function (e) {
$(e).closest(".form-group").addClass("has-error")
},
success: function (e) {
e.closest(".form-group").removeClass("has-error"), e.remove()
},
errorPlacement: function (e, r) {
e.insertAfter(r.closest(".input-icon"))
},
submitHandler: function (e) {
e.submit()
}
}), $(".login-form input").keypress(function (e) {
return 13 == e.which ? ($(".login-form").validate().form() && $(".login-form").submit(), !1) : void 0
})
}, r = function () {
$(".forget-form").validate({
errorElement: "span",
errorClass: "help-block",
focusInvalid: !1,
ignore: "",
rules: {email: {required: !0, email: !0}},
messages: {email: {required: "Email is required."}},
invalidHandler: function (e, r) {
},
highlight: function (e) {
$(e).closest(".form-group").addClass("has-error")
},
success: function (e) {
e.closest(".form-group").removeClass("has-error"), e.remove()
},
errorPlacement: function (e, r) {
e.insertAfter(r.closest(".input-icon"))
},
submitHandler: function (e) {
e.submit()
}
}), $(".forget-form input").keypress(function (e) {
return 13 == e.which ? ($(".forget-form").validate().form() && $(".forget-form").submit(), !1) : void 0
}), jQuery("#forget-password").click(function () {
jQuery(".login-form").hide(), jQuery(".forget-form").show()
}), jQuery("#back-btn").click(function () {
jQuery(".login-form").show(), jQuery(".forget-form").hide()
})
}, i = function () {
function e(e) {
if (!e.id)return e.text;
var r = $('<span><img src="../assets/global/img/flags/' + e.element.value.toLowerCase() + '.png" class="img-flag" /> ' + e.text + "</span>");
return r
}
jQuery().select2 && $("#country_list").size() > 0 && ($("#country_list").select2({
placeholder: '<i class="fa fa-map-marker"></i> Select a Country',
templateResult: e,
templateSelection: e,
width: "auto",
escapeMarkup: function (e) {
return e
}
}), $("#country_list").change(function () {
$(".register-form").validate().element($(this))
})), $(".register-form").validate({
errorElement: "span",
errorClass: "help-block",
focusInvalid: !1,
ignore: "",
rules: {
fullname: {required: !0},
email: {required: !0, email: !0},
address: {required: !0},
city: {required: !0},
country: {required: !0},
username: {required: !0},
password: {required: !0},
rpassword: {equalTo: "#register_password"},
tnc: {required: !0}
},
messages: {tnc: {required: "Please accept TNC first."}},
invalidHandler: function (e, r) {
},
highlight: function (e) {
$(e).closest(".form-group").addClass("has-error")
},
success: function (e) {
e.closest(".form-group").removeClass("has-error"), e.remove()
},
errorPlacement: function (e, r) {
"tnc" == r.attr("name") ? e.insertAfter($("#register_tnc_error")) : 1 === r.closest(".input-icon").size() ? e.insertAfter(r.closest(".input-icon")) : e.insertAfter(r)
},
submitHandler: function (e) {
e[0].submit()
}
}), $(".register-form input").keypress(function (e) {
return 13 == e.which ? ($(".register-form").validate().form() && $(".register-form").submit(), !1) : void 0
}), jQuery("#register-btn").click(function () {
jQuery(".login-form").hide(), jQuery(".register-form").show()
}), jQuery("#register-back-btn").click(function () {
jQuery(".login-form").show(), jQuery(".register-form").hide()
})
};
return {
init: function () {
e(), r(), i()
}
}
}();
jQuery(document).ready(function () {
Login.init()
});
and my login_form.tpl
<body class=" login">
<!-- BEGIN LOGO -->
<div class="logo">
<a href="#">
<img src=" {$site_root}application/views/admin/assets/layouts/layout/img/logo.png"
alt="logo" /> </a>
</div>
<!-- END LOGO -->
<!-- BEGIN LOGIN -->
<div class="content">
<!-- BEGIN LOGIN FORM -->
<form class="login-form" action="{$data.action}" method="post">
<h3 class="form-title font-green">Sign In</h3>
<div class="alert alert-danger display-hide" style='display:{if $error != ''}block{/if}'>
<button class="close" data-close="alert"></button>
<span> {if $error != ''}{$error}{else}Enter any username and password.{/if}</span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">{l i='field_nickname' gid='ausers'}</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="nickname" /> </div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">{l i='field_password' gid='ausers'}</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" /> </div>
<div class="form-actions">
<input type="submit" name="btn_login" value="{l i='btn_login' gid='start' type='button'}" class="btn green uppercase btn-block">
</div>
</form>
i have tried different solutions but did'nt succeed.
$('.form-group').keydown(function() {
var key = e.which;
if (key == 13) {
$('.form-group').submit();
}
});
Thank you for your help but finally, I find the solution I just needed to make some changes.
$("input").keypress(function (e) {
if (e.which == 13) {
$('input[name="btn_login"]').click();
return false;
}
Related
I am using CodeIgniter. I have a form and fields are Name, Email, Mobile no, Message.
I am able to submit the data in the database using AJAX. There is no issue with AJAX.
Now What I did, I fill the form and click on submit button twice then I check my database and I found the same records twice because of two clicks. If I click three times on the submit button then I am getting same records three times in the database.
Is there any way to stop this issue. Like one click should work on submit button till the data submitting in the database?
View
<div class="i_p_aboutTeam_alert" id="popup_verify-1" style="display: none;">
<div class="profile_content">
<div class="profile_header clearfix">
<i class="fas fa-times"></i>
</div>
<div class="profile_body">
<div class="form_heading">
<h2>CONTACT FORM</h2>
</div>
<form action="" method="post" name="form" id="form" autocomplete="off">
<div class="form-group ffl-wrapper">
<label for="name" class="ffl-label">Name</label>
<input type="text" name="name" class="form-control" id="name">
</div>
<div class="form-group ffl-wrapper">
<label for="mobileno" class="ffl-label">Mobile Number</label>
<input type="text" name="mobileno" class="form-control" id="mobileno">
</div>
<div class="form-group ffl-wrapper">
<label for="email" class="ffl-label">Email</label>
<input type="email" name="email" class="form-control" id="email">
</div>
<div class="form-group ffl-wrapper">
<label for="message" class="ffl-label">Message</label>
<textarea class="form-control" name="message" id="message"></textarea>
</div>
<div class="form-group text-center">
<input type="submit" name="send" class="i_btn i_btn_bg i_btn_round w_100p" value="Submit">
</div>
</form>
</div>
</div>
</div>
AJAX
$("#form").validate({
rules: {
name: {
required: true,
minlength: 3,
lettersonly: true
},
mobileno: {
required: true,
minlength: 10,
maxlength: 10,
number: true
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 10
}
},
submitHandler: function(form) {
//form.submit();
$.ajax({
url: "<?php echo base_url('Home_control/contact');?>",
type: "POST",
data: $('#form').serialize(),
success: function(data) {
$("#popup_verify-1").hide();
$("#popup_success-1").show();
},
}); // AJAX Get Jquery statment
}
});
Controller
public function contact() {
$this -> form_validation -> set_error_delimiters('<div class="error">', '</div>');
$this -> form_validation -> set_rules('name', 'Name', 'trim|required|min_length[3]');
$this -> form_validation -> set_rules('mobileno', 'Mobile no', 'trim|required|regex_match[/^[0-9]{10}$/]');
$this -> form_validation -> set_rules('email', 'email', 'required|valid_email');
$this -> form_validation -> set_rules('message', 'Message', 'required');
if ($this -> form_validation -> run() == FALSE) {
//$this->index();
} else {
$form_data = array(
'name' => $this -> input -> post('name', TRUE),
'mobileno' => $this -> input -> post('mobileno', TRUE),
'email' => $this -> input -> post('email', TRUE),
'message' => $this -> input -> post('message', TRUE)
);
$success = $this -> db -> insert('form', $form_data);
echo json_encode(array("data" => $success)); // return to the ajax
}
}
maintain flag for request in progress
<script type="text/javascript">
var isReqInprogress = false;
$("#form").validate({
rules: {
name: {
required: true,
minlength: 3,
lettersonly: true
},
mobileno: {
required: true,
minlength: 10,
maxlength: 10,
number: true
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 10
}
},
submitHandler: function(form) {
//form.submit();
if(isReqInprogress){
return;
}
isReqInprogress = true;
$.ajax({
url: "<?php echo base_url('Home_control/contact');?>",
type: "POST",
data: $('#form').serialize(),
success: function(data) {
$("#popup_verify-1").hide();
$("#popup_success-1").show();
isReqInprogress = false;
},
}); // AJAX Get Jquery statment
}
});
</script>
Here is the AJAX code that you can use:
Solution 1: If you want to disable the submit button click until AJAX call is complete.
$.ajax({
type: "POST",
url: "<?php echo base_url('Home_control/contact');?>",
data: $('#form').serialize(),
beforeSend: function() {
$('#form').find("input[type='submit']").prop('disabled', true); // disable button
},
success:function(data){
$("#popup_verify-1").hide();
$("#popup_success-1").show();
$('#form').find("input[type='submit']").prop('disabled', false); // enable button
}
});
Solution 2: If you don't want to disable the submit button but prevent AJAX call from being used multiple times.
$("#form").validate({
var isCurrentReqInprogress = false;
...
...
submitHandler: function(form) {
//form.submit();
if(isCurrentReqInprogress){
return;
}
isCurrentReqInprogress = true;
$.ajax({
url: "<?php echo base_url('Home_control/contact');?>",
type: "POST",
data: $('#form').serialize(),
success: function(data) {
$("#popup_verify-1").hide();
$("#popup_success-1").show();
isCurrentReqInprogress = false;
},
}); // AJAX Get Jquery statment
}
});
I have a fullcalendar that inserts data into a database table ondrag and drop event.The fullcalendar also edits the event name onclick and saves the new event name to the database.Onclick a prompt dialog is used to edit the event name.I recently added a custom boostrap modal popup to my fullcalendar to display the events and edit the event name but i cant seem to figure out how to edit the event name and save it to the database using the custom modal.This only seems to work when i use the javascript prompt.
This is my edit event code Using javascript Prompt:
var title = prompt('Event Title:', event.title, { buttons: { Ok: true, Cancel: false}});
if (title){
event.title = title; console.log('type=changetitle&title='+title+'&name='+name+'&email='+email+'&numb='+numb+'&start='+start+'&end='+end+'&eventid='+event.id);
$.ajax({
url: 'process.php',
data: 'type=changetitle&title='+title+'&name='+name+'&email='+email+'&numb='+numb+'&start='+start+'&end='+end+'&eventid='+event.id,
type: 'POST',
dataType: 'json',
success: function(response){
if(response.status == 'success')
$('#calendar').fullCalendar('updateEvent',event);
},
error: function(e){
alert('Error processing your request: '+e.responseText);
}
});
}
},
Now i have added a custom boostrap modal to display the events.but cant seem to figure out how to edit the event name using the custom modal.
Heres my code using a custom modal onclick event:
eventClick: function(event, jsEvent, view) {
console.log(event.id);
$('#modalTitle').html(event.title);
$('#modalName').html(event.name);
$('#modalEmail').html(event.email);
$('#modalNumb').html(event.numb);
$("#modalDate1").html(moment(event.start).format('MMM Do h:mm A'));
$('#modalDate2').html(moment(event.end).format('MMM Do h:mm A'));
$('#dialog').modal("show")
var title = modal('Event Title:', event.title, { buttons: { Ok: true, Cancel: false}});
if (title){
.......//the rest of the code is the same as above
And here is the html code for the modal:
<div class="modal" id="dialog" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title" id="modalTitle"></h4>
<input class="modalTitle" type="text" id="Edit"/>
<div class="external-event bg-fuchsia" id="status"></div>
</div>
<div class="modal-body" id="modalBody">
Client:<h3 id="modalName"></h3>
<hr>
Email:<h3 id="modalEmail"></h3>
<hr>
Number:<h3 id="modalNumb"></h3>
<hr>
CheckIn:<h3 id="modalDate1"></h3>
<hr>
CheckOut:<h3 id="modalDate2"></h3>
</div>
<button type="button primary" class="btn btn-danger" aria-hidden="true" id="true">Save</button>
<button type="button primary" class="btn btn-danger" aria-hidden="true" id="false">Cancel</button>
</div>
</div>
</div>
I basically need to be able to edit the event using the custom modal instead of a prompt.Your help will be greatly appreciated.
You need to cache the event in a variable that you can have access after the modal opens and attach to the save button a click event that updates the fullcalendar event to your database.
something like this
var myEvent;
eventClick: function(event, jsEvent, view) {
myEvent= event;
// code
}
....
$( '#true' ).click(function(){
myEvent.title = $( '#Edit' ).val();
$.ajax({
url: 'process.php',
data: 'type=changetitle&title='+myEvent.title+'&name='+name+'&email='+email+'&numb='+numb+'&start='+start+'&end='+end+'&eventid='+event.id,
type: 'POST',
dataType: 'json',
success: function(response){
if(response.status == 'success')
$('#calendar').fullCalendar('updateEvent',myEvent);
},
error: function(e){
alert('Error processing your request: '+e.responseText);
}
});
});
I used this is a way for me to get all the required data from my modal and back to the controller via AJAX, even has validation and alerts for server messages.
dayClick: function (date, allDay, jsEvent, view) {
$('#LeaveStart').val(date.format('DD-MM-YYYY 00:00'));
$('#LeaveFinish').val(date.format('DD-MM-YYYY 23:59'));
$('#popupEventForm').modal('show');
$('#myform').validate({
rules: {
StaffID: {
required: true
},
SelectRole: {
required: true
},
customdescription: {
required: true
},
SicknessType: {
required: true
},
SicknessSubType: {
required: true
},
StartDate: {
required: true
},
EndDate: {
required: true
},
EventStatus: {
required: true
},
},
/*MESSAGES*/
messages: {
StaffID: {
required: "Please select staff member"
},
SelectRole: {
required: "Please select a role"
},
customdescription: {
required: "Please enter leave details"
},
SicknessType: {
required: "Please select a leave type"
},
SicknessSubType: {
required: "Please select a leave sub type"
},
StartDate: {
required: "Please Enter a start date"
},
EndDate: {
required: "Please Enter an end date"
},
EventStatus: {
required: "Please confirm a status"
},
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
submitHandler: function (form) {
var dataRow = {
'Id': $('#id').val(),
'Subject': $('#title').val(),
'Description': $('#customdescription').val(),
'StartTime': $('#LeaveStart').val(),
'EndTime': $('#LeaveFinish').val(),
'SelectRole': $('#SelectRole').val(),
'ETADType': $('#SicknessType').val(),
'ETADSubType': $('#SicknessSubType').val(),
'StaffID': $('#StaffID').val(),
'EventStatus': $('#EventStatus').val(),
'AllRoles': $('#AllRoles').is(':checked'),
'AllDay': $('#AllDay').is(':checked'),
'isAMLeave': $('#AM').is(':checked'),
'isPMLeave': $('#PM').is(':checked'),
};
$.ajax({
type: 'POST',
url: "/BookingTwo/SaveEvent",
data: dataRow,
success: function () {
$("#myform")[0].reset();
ClearPopupFormValues();
$('#popupEventForm').modal('hide');
},
statusCode: {
201: function (reponose) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
$('#alert').addClass('alert alert-success').removeClass('alert-warning');
$("#alert").removeClass("hidden");
$("P").replaceWith("Success - Event Created")
$("#alert").fadeTo(2000, 500).slideUp(500, function () {
$('#alert').addClass("hidden");
})
},
500: function (reponse) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
$("#alert").removeClass("hidden");
$('#popupEventForm').modal('hide');
$("P").replaceWith("The Error Been forwarded to system admin")
$("#alert").fadeTo(2000, 500).slideUp(500, function () {
$('#alert').addClass("hidden");
})
},
400: function (reponse) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
$("#alert").removeClass("hidden");
$('#popupEventForm').modal('hide');
$("P").replaceWith("Duration Service returned 0 - Please Ensure Correct Shift Days are selected. Record NOT Created.")
$("#alert").fadeTo(2000, 500).slideUp(500, function () {
$('#alert').addClass("hidden");
})
},
409: function (reponse) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
$("#alert").removeClass("hidden");
$('#popupEventForm').modal('hide');
$("P").replaceWith(reponse.messages)
$("#alert").fadeTo(2000, 500).slideUp(500, function () {
$('#alert').addClass("hidden");
})
}
}
});
}
})
},
});
I recently started learning AJAX for form submitting, but it seems that i'm still missing something essential, because the submitted data won't go to the PHP file like it's suppose to. I don't understand why it won't work.
HTML:
<div class="col-md-6">
<form class="form" action="../wp-content/themes/tempo/cfgs/js/scrollmagic/contact.php">
Eesnimi:
<input name="eesnimi" id="eesnimi" class="required" type="text">
Perekonnanimi:
<input name="pernimi" id="pernimi" class="required" type="text">
E-Post:
<input name="email" id="email" class="required" type="email">
Telefoni number:
<input name="nr" id="nr" class="required" type="text">
Teema:
<input name="teema" id="teema" class="required" type="text">
Sõnumi sisu:
<textarea name="sisu" id="sisu" class="required"></textarea>
<div></div>
<input type="submit" id="sub" value="Edasta">
</form>
</div>
JQUERY/AJAX
$('#sub').click(function(){
$('.form').submit();
var eesnimi = $('#eesnimi').val();
var pernimi = $('#pernimi').val();
var email = $('#email').val();
var nr = $('#nr').val();
var teema = $('#teema').val();
var sisu = $('#sisu').val();
$('.form').validate({
rules:{
eesnimi: {
required: true,
nowhitespace: true,
lettersonly: true
},
pernimi: {
required: true,
nowhitespace: true,
lettersonly: true
},
email: {
required: true,
email: true
},
nr: {
required: false,
integer: true
},
teema: {
required: true
},
sisu: {
required: true
}
},
messages:{
eesnimi: {
required: valituhiErr,
nowhitespace: tuhikErr,
lettersonly: nonumbersErr
},
pernimi: {
required: valituhiErr,
nowhitespace: tuhikErr,
lettersonly: nonumbersErr
},
email: {
required: valituhiErr,
email: emailErr
},
nr: {
required: valituhiErr,
integer: onlynumbersErr
},
teema: {
required: valituhiErr,
},
sisu: {
required: valituhiErr,
}
},
submitHandler: function(){
$.ajax({
type: "POST",
url: "../wp-content/themes/tempo/cfgs/js/scrollmagic/contact.php",
data: $('.form').serialize(),
success: function (o) {
console.log(o);
}
});
}
});
return false;
});
PHP:
<?php
print_r($_POST);
?>
I'm just experimenting, it seems that validation works correctly but the submit function won't, beceause the server won't recieve anything from my ajax request and it won't display anything on console either.
try this : jquery
var data = {
eesnimi = $('#eesnimi').val();
pernimi = $('#pernimi').val();
email = $('#email').val();
nr = $('#nr').val();
teema = $('#teema').val();
sisu = $('#sisu').val();
};
$.ajax({
type : "post",
dataType : "JSON",
url : "register.php",
data : data,
success : function(result)
{
if (result.hasOwnProperty('error') && result.error == '1'){
var html = '';
$.each(result, function(key, item){
if (key != 'error'){
html += '<li>'+item+'</li>';
}
});
//show in html
php
eesnimi = $_POST['eesnimi']
pernimi = ...
email =...
nr = ...
teema = ...
sisu = ...
//connect db
//sqlquery you want validate
if (mysqli_num_rows($result) > 0)
{
$row = mysqli_fetch_assoc($result);
if ($row['eesnimi']==$eesnimi ){
$errors['eesnimi '] = ...;
}
// like this
if (count($errors) > 1){
$errors['error'] = 1;
die (json_encode($errors));
}
//insert into db
}
hope this help
I have seen this example and applied it in my code yet nothing worked, its not working.
Referral ans-1
Referral ans-2
I need to apply jquery validation in ckeditor and I have seen all those past examples even I have mentioned those links above, by doing that step my validation is still not working.
Here is my HTML Code
<div class="elementbox">
<label class="form-label">Content<span class="required">*</span></label>
<div class="controls">
<textarea name="content_body" id="content_body" rows="10" cols="80"><?php echo $content_body; ?></textarea>
</div>
</div>
<script>
var url = "<?php echo base_url(); ?>";
CKEDITOR.replace( 'content_body',{
//extraPlugins: 'imageuploader'
} );
</script>
My Jquery validation code
$("#add_content_pages").validate({
ignore: [],
debug: false,
rules: {
title: {
required: true
},
content_id: {
required: true
},
content_body:{
required: function()
{
CKEDITOR.instances.content_body.updateElement();
}
}
},
messages: {
title: {
required: "Please enter Title"
},
content_id: {
required: "Please Select Content Type"
},
content_body: {
required: "Please enter Content"
}
},
errorPlacement: function (error, element) {
var attr_name = element.attr('name');
if (attr_name == 'type') {
error.appendTo('.type_err');
} else {
error.insertAfter(element);
}
}
});
Any Solution what I am missing?
please check this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
then html form
<form action="" method="post" id="check_form">
<div class="elementbox">
<label class="form-label">Content<span class="required">*</span></label>
<div class="controls">
<textarea name="content_body" id="content_body" rows="10" cols="80"></textarea>
<div id="error_check_editor"></div>
</div>
</div>
<script>
CKEDITOR.replace('content_body');
</script>
<br/>
<input name="submit" type="submit" value="Submit" class="button" id="submit"/>
</form>
then script
<script>
$.validator.addMethod("check_ck_add_method",
function (value, element) {
return check_ck_editor();
});
function check_ck_editor() {
if (CKEDITOR.instances.content_body.getData() == '') {
return false;
}
else {
$("#error_check_editor").empty();
return true;
}
}
$(document).ready(function () {
$("#check_form").validate(
{
ignore: [],
debug: false,
errorPlacement: function (error, element) {
if (element.attr("name") == "content_body") {
error.insertAfter(element);
}
},
rules: {
content_body: {
check_ck_add_method: true
}
},
messages: {
content_body: {}
}
});
});
</script>
I have a form that seems to POST successfully after submitting via AJAX. Under "NET" in Firebug the posted info displays properly. But I cannot echo this data at all.
I'm trying this, which is the 1st field in my form: <?php echo $_POST['sun_exposure']; ?>
Does this have anything to do with the form's ACTION not having a url?
Also, I'm trying to POST data to the same page, and not a PHP file. Maybe this is part of the problem? This is also a Wordpress page, and not a file.
Here's the live url: http://www.richmindonline.com/container-creations/personal-creations-assistant/
Here's the form code:
<form id="quotation_form" name="vdmQuotationForm" action="#" method="post">
<div id="page1">
<div id="step0_header" class="steps-headers" onClick="step0ToggleClick();">Step 1<span style="margin-left:30px;">Sun Exposure</span></div>
<div id="step0" class="quotation-steps"><strong>Describe the sun exposure of your planter...</strong><br/>
<div class="radio-container"><input onchange="go_to_next_step();" type="radio" name="sun_exposure[]" id="full_sun" value="Full Sun"<?php checked( 'Full Sun',$_POST['sun_exposure[]']); ?> /><label class="label-quotation-steps">Full Sun</label><br class="clear"/></div>
<div class="radio-container"><input onchange="go_to_next_step();" type="radio" name="sun_exposure[]" id="part_sun" value="Part Sun"<?php checked( 'Part Sun',$_POST['sun_exposure[]']); ?> /><label class="label-quotation-steps">Part Sun</label><br class="clear"/></div>
<div class="radio-container"><input onchange="go_to_next_step();" type="radio" name="sun_exposure[]" id="full_shade" value="Full Shade"<?php checked( 'Full Shade',$_POST['sun_exposure[]']); ?> /><label class="label-quotation-steps">Full Shade</label><br class="clear"/></div>
</div>
</div>
</div>
</form>
Here's the AJAX request, which is wrapped up in the jQuery validate script:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#quotation_form').validate({ // initialize the plugin
rules: {
'sun_exposure[]': {
required: true,
},
'height[]': {
required:true,
},
'diameter[]': {
required:true,
},
'shape[]': {
required:true,
},
'placement[]': {
required:true,
},
},
messages: {
'sun_exposure[]': {
required: 'Please choose a sun exposure for your plant',
},
'height[]': {
required: 'Please choose the height of your planter'
},
'diameter[]': {
required: 'Please choose the diamter of your planter'
},
'shape[]': {
required: 'Please choose the shape of your planter'
},
'placement[]': {
required: 'Please choose the placement of your planter'
},
},
errorPlacement: function (error, element) {
alert(error.text());
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
var form_data = $("#quotation_form").serialize();
$.ajax({
url: "http://www.richmindonline.com/container-creations/personal-creations-assistant/",
type: 'POST',
data: form_data,
cache: true,
success: function(data) {
alert(data);
}
});
$('#page1').hide();
$('html, body').animate({ scrollTop: $('body').offset().top }, 10);
$('#page2').show();
$('.intro').hide();
$('.to_page1').show();
return false;
}
}); // end .validate()
});
</script>