$(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()
Related
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;
});
});
I was doing this. and i was doing pretty ok with the tutorial i am doing the validation for form like this
<script>
jQuery(document).ready(function() {
jQuery("#formID2").validationEngine('attach', {
onValidationComplete: function(form, status) {
alert("The form status is: " + status + ", it will never submit");
}
})
});
</script>
I am wondering how to make the validation using button click.. I want to remove the submit form and i want to put the validation on button click. Any suggestion is appreciated
$("#Button1").click(function () {
var valid = $("#form1").validationEngine('validate');
var vars = $("#form1").serialize();
if (valid == true) {
alert("Hi");
} else {
$("#form1").validationEngine();
}
});
Try this one i got it from here it worked for me!
When Button type is == Submit then use follwing code,
$("#FormId").validationEngine({
onValidationComplete : function(form, status) {
if (status) {
alert("Hi");
}
return false;
},
scroll : false,
});
I'm trying to make a boolean change in this value by using a function. I tried it this way:
var itemInStock = false;
$("#button").click(function(){
itemInStock = true
}
if( itemInStock === false){
document.write("item is out of stock");
} else{
document.write("item is in stock");
}
I understand why it's not working but I can't find a way to solve this!
I just can guess what you're trying to achieve. It seems like you wanna check at some point, if item is currently in stock. Since you can't know when the click will occur, one solution could be periodically checking the value.
(function () {
var itemInStock = false;
$("#button").click(function () {
itemInStock = true
});
window.setInterval(function () {
if (itemInStock === false) {
console.log("item is out of stock");
} else {
console.log("item is in stock");
}
}, 500);
})()
http://jsfiddle.net/Ttu5N/
Tell me, if I'm wrong with my guessing.
Update: way easier approach
$(function () {
var $state = $('#state');
$state.text('item is out of stock');
$("#button").click(function () {
$state.text('item is in stock');
});
})
<button id="button">click me</button>
<div id="state"></div>
http://jsfiddle.net/Wb3ET/
Just do it directly on click.
because itemInStock doesn't get changed until the button is clicked...
You cannot use document.write after load and is also not necessary also the Boolean changes when the button is clicked and not before
Create a span with id="status" and have
var itemInStock = false;
$(function() {
$("#button").click(function(){
itemInStock = true;
$("#status").html("item is in stock":
}
$("#status").html(itemInStock?"item is in stock":"item is out ofstock");
});
// HTML
<div id="status">item is out of stock by default</div>
// JS
var itemInStock = false;
$("#button").click(function(){
itemInStock = true;
}, changeStatus());
function changeStatus(){
if( itemInStock === false){
$('#status').html("item is out of stock");
} else{
$('#status').html("item is in stock");
}
}
Im having problem altering jQuerys beforeunload() functionality, depending on user actions.
$(document).ready(function() {
$(window).bind('beforeunload', function() {
if (billChanged == false) {
return false;
}
else if ( savebutton was clicked ) {
return false;
}
else {
return "refreshing page without saving, huh? you're a bad boy!";
}
});
});
The issue im having, that i can't come up with a way to check if 'savebutton' was clicked, as typed in else if clause in the snippet above.
The form itself is quite complicated, and i'm not able to alter it that much.
$(document).ready(function() {
var not_saved = true;
$('#saveButtonId').on('click', function() {
not_saved = false;
})
$(window).on('beforeunload', function() {
if (not_saved && billChanged)
return "refreshing page without saving, huh? you're a bad boy!";
}
});
});
you can define a global variable. Change it's value onclick of the button, and then check it in your function
var clickedButton = false;
Then your html
<input type="button" .... onclick="clickedButton=true;">
and then in your function
else if ( clickedButton ) {
return false;
}
$(function () {
$('#form4').submit(function () {
var val = $("#txtNewServiceTypeCategory").val();
$("#ServiceTypeCategoryName").children("option").each(function () {
var $this = $(this);
if (val == $this.val()) {
alert("ServiceTypeCategory Name is already added! Please Choose Differnt Category Name");
return false;
}
});
$('#someHiddenDiv2').show();
$('#STSave').attr('disabled', 'disabled');
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
$('#someHiddenDiv2').hide();
alert('Saved NewServiceTypeCategory Successfully. Thank you!');
},
error: function () {
alert('Error occured! Plese try again later!.');
$('#someHiddenDiv2').hide();
$('#STSave').removeAttr('disabled');
}
});
return false;
});
});
This return false is not working in the above code even if its showing the popup message other things are executing here,
$("#ServiceTypeCategoryName").children("option").each(function () {
var $this = $(this);
if (val == $this.val()) {
alert("ServiceTypeCategory Name is already added! Please Choose Differnt Category Name");
return false;
}
});
What I am doign wrong in this?
Thanks
the return false; in the each loop only breaks the loop, it doesn't return from your submit function, so the rest of your submit function will keep running.
You could set a variable in the loop as to whether to continue the submit and after the loop you could then check whether you need to submit or not.
var exitSubmit = false;
$("#ServiceTypeCategoryName").children("option").each(function () {
var $this = $(this);
if (val == $this.val()) {
exitSubmit = true;
return false;
}
});
if (exitSubmit) {
alert("ServiceTypeCategory Name is already added! Please Choose Differnt Category Name");
return false;
}
You're only exiting the function that starts on line #1 (in your second code block) which will then cause the next line executed to be where you show your hidden div.