I have a website that uses contact form 7 plugin for my contact form.
I added a JQuery function that will focus the first empty fields before clicking the submit button.
What I want to do is when i clicked the submit button with all fields are empty, what I want is to focus the first empty fields after clicking the submit button.
What JQuery function should i use? right now this is my JS:
$( ".col-form3").find( "input:first").focus();
NOTE: The jquery above is executing properly before clicking the submit button.
You will do it like that way :
HTML :
<input type="text" name="t1" value="">
<input type="text" name="t2" value="">
<input type="text" name="t3" value="">
<input type="button" name="button" id="button" value="button">
$(document).ready(function(){
$("#button").on('click',function(){
$("input:not(:checkbox,:button)").each(function(){
if(!$(this).val() ) {
$(this).focus();
return false;
}
});
});
});
FIDDLE DEMO
Below code should work for you :
$(".wpcf7-submit").click(function(){
$(".wpcf7-submit").ajaxComplete(function(){
if($(".wpcf7-response-output").hasClass("wpcf7-validation-errors")){
$(".wpcf7-form-control").each(function(){
if($(this).val().length === 0){
$(this).focus();
return false;
}
});
}
});
});
Tell me if you have any doubt.
Try this java script code:
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery(".wpcf7-submit").ajaxComplete(function(){
var check = jQuery( ".wpcf7-form").find( ".wpcf7-not-valid:eq( 0 )");
if(check)
{
check.focus();
}
});
});
</script>
Related
This Code Works but when i copy and paste into it, it doesn't submit.
<script src="jquery-3.2.1.min.js"></script>
<form id="Form" action="pro_add_invoice.cfm" method="post">
<input id="here"name="htno" type="text" value="" />
<input id="subHere" type="submit" value="Submit" />
</form>
<script>
$('#here').keyup(function(){
if(this.value.length ==10){
$('#Form').submit();
}
});
</script>
I'm assuming you just want to submit the form after ten characters are entered. You can use $().submit() instead and pass in the id of the form.
<form id="Form" action="sell.cfm" method="post">
<input id="here"name="htno" type="text" value="" />
<input id="subHere" type="submit" value="Submit" />
</form>
<script>
//$('#here').keyup(function(){
// if(this.value.length ==10){
// $('#Form').submit();
// }
//});
var input = document.querySelector('#here');
input.addEventListener('keyup', checkLength);
function checkLength(e){
if(e.target.value.length===10){
document.forms["Form"].submit();
}
}
</script>
If you want to submit the form you cannot use click event handler. That's only for click events. you need to call the submit method of the form element to submit the form.
Change your If statement to execute the following:
Vanilla JS:
document.forms.Form.submit();
or
JQuery:
$('#Form').submit();
SO...
<script>
$('#here').keyup(function(){
if(this.value.length ==10){
$('#Form').submit();
}
});
</script>
I think the problem here is this context is not belong to #here, the scope in the anonymous function (probably) belong to window.
I didn't try it yet but maybe this solve the problem, try change this to ('#here')
I am trying to write a very simple jQuery function which will have two main properties. The first one will be to check if the field is empty or not. The second one will be if the field is not empty to execute a form which will lead to a PHP coded page. I am very new to jQuery and I will be very grateful if someone can point where exactly is my mistake. Thank you in advance.
function Captcha() {
$('#Button').click(function() {
if ($("#Field").val().length == 0) {
alert("Please fill the box");
return false;
} else {
alert("Your code is saved");
return true;
}
});
}
$(document).ready(function() {
Captcha();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="success.php" id="Alpha" method="post" onsubmit="return Captcha();">
<input id="Field" type="text" placeholder="Enter key here">
<button id="Button" type="submit" form="Alpha">Confirm</button>
</form>
Don't work with the button's click event, work with the form's submit event because a form can be submitted via the keyboard and therefore the button can be circumvented.
You can see a working version here (Stack Overflow prevents submit code from working in the snippet environment below.)
$(function() {
$('#Alpha').on("submit", function() {
if ($("#Field").val().length == 0) {
alert("Please fill the box");
return false;
} else {
alert("Your code is saved");
return true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="success.php" id="Alpha" method="post" onsubmit="return Captcha();">
<input id="Field" type="text" placeholder="Enter key here">
<button id="Button" type="submit" form="Alpha">Confirm</button>
</form>
You would want to validate the form fields when you actually submit the form. When you click on the button you are still in the process of triggering the submit.
Try changing this:
$('#Button').click(function() {
Into this:
$('#Alpha').on('submit', function() {
See if that helps.
I have a button which by default is disable, but when a checkbox is checked the button is then enabled. I would like to edit the script to make an alert window when the button is clicked when disabled, to make sure the user knows he/she has to check the checkbox.
My script so far:
<script type="text/javascript">
$('#terms').on('change', function(){
if ($(this).is(':checked')){
$('#customButton').removeProp('disabled');
}
else{
$('#customButton').attr('disabled', 'disabled');
}
});
</script>
<form id="payment-form" action="chargeCard.php" method="POST" name="payment-form">
<input type="checkbox" id="terms" />
<input type="image" src="button3.png" id="customButton" value="submit" alt="button" disabled="disabled"/>
</form>
I've made a Fiddle
Here's the code:
HTML
<form id="payment-form" action="chargeCard.php" method="POST" name="payment-form">
<input type="checkbox" id="terms" />
<input type="button" id="customButton" value="submit" alt="button" class="disabled"/>
</form>
JS
$('#terms').on('change', function(){
if ($(this).is(':checked')){
$('#customButton').removeClass('disabled');
}
else{
$('#customButton').addClass('disabled');
}
});
$('#customButton').on('click',function(e){
if( $(this).hasClass('disabled') ){
e.preventDefault();
alert('Please confirm . . .');
}else{
alert('go ahead...');
};
});
The long and short of it is, if an element is 'disabled' all events that happen on it are suppressed. In my fiddle I've 'faked' a disabled button using a style so the click event is still visible to the browser.
$("#customButton").click(function(){
if !($("#terms").is(':checked'))
{
alert("Accept terms first!");
}
})
if your browser can not detect click on a disabled button, Warp the button inside a div and change the function to click on that div.
I have three forms on a page with submit buttons in each, there is a code which is suppose to changes the value of a button in a particular form when clicked but when i click on that submit button all the values in the various forms buttons changes, but i want to change the value based on the form i click
<script language="javascript">
/**
* Disable submit button
*/
$(function(){
$('input:submit').click(function(){
$(this).val('Request Placed...');
$(this).attr('disabled', 'disabled');
$(this).parents('form').submit();
});
});
$(window).load(function(){
$('input:submit').removeAttr('disabled');
});
</script>
Use jQuery selector to select only form that you need, only input from form with id="form_2" will be supported
$(function(){
$('input:submit', '#form_2').click(function(){
$(this).val('Request Placed...');
$(this).attr('disabled', 'disabled');
});
});
jsfiddle: http://jsfiddle.net/krzysztof_safjanowski/sP2Zv/2/
I am not sure about your requirements. However, this demo might give you some ideas to resolve your issues.
HTML:
<form id="form1" action="action1">
<input type="text" id="txt1" />
<input type="submit" value="Submit" />
</form>
<form id="form2" action="action2">
<input type="text" id="txt2" />
<input type="submit" value="Submit" />
</form>
<form id="form3" action="action3">
<input type="text" id="txt3" />
<input type="submit" value="Submit" />
</form>
JavaScript:
(function () {
var $submitBtn,
$form,
submitBtnHandler = function (event) {
event.preventDefault();
var $self = $(this);
$self.val('Request Placed...');
$self.prop('disabled', true);
$self.parents('form').submit();
},
formSubmitHandler = function (event) {
event.preventDefault(); // Added this to stay in the same page when submit form. If you want to redirect to the action URL(action1, action2, action3 etc), please remove it.
alert("Hi, I am " + this.id);
},
resetSubmitBtnState = function () {
$submitBtn.removeAttr('disabled');
},
init = function () {
$submitBtn = $('input:submit');
$form = $('form');
$submitBtn.on('click', submitBtnHandler);
$form.on('submit', formSubmitHandler);
};
$(document).ready(init);
$(window).load(resetSubmitBtnState);
}());
JSFiddle Demo: http://jsfiddle.net/w3devjs/3Byb2/
In JavaScript you could do this,
document.getElementById("BUTTON'S ID").value = "TEXT HERE";
Just make that line an onclick one.
So, when the user clicks the button, an onclick event happens, that will change the button's vaule. Be sure that in the input tag, there is an id for the button as well as a value for it.
So, here's a little example I whipped up,
In HTML,
<form>
<input type="text" id="Input" />
<input type="button" id="BUTTON'S ID" value="TEXT HERE" onclick="Changetxt()" />
</form>
In JavaScript,
<script>
function Changetxt()
{
document.getElementById("BUTTON'S ID").value = "SOME OTHER TEXT";
}
</script>
So, when the user clicks the button, the button's text changes from TEXT HERE to SOME OTHER TEXT.
I have the following form and javascript:
<script type="text/javascript">
function toggleButton(ref,bttnID){
document.getElementById(bttnID).disabled= ((ref.value !== ref.defaultValue) ? false : true);
}
</script>
<form action="" method="post" id="subscribe" name="subscribe">
<label>NAME:</label>
<input type="text" name="name" class="subName" onkeyup="toggleButton(this,'bttnsubmit');">
<label>EMAIL:</label>
<input type="text" name="email" class="subEmail" id="sub_email">
<input type="button" name="button" value="Subscribe" disabled='disabled' id='bttnsubmit'/>
</form>
When I first load my site the SUBMIT button is disabled, as I wanted, since the text field has no text in it. Now I would like to enable the button once some text has been placed within the text field.
Any help please?
The existing code in the question worked fine, but gets disabled when the text is removed. This may be desired by others but you could make a small change to have it permanently removed without needing jquery (jquery wasn't in the tags)
function toggleButton(ref,bttnID){
document.getElementById(bttnID).removeAttribute("disabled");
}
and add onkeyup="toggleButton(this,'bttnsubmit') to any fields that need to enable the button
Using jQuery:
$(document).ready(function() {
$('#bttnsubmit').attr('disabled','disabled');
$('input[type="text"]').keyup(function() {
if($(this).val() != '') {
$('input[type="submit"]').removeAttr('disabled');
}
});
});
source: jQuery disable/enable submit button
Adding the final code that did the trick:
<script type="text/javascript">
$(document).ready(function() {
$('#bttnsubmit').attr('disabled','disabled');
$('#subEmail').keyup(function() {
if($(this).val() != '') {
$('#bttnsubmit').removeAttr('disabled');
}
else {
$('#bttnsubmit').attr('disabled','disabled');
}
});
});
</script>