I developed a function that keeps the submit disabled until filling all the fields. The function works, but when I create two more users the submit button enables before filling the fields; my function works only once.
The button is working and the data is saved, but the submit button is enabled before filling the fields.
$(document).ready(function () {
$('#myForm input').keyup(function () {
var empty = false;
$('#myForm input').each(function () {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('#btnsave').attr('disabled', 'disabled');
} else {
$('#btnsave').attr('disabled', false);
}
return empty;
});
});
i think you create new inputs dynamically, then try this:
$('#myForm').on('keyup', 'input', function () {
var empty = false;
$('#myForm input').each(function () {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('#btnsave').attr('disabled', 'disabled');
} else {
$('#btnsave').attr('disabled', false);
}
return empty;
});
});
Related
I have a button which needs to have been clicked by user before submitting the form which is as:
$('#chooseButton')
.on(
'click',
function() {
console.log("user had pressed the button");
});
I have a submit button which is:
<button id="saveBtn" class="btn btn-success pull-right">Submit</button>
When i click the submit button then the action it goes to here:
$("#saveBtn").click(function (e) {
e.preventDefault();
let allValid = true;
$("form").each(function (index, form) {
allValid = allValid && form.reportValidity();
});
if (!jQuery('#chooseButton').data('clicked')) {
alert("please select the selection");
} else if (allValid && jQuery('#chooseButton').data('clicked')) {
/*$.ajax({
// ajax code to submit
}); */
} else {
}
});
If the button is not clicked,then it shows me alert("please select the selection") but even if the button is clicked,it is showing me same alert. It needs to go to else..if part if button has been clicked,but it is not going in else..if part if button is clicked.How to handle this?
Define a boolean and make it true on click
var clicked="false"
$('#chooseButton')
.on(
'click',
function() {
console.log("user had pressed the button");
clicked=true;
});
$("#saveBtn").click(function (e) {
e.preventDefault();
let allValid = true;
$("form").each(function (index, form) {
allValid = allValid && form.reportValidity();
});
if (!clicked) {
alert("please select the selection");
} else if (allValid && jQuery('#chooseButton').data('clicked')) {
/*$.ajax({
// ajax code to submit
}); */
} else {
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="chooseButton">Click</button>
<button id="saveBtn" class="btn btn-success pull-right">Submit</button>
You can define a variable, And can set a Boolean value to detect the button clicked status, like this,
var chooseButtonClicked = false;
$('#chooseButton')
.on(
'click',
function() {
chooseButtonClicked = true;
});
$("#saveBtn").click(function (e) {
e.preventDefault();
let allValid = true;
$("form").each(function (index, form) {
allValid = allValid && form.reportValidity();
});
if (!chooseButtonClicked ) {
alert("please select the selection");
} else if (allValid && chooseButtonClicked) {
/*$.ajax({
// ajax code to submit
}); */
} else {
}
});
Make a flag variable and set it true on click of button.
var buttonClickFlag = false;
$('#chooseButton')
.on(
'click',
function() {
buttonClickFlag = true;
console.log("user had pressed the button");
});
And Before AJAX call, you can check the value of variable 'buttonClickFlag'. if the value is true then call otherwise not.
I need to write custom validated form in Wordpress. After the click on For-Author radio button some checkboxes group should be marked as not required. I tried to change "aria-required" attributes to "false" or remove and add class "wpcf7-validates-as-required" but it doesn't work. I also tried to reinit wpcf7 by
$('div.wpcf7 > form').wpcf7InitForm();
but it's also doesn't work.
This is a code sample:
$radio.button.click(function (event) {
isAuthor(event)
});
var isAuthor = function (event) {
if ($(event.target).attr('data-author') == 'true') {
authorClicked = true;
} else {
authorClicked = false;
}
fieldUpdate();
};
var fieldUpdate = function () {
var $text = $('[name=pres-title]');
if (authorClicked) {
$text.prop('disabled', false).attr('aria-required', true).addClass('wpcf7-validates-as-required').attr('aria-invalid', false)
$fieldRequired.each(function () {
$(this).prop('disabled', false).attr('aria-required', true).addClass('wpcf7-validates-as-required').attr('aria-invalid', false);
});
} else {
$text.prop('disabled', true).attr('aria-required', false).removeClass('wpcf7-validates-as-required').attr('aria-invalid', false);
$fieldRequired.each(function () {
$(this).prop('disabled', true).attr('aria-required', false).removeClass('wpcf7-validates-as-required').attr('aria-invalid', false);
});
}
}
$(document).ready(function() {
$("#btn").click(function() {
$("#form").toggle();
});
$("#submit").click(function() {
if ($(".product").checked = true) {
alert("Thank You!")
} else {
alert('Please Choose A Product');
}
var name = $("input:text").val();
var nLi = $("<li>").appendTo("ul");
nLi.text(name);
});
});
Everytime I put text in the text input, the <li> will display for only a moment, but the page will refresh and it will disappear. Sorry if this is obvious, I'm still learning.
Don't allow the page to refresh. Return false at the end.
$(document).ready(function() {
$("#btn").click(function() {
$("#form").toggle();
});
$("#submit").click(function() {
if ($(".product").checked) {
alert("Thank You!")
} else {
alert('Please Choose A Product');
}
var name = $("input:text").val();
var nLi = $("<li>").appendTo("ul");
nLi.text(name);
return false;
});
});
And please change
if ($(".product").checked = true) {
to
if ($(".product").checked == true) {
Try to use event.preventDefault() in your click event, for example:
$("#submit").click(function(e) {
e.preventDefault();
}
for more info about this jquery method event.preventDefault()
I have a form with a few input fields, I only want to show a div when all the input fields got content, when one of the input fields has no content the div should disappear again.
I made it work with one input field, but how do I get it to work when all the input fields are filled in (don't know if its a good clean way?):
$(function () {
$('input').change(function() {
$('.next').toggle($(this).val().length !== 0);
}); });
Fiddle:
http://jsfiddle.net/uQyH9/19/
Try this : http://jsfiddle.net/uQyH9/21/
$(function () {
var _cached=$('input');
_cached.change(function() {
if (_cached.filter(function (){return $(this).val().length }).length==_cached.length)
$('.next').show();
else
$('.next').hide();
});
});
You can use a filter function to check that all the input are filled.
Code:
$(function () {
$('input').change(function () {
$('.next').toggle($("input").filter(function () {
return this.value === "";
}).length === 0)
});
});
Demo: http://jsfiddle.net/IrvinDominin/DwF2P/
UPDATE
You can check the value of the elements by type by cheking type attribute.
Code:
$(function () {
$('input').change(function () {
$('.next').toggle($("input").filter(function () {
var myType=$(this).attr("type");
if (myType === "checkbox") return !$(this).is(":checked");
if (myType==="radio"){
var myName = $(this).attr("name");
if (myName==="") return !$(this).is(":checked");
return $('input[name='+ myName +']:checked').length===0
}
return this.value === "";
}).length === 0)
});
});
Demo: http://jsfiddle.net/IrvinDominin/pqJhg/
Loop over the inputs. If you find one that isn't filled in, then hide the DIV. If you don't, show the DIV.
$('input').change(function() {
var allFilled = true;
$('input').each(function() {
if (this.value === '') {
allFilled = false;
return false; // Terminate the loop
}
}
$('.next').toggle(allFilled);
});
I found this useful little method of displaying field titles within the text fields themselves.
http://viralpatel.net/blogs/2009/09/default-text-label-textbox-javascript-jquery.html
Only problem is that if the fields aren't completed by the user then the title values get submitted.
Could anyone tell me how to add a onsubmit check to make sure we don't submit default text?
This is the javascript:
$('input[type="text"]').each(function () {
this.value = $(this).attr('title');
$(this).addClass('text-label');
$(this).focus(function () {
if (this.value == $(this).attr('title')) {
this.value = '';
$(this).removeClass('text-label');
}
});
$(this).blur(function () {
if (this.value == '') {
this.value = $(this).attr('title');
$(this).addClass('text-label');
}
});
});
Many thanks...
Something like the following should work:
$('form').submit(
function(e){
$(this).find('input, select, textarea').each(
function(){
if ($(this).val() == this.title){
$(this).val(''); // removes the value
// or prevent form submission:
// return false;
}
});
});