jQuery first click addClass, second click redirect - javascript

I am trying to build a temporary (and fake) form validation.
On the form, if you click submit the first time, it adds a class of ".error" and a span to the required inputs. If you click submit again, I want it to redirect to another page.
I can't seem to figure out how to have two different functions on the same submit button. The first click needs to add a class, the second click should redirect.
Here's my code:
if($("button").hasClass('redirect')){
$("button").click(function(){
window.location.href="index.html";
});
} else {
$("button").click(function(){
$(this).addClass("redirect");
$("input:required").addClass('error');
$("<small class=error>Invalid entry.</small>").insertAfter("input:required");
});
}

you can do like this:
$("button").click(function(){
if(!$(this).hasClass('redirect'))
{
$(this).addClass("redirect");
$("input:required").addClass('error');
$("<small class=error>Invalid entry.</small>").insertAfter("input:required");
}
else
{
window.location.href="index.html";
}
});

maybe you should just use the same function? something like that :
$("button").click(function(){
if($("button").hasClass('redirect')){
window.location.href="index.html";
} else {
$(this).addClass("redirect");
$("input:required").addClass('error');
$("<small class=error>Invalid entry.</small>").insertAfter("input:required");
});
}

$("button").click(function(){
if($("button").hasClass('redirect')){
window.location.href="index.html";
} else {
$(this).addClass("redirect");
$("input:required").addClass('error');
$("<small class=error>Invalid entry.</small>").insertAfter("input:required");
}
});

Related

Show/hide a select field on Edit page, based on database value

In one of "Add product" page, I've select field that shows/hides based on what we select on another select field. This is the code:
$(function() {
$('#warranty_periods').show();
$('#warranty_type').change(function(){
if($('#warranty_type').val() == '1') {
$('#warranty_periods').show();
} else {
$('#warranty_periods').hide();
}
});
});
My problem is how to hide it on the edit page if "warranty_type" was other than '1' while adding the product.
Thanks
If you want the same logic to be invoked when the page loads, then do exactly that. For example, you can define a function that you would use for the event you currently have as well as be immediately invoked. Something like this:
$(function() {
var toggleWarrantyPeriod = function(){
if($('#warranty_type').val() == '1') {
$('#warranty_periods').show();
} else {
$('#warranty_periods').hide();
}
};
toggleWarrantyPeriod();
$('#warranty_type').change(toggleWarrantyPeriod);
});
Try to logout the value of warranty_type using
console.log($('#warranty_type').val());
Check if you are getting the desired value

OR condition for running function

I have button (".moreAlertsBtn") that run function when user click on it
I would like to run the same function if user click on another button that contain the id "#alertsBtn"
how do I add OR condition?
$(document).on('click','.moreAlertsBtn',function() { }
also - inside the function, can i add contision if user click on the first button and another if he click on the second?
Just separate them using comma(,) like this:
$(document).on('click','.moreAlertsBtn, #alertsBtn',function() { });
can i add condition if user click on the first button and another if
he click on the second?
$(document)
.on('click','.moreAlertsBtn, #alertsBtn',function() {
if($(this).hasClass('moreAlertsBtn')) {
//.moreAlertsBtn clicked
} else {
//#alertsBtn clicked
}
});
how do I add OR condition?
You can use the comma, which in CSS is "or" (but keep reading):
$(document).on('click','.moreAlertsBtn, #alertsBtn',function() { });
But:
also - inside the function, can i add contision if user click on the first button and another if he click on the second?
If you're going to do that, then it makes more sense to use separate handlers:
$(document).on('click','.moreAlertsBtn',function() { });
$(document).on('click','#alertsBtn',function() { });
But answering the question, yes, you can tell like this:
if (this.id === "alertsBtn") {
// It's #alertsBtn
} else {
// Must be .moreAlertsBtn
}
E.g.:
$(document).on('click','.moreAlertsBtn, #alertsBtn',function() {
if (this.id === "alertsBtn") {
// It's #alertsBtn
} else {
// Must be .moreAlertsBtn
}
});
That works because jQuery will call your handler with this referring to the DOM element you "hooked" the event on (even when you're actually doing delegation, as you are in your examples).
You can use comma in-between selectors as follows :
$(document).on('click','.moreAlertsBtn,#alertsBtn',function() { }

Cannot Click button when table row with button is appended

https://jsfiddle.net/r7a2r9eL/
$('#insertBtn').click( function(){
$('#mytable > tbody:last-child').append('<tr><td>'+$('#fnameText').val()+'</td><td>'+$('#lnameText').val()+'</td><td>'+$('#pointText').val()+'</td><td><button type="button" class="deleteClass">Delete</button></td></tr>');
$('#textTable input').val('')
});
$(".deleteClass").on("click",function() {
alert('row deleted');
});
Try typing anything into the textboxes. Then click on the insert button.
Then click on the delete button on the first column. Notice the alert didn't trigger even though the button has the intended class
What is wrong with my code?
What you are looking for is event delegation:
Use this:
$(document).on('click','.deleteClass',function()
{
//DELETE CODE HERE.
});
You can use this one instead:
$("#mytable").on("click",'.deleteClass',function() {
alert('row deleted');
});

javascript confirm() not working

This is the code that is not working... It just deletes the form without first prompting.
$(".delete").click(function () {
if(confirm('You honestly want to delete that student?')){
return deleteForm(this, "form");
} else {
return false;
}
});
See it all here: http://jsfiddle.net/broinjc/wR256/
Working fiddle
For those that haven't noticed, the first form can not be deleted (as intended), be sure to create a new form if you want to test the delete action.
You have two click handlers for the delete button. The first looks like this:
$(row).find(".delete").click(function () {
return deleteForm(this, prefix);
});
Change that to:
$(row).find(".delete").click(function () {
if(confirm('You honestly want to delete that student?')){
return deleteForm(this, "form");
} else {
return false;
}
});
Then remove the second click handler (the one shown in the question)
Try the following:
$(".delete").on('click', function () {
if(confirm('You honestly want to delete that student?')){
deleteForm(this, "form");
}
});
Your problem because you've created one more element a (class="delete") at the same position with the currently element a.
Just remove this line and your code work fine:
$('.item fieldset').append('<a id="del" class="delete button alert tiny" href="#" style="position: absolute; top: 8px; right:0;">X</a>');

JQuery - also trigger change on click away

I have a basic JQuery script that changes a few divs when you click - thus showing them - via toggle.
<script type="text/javascript">
$('#content_display').click(function() {
$(this).toggleClass('selected');
$('#content_display_selector_container').toggle();
});
</script>
However - to call the even you need to click only on the first main div with the ID of "content_display".
My question is this: how can I hide these changes using JQuery if the user also clicks on BODY - i.e. if you click away, the divs go back to their original hidden state?
Thanks for helping a JQuery clutz!
Something like this should work:
$('body').click(function(e) {
if (!$(e.target).is('#content_display')) {
$('#content_display').removeClass('selected');
$('content_display_selector_container').hide();
}
});
Hey - found a way to do this - does anyone think there's a better way?
Here's the result:
<script type="text/javascript">
var mousetrap = false;
$('body').click(function() {
if (mousetrap == false) {
$('#content_display').removeClass('selected');
$('#content_display_selector_container').hide();
}
});
$('#content_display').hover(function() {
mousetrap = true;
},function(){
mousetrap = false;
});
$('#content_display').click(function() {
$(this).toggleClass('selected');
$('#content_display_selector_container').toggle();
});
</script>

Categories