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>
Related
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 script the enables/disables a text field when a value is entered in another field. The problem is when the field becomes enabled I also want it to be editable. The current script enables the field but I cannot edit the text. Here's what I have
<script type='text/javascript'>
$(function(){
$('.addbut').onkeyup(function(){
if ($(this).val() == '') {
$('.enableOnInput').prop('disabled', true);
} else {
$('.enableOnInput').prop('disabled', false);
}
});
});
</script>
Then the html form has this.
<div class="input ">
<input type="text" class="addbut" name="location" id="location"></div>
<div class="input"><input class="enableOnInput" disabled=""type="text"id="name" name="street" required></div>
Use .keyup( instead of .onkeyup(
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 been looking at a few post on Stack trying to get a simple form validation working but all it does is disabled my submit button. Its meant to remove the disable once they've entered text inside the input field.
So Far
Jquery
$('input:submit').attr('disabled',true);
$('input').change(function(){
if($('input').val() != ''){
$('input:submit').attr('disabled',true);
} else {
$('input:submit').removeAttr('disabled');
});
HTML
<form action="send.php" method="post">
<input id="name" name="name" type="text" required placeholder="Name"/>
<input id="email" name="email" type="email" required placeholder="Enter a valid email address"/>
<input name="submit" id="subscribe" type="submit" value="Subscribe for free"/>
</form>
You should look for every input by using classes that are added to all fields that are requiered. If the user changes one of them and there is still no input, then the button while stay disabled:
jQuery:
$('input.required').change(function(){
if($(this).val() != ''){
$(this).removeClass('required',true);
}else{
$(this).addClass('required',true);
}
//check the length to enable or disable submit
if($(".required").length == 0){
$('#subscribe').attr('disabled',false);
}else{
$('#subscribe').attr('disabled',true);
}
});
html:
<form action="send.php" method="post">
<input id="name" name="name" type="text" class="required" placeholder="Name" />
<input id="email" name="email" type="email" class="required" placeholder="Enter a valid email address" />
<input name="submit" id="subscribe" type="submit" value="Subscribe for free" />
</form>
Here is a fiddle.
However keep in mind that this solution only works with javascript enabled.
I think you need to change your statements in if-else, let me know if you are trying something different apart from this--
$('input:submit').attr('disabled',true);
$('input').change(function(){
if($('input').val() != ''){
$('input:submit').removeAttr('disabled');
}else{
$('input:submit').attr('disabled',true);
}
});
Fiddle- http://jsfiddle.net/UcQhw/
Hey I have refined your code a bit, and its working as you intended
JS CODE:
$('#subscribe').attr('disabled',true);
$('input').change(function(){
if($('input').val() != ''){
$('#subscribe').attr('disabled',false);
}else{
//$('input:submit').removeAttr('disabled');
$('#subscribe').attr('disabled',true);
}
});
LIVE DEMO on JS Fiddle
happy Coding :)
Try Below code:
//$('input:submit').attr('disabled',true);
$('input').change(function(){
if($('input').val() != ''){ alert(1);
$('input:submit').attr('disabled',false);
}else{alert(2);
$('input:submit').attr('disabled', true);
}
});
Code: http://jsfiddle.net/WchJ9/
You got to swap statements in if-else block. Also use $(this) to get the source of event.
Live Demo
$('input:submit').attr('disabled', true);
$('input').change(function () {
if ($(this).val() !== '') {
$('input:submit').attr('disabled', false);
} else {
$('input:submit').prop('disabled', true);
}
});
if you want to check that all text field must not be empty then you have to iterate through all inputs. You should assign class to get sepecific textboxes instead of getting all on page. You can use class selector to get elements by class.
Live Demo
$('input:submit').attr('disabled', true);
$('.cls').change(function () {
blankFields = $('.cls').filter(function () {
return this.value == '';
});
if (blankFields.length === 0) $('input:submit').attr('disabled', false);
else $('input:submit').prop('disabled', true);
});
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);
});