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.
Related
I have this code in my html where I'm to upload three files. The submit button for all the corresponding file uploads is disabled unless a file is selected.
$(document).ready(
function() {
$('input:file').change(
function() {
if ($(this).val()) {
$('input:submit').attr('disabled', false);
}
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<input type="file" name="fileInput1" id="fileInput1" />
<input type="submit" value="submit" disabled />
</form>
<form action="#" method="post">
<input type="file" name="fileInput2" id="fileInput2" />
<input type="submit" value="submit" disabled />
</form>
<form action="#" method="post">
<input type="file" name="fileInput3" id="fileInput3" />
<input type="submit" value="submit" disabled />
</form>
My concern is that, if I select a file for the first form, the submit button in the other forms too get enabled.
Option 1:
Regardless of the order of the elements, this will enable the wanted button:
$(document).ready(
function(){
$('form input:file').change(
function(){
if ($(this).val()) {
// Select button of this form
$(this).parent('form')
.children('input:submit')
.attr('disabled',false);
}
}
);
});
see this jsFiddle
Option 2: This will enable it in case Input-submit is always next to Input-File:
$(this).next().attr('disabled',false);
instead of this:
$('input:submit').attr('disabled',false);
see this jsFiddle
You need to use traversing, to find the right button within the right form.
$(document).ready(
function(){
$('input:file').change(
function(){
if ($(this).val()) {
$(this).siblings('input[type=submit]').attr('disabled',false);
}
}
);
});
This will look only for inputs that are siblings of the file input, which means that they are within the same parent element (in your case, the same form).
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>
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 a form with two buttons and some text inputs. By default if you press enter it will "click" the first button. I'd like to make it so that if you type in either of the text boxes, if you press enter the second button will be the one to be clicked.
In the simplified example below, pressing enter will by default "click" the log in using facebook button. This will happen even if something is entered in the email or password text inputs. I'd like it so that if something is entered in either the email or password inputs, then pressing enter will "click" the login with email/password button.
<form>
<button class="login-facebook">Log in with Facebook</button>
<input type="text" class="email" placeholder="email"><br>
<input type="password" class="password" placeholder="password"><br>
<button class="login-password">Log in with email/password</button>
</form>
Goal is something like:
$('.email').add('.password').on('change', function() {
$('.login-password').setToBeNewDefaultClickIfEnterIsPressed();
});
Where setToBeNewDefaultClickIfEnterIsPressed() changes the default enter.
See: Multiple submit buttons on HTML form – designate one button as default
You can also make them separate forms and play with that. See also: preventDefault
Try this.
I threw in a field that let's you select the button you want to be the default, just to show how it works. If that field is empty, I made the default button #2.
jsFiddle here
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var defaultbutt = 2;
$(document).ready(function() {
$('[id^=txt]').blur(function() {
if ($(this).val() != '') {
defaultbutt = $('#pickabutt').val();
if (defaultbutt=='') defaultbutt = 2;
}
});
$('#pickabutt').blur(function() {
defaultbutt = $('#pickabutt').val();
if (defaultbutt=='') defaultbutt = 2;
});
$(document).keypress(function(e) {
if(e.which == 13) {
$('#mybutt' + defaultbutt).click();
}
});
$('[id^=mybutt]').click(function() {
var num = $(this).val();
alert('You clicked button: ' + num);
});
}); //END $(document).ready()
</script>
</head>
<body>
Login:<br /><input id="txtLogin" type="text" /><br />
PWord:<br /><input id="txtPassword" type="password" /><br />
<input type="button" id="mybutt1" value="One" />
<input type="button" id="mybutt2" value="Two" />
<input type="button" id="mybutt3" value="Three" />
Default button Number:<br /><input id="pickabutt" type="text" /><br />
</body>
</html>
I'm able to disable blank form fields, on submission, with:
<form method="GET" onsubmit="onsubmit1(this)">
...
<script type="text/javascript">
function onsubmit1(thiz) {
$(thiz).find(':input').each(
function() {
if (!$(this).val()) {
$(this).attr('disabled', true)
}
}
)
}
The problem is that the fields remain disabled, when the user selects to export a .CSV file, as the page doesn't refresh after the .CSV file is downloaded to the browser.
I would like the disabled input fields to be re-enabled, when the user selects to export a file.
Bonus points for solving this via the form's onsubmit handler, and not via the submit button's onclick handler as there are many submit buttons.
I have made demo please refer this Demo
See Demo
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="submit" value="Enabled" id="btn2">
<input type="submit" value="Disabled" id="btn1">
$('#btn1').on("click", function () {
alert($(this).val());
$('input:text').attr('disabled', true);
});
$('#btn2').on("click", function () {
alert($(this).val());
$('input:text').attr('disabled', false);
});