We Keep Coding

How to Trigger an event on button click using jQuery

i have an appointments plugin with an option to select particular days in a checkbox manner. I have added a custom validation for the field. Everything works fine. when we click next and reaches next step there is a back button. When we click on the back button it takes to the form without refreshing the data so MY CUSTOM VALIDATION on days is not working.
Here is my code,
jQuery(document).ready(function(){
setTimeout(function(){
jQuery(".ladda-button").attr('onclick','oniter()');
},1750);
});
function oniter(){
if (jQuery(".valid").find(".active").length>=1) {
alert(123);
} else {
jQuery('.removeval').remove();
jQuery(".validation_text").append("<font class='removeval'>Please Select a Day</font>");
}
jQuery(".valid").on ('change',function(){
jQuery(".validation_text").remove();
});
}
This is how my validation works. I want to trigger the entire process when the back button is clicked to ensure the validation occurs . How to do this any idea?

jQuery(document).ready(function(){
jQuery(document).on('click','.ladda-button',function(){
oniter();
});
});
function oniter(){
if (jQuery(".valid").find(".active").length>=1) {
alert(123);
} else {
jQuery('.removeval').remove();
jQuery(".validation_text").append("<font class='removeval'>Please Select a Day</font>");
}
jQuery(".valid").on ('change',function(){
jQuery(".validation_text").remove();
});
}

Your form's back button should have some class or ID, right?
So just trigger same setTimeout when back button is clicked.
f.e.
jQuery(document).on('click','.back-button',function(){
setTimeout(function(){
jQuery(".ladda-button").attr('onclick','oniter()');
},1750);
});

Input Fields are not Showing on Submit

My contact form is not working correctly. When I enter wrong data, all is working as it should, but when data is correct the input fields are not showing. I need to click them with mouse and then they start showing.
This is what I have tried so far:
$('#submit_btn').click(function() {
if($('#register').find('.wpcf7-mail-sent-ok').length > 0){
$('#name-152').val('Full Name').show('slow');
$('#email-152').val('Email').show('slow');
$('#phone-152').val('Phone Number').show('slow');
}
});
please note that class .wpcf7-mail-sent-okappears only when form is filled submitted and correctly. What confuses me the most is that .find cannot find the descendant .wpcf7-mail-sent-ok, and it is one of the descendants.. I have tested it with console.log(); and alert();
This is Wordpress plugin - Contact Form 7
Any ideas?

The "Contact Form 7" plug-in acts on the submission event to do its magic, like manipulating styles and replacing the standard form submission behaviour by an AJAX-style submission.
As this might happen after the button's click event, and probably on the form's submit event, your code runs too soon.
One way to get around this, is to delay the execution of your code with setTimeout:
$('#submit_btn').click(function() {
setTimeout(function () {
if ($('#register').find('.wpcf7-mail-sent-ok').length) {
$('#name-152').val('Full Name').show('slow');
$('#email-152').val('Email').show('slow');
$('#phone-152').val('Phone Number').show('slow');
}
}, 100);
});

How to not validate form on reset()?

I'm using
$('#myform')[0].reset();
to clear HTML form fields when a clear button is clicked. I'm also using jquery.validate.js. So when the above runs, it triggers form validation. All form fields with any validation then display their error messages. How do I prevent this?
I have tried this but it didn't do anything:
$('#myform').removeAttr("nonvalidate");

From the question you linked, the answer is what you want... All you have to do is capture the reset event and call v.resetForm().
var v = $('form').validate(); //etc etc whatever you have here, the important part is saving "v"
$('form').on('reset',function () {
v.resetForm();
});
See it working here: http://jsfiddle.net/uuu8jerr/

How to solve this onclick awkwardness?

http://jsfiddle.net/wmuYq/
I want to eliminate an awkwardness: the user has to click the submit button twice to submit the text.
What should I do to make it work with one click?

You can set a timeout: http://jsfiddle.net/wmuYq/1/
document.getElementById("text1").onblur = function () {
var target = this;
setTimeout( function () {
target.style.height='36px';
}, 250);
}

You could use the onmousedown event on the submit button to submit the form:
document.getElementById("submitButton").onmousedown = function() {
this.form.submit();
}
For the above example to work, you would need to give the button an ID. Also, you would need to change the name of the submit button from "submit" to something else, because otherwise it overwrites the submit property of the form element.
This works because the mousedown event will be triggered on the button before the blur event is triggered by the textarea.
Here's a working example.

Well for one thing you have no form, so I am not sure how it submits at all.
Wrap your code in a form and add an action and it should work fine :-)

This might work. Untested
Remove the onblur event from the textarea and place it as on onclick on the input
onclick="document.getElementById('text1').style.height='36px'"
Revised fiddle: http://jsfiddle.net/jasongennaro/wmuYq/2/

Submit Form for select option.onClick

How would I submit a form when the user clicks an option using jQuery? I found one similar question using the datepicker text input but I'm not that familiar with jQuery so I can't seem to convert it to work for a select item.

On click of an <option>:
$('option').click(function ()
{
$(this).closest('form').submit();
});
On change of a <select> (this is probably the one you want):
$('select').change(function ()
{
$(this).closest('form').submit();
});
As #Guffa commented:
The click event on options doesn't work in all browsers. Safari for example does't trigger it.
...so you definitely want the second one.

The click event on options doesn't work in all browsers. Use the change event of the select element.
Example:
$('select').change(function(){
this.form.submit();
});
Note that the submit event of the form is not triggered when you call the submit method to post the form.

A small correction of these answers:
$(document).ready(function() {
$('#some_link').click(function() {
$('#form_id').submit();
});
});

$('select').change(function() {
$('form').submit();
});

$('#option').click(function () {
// form validation and such then
$('form').submit();
})
This is the easiest way i can think of
UPDATE:
for specific form, you can use its name or id, it really depends on how your html looks like
$('form[name="formnamehere"]').submit();

I found the other answers helpful but to truly achieve what I needed of individual actions based on each option click this was exactly what I needed:
jquery: option plus class and click