Is it possible to prevent page change from Href on specific conditions? - javascript

As the title said, Is it possible to prevent page change from Href for a specific condition.
For example; if i have a div
<div href="#nextpage.html">Click me</div>
Is it possible to set a if statement to only allow a certain condition for this div to go to the nextpage??
For example
var canclick ="can_click";
if(canclick=="can_click"){
// Then allow the href to process to the next page.
} else {
// Have an alert up to say that the user can not proceed to the next page. And prevent the href to move to the next page.
}
Edit
$("#anchor").on('click', function(e) {
alert("clicked2");
})
Edit:
The only way the click event is
function clicked(){
alert(detected);
}
Edit:
I also just tried these. None of the alert gets called.
if($("#anchor").data('clicked'))
{
alert("again clicked");
}
$("#anchor").on('click', function(e) {
var $this = $(this);
if($this.data('clicked')) {
alert("clicked");
}
})

Here is a very simple example. The click function is not triggered if the initial condition is met (i = 0). Then, click the link again, and i != 1, so the normal <a> navigation is allowed to proceed.
i = 0;
$(document).on('click', 'a', function(e) {
if (i == 0) {
e.preventDefault();
alert('i = 0');
} else {
alert('i = ' + i);
}
i++;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Stackoverflow

If you are using jQuery you do something similar:
$(document).ready(function() {
$("a").click(function(e) {
if ($("#enable").is(":checked")) {
window.location = e.href;
} else {
e.preventDefault();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input id="enable" name="check" type="radio" value="Enable" />Enable
<br>
<input id="disable" name="check" type="radio" value="Disable" />Disable
<br/>
Stackoverflow
</body>

Related

Checkbox on change is not firing

I got a check box on the html page as:
<input type="checkbox" id="chk-info" name="chk-info" />
when I try to write an on change event and run, it's not getting fired. Instead if, I place an alert message before the function it is firing fine.
alert('blah');
var sth = function(){
function m(){
$("input[type='checkbox']").click(function (e) {
if ($(this).is(':checked')) {
alert("true");
} else {
alert("false");
}
});
}
return{ m:m};
};
I have tried using the id selector as well, but with not much luck.
Can anyone help me in pointing where the issue is?
EDIT: When I place the check box checked function outside the above function it works well with 'onchange' event attached on the <input> tag
Put the onclick event of the checkbox on page load.
$(document).ready(function () {
$("input[type='checkbox']").click(function (e) {
if ($(this).is(':checked')) {
alert("true");
} else {
alert("false");
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="checkbox" id="chk-info" name="chk-info" />
<label for="chk-info">label</label>
$(document).ready(function () {
$("input[type='checkbox']").click(function (e) {
if ($(this).is(':checked')) {
$(this).val("true");
} else {
$(this).val("false");
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="checkbox" id="chk-info" name="chk-info" />
<label for="chk-info">label</label>

Click on div with javascript or jquery

I have a clickable div and I want to some how with javascript or jquery to be able to click on it automatically.
My div is like this:
<div style="display:none;" id="button">Hello</div>
That is click able div when display changed to block I need some script to do that for me.
I need some script like, when it sees that div display changed to block then script must click on div id="button"
I have tried this but this is not for that as I searched on google
<script type="text/javascript">
$(document).ready(function(){
$('#button').trigger('click');
});
</script >
Here is an example in JS:
<div style="display:none;" id="button">Hello</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('button');
button.addEventListener('click', function() {
this.style.display = 'block';
})
if (button.style.display === 'block') {
button.click()
}
});
</script >
Update:
If you need to click on button after some javascript actions, just add there following lines:
if (button.style.display === 'block') {
button.click()
}
Update2:
In the provided page I found the method to show mentioned div:
function startChecking() {
secondsleft -= 1e3,
document.querySelector(".load_stream").innerHTML = "Please Wait.. " + Math.abs(secondsleft / 1e3) + " Seconds",
0 == secondsleft && (clearInterval(interval),
$(".reloadframe").show(),
document.querySelector(".load_stream").style.display = "none",
$("#btn_play_s").show()
//You need to place it here, after "show" div will be displayed
// and display will have value "block"
)
}
So you can replace last line with $('#btn_play_s').show().click() instead of $('#btn_play_s').show(), it will be enough.
Simply use $('#button').click(); every where you want.
If you want to trigger this event when button display changed first you need create an event for this (because Jquery don't have on display changed event).
And then trigger it's your self:
$('#button2').on('click',function(){
$('#button')
.css('display','block')
.trigger('isVisible');
});
$('#button').bind('isVisible',function() {
alert('Clicked...!');
});
$(function(){
$('#button').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button2" value="display the button"/>
<div style="display:none;" id="button">Hello</div>

How to fire change event in jQuery

I have a UserControl placed in aspx page in asp.net. In this UserControl, I have a RadioButtonList and on change of RadioButtonList item, I want to execute the below jQuery function.
$('#rdlUser').change(function (e) {
alert("change function");
var radioBtnId = this.id;
var $this = $(this);
radconfirm('Are you sure you want to take leave?', function(arg){
if (arg == true) {
alert("User wants to take leave");
}
else {
alert("User doesn't want to take leave");
}
});
});
For execute an event you can use trigger("eventname") function with JQuery.
Example
$("#id").keypress(function(){
console.log("input keypress");
});
$("#btn").click(function(){
$("#id").trigger("keypress");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="id"> <button id="btn">Trigger keypress event</button>
UPDATE
With generated HTML you can't trigger event by using $("#generatedid") because element is not in the DOM at the first load.
You can use :
$(document).on("change",".your-radio-button-class",function(){
//Make a test on the value of the select radio
if($(this).val() == "connected")
{
}
else
{
}
});
Simply you can do like this:
$(document).ready(function () {
$('#rdlUser input').change(function () {
alert($(this).val());
});
});

Need to enable/disable a button on click of checkbox

I am trying to disable a order button when the page loads and enable it when one checks the Terms and condition checkbox. I have it working where the order button is disabled when the page loads but on the click of checkbox the button doesnt get enabled. Here is my code. Can anyone help me identify the problem
<input type="checkbox" id="checkbox1" name="checkbox1" class="required" />Please read the Terms and Conditions
Jquery Code
var j$ = jQuery.noConflict();
j$(document).ready(function(){
alert("Hi");
if(j$('input[name="checkbox1"]').not(":checked"))
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
j$('#checkbox1').change(function(){
if(j$('input[name="checkbox1"]').is(":checked")
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
}
});
Thanks
Prady
The code you provided had some missing ( and {, here is an updated version with some changes to handle the checkbox state properly:
var j$ = jQuery.noConflict();
j$(document).ready(function() {
var checkbox1 = j$('#checkbox1');
var order = j$('input[name="Order"]');
var verifyChecked = function() {
if (checkbox1.is(":checked") === false) {
order.attr('disabled', 'disabled');
} else {
order.removeAttr('disabled');
}
};
verifyChecked();
checkbox1.change(verifyChecked);
});
Here is a jsfiddle with it working:
http://jsfiddle.net/7uRf6/4/
You have missed a closing parenthesis
if(j$('input[name="checkbox1"]').is(":checked")
should be
if(j$('input[name="checkbox1"]').is(":checked"))
Also you can use an id selector instead of this attribue selector.
And if you want to enable the button when the checkbox is checked you have to
if(!j$('input[name="checkbox1"]').is(":checked"))
in your change event,
if(j$('input[name="checkbox1"]').is(":checked")
it should be
if(j$('input[name="checkbox1"]').not(":checked")
I suggest you to create a function to check it.
var j$ = jQuery.noConflict();
j$(document).ready(function(){
ToggleButton();
j$('#checkbox1').change(ToggleButton);
});
function ToggleButton()
{
if(j$('input[name="checkbox1"]').not(":checked"))
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
}
<script src="jquery.js"></script>
<script>
$(document).ready(function (){
$('#ch').click(
function (){
if($(this).is(':checked')){
$('#bt').attr('disabled','disabled');
}
else {
// remove
$('#bt').removeAttr('disabled');
}
}
)
})
</script>
<input type="button" value="button" id="bt"/>
<input type="checkbox" id="ch"/>

How do I check if a checkbox is checked with JQuery?

I am trying to allow a click function if the user has checked a checkbox on the page. Otherwise, I want to add a class to the #additional_foreign button.
I think I am close, but it doesn't seem to be working.
Here is my code:
if($('#foreign_checkbox').attr('checked')) {
$('#additional_foreign').click(function() {
alert('This click function works');
});
} else {
$('#additional_foreign').addClass('btn_disable');
}
When I check the checkbox, it doesn't allow the click function and when I uncheck the checkbox, it also doesn't add the class as it should.
What am I doing wrong?
EDIT:Here is my HTML for clarification.
<input id="foreign_checkbox" type="checkbox" />
<span id="additional_foreign">Click Me</span>
try using $('#foreign_checkbox').is(":checked") - rest of the code looks fine
If this was my code I'd do something like this to make it work:
<input id="foreign_checkbox" type="checkbox" />
<span style='display:none' id="additional_foreign">Click Me</span>
<script type="text/javascript">
$(document).ready(function() {
$("#foreign_checkbox").click(function() {
if($('#foreign_checkbox').is(':checked')) {
$('#additional_foreign').show();
} else {
$('#additional_foreign').hide();
}
});
$('#additional_foreign').click(function() {
alert('This click function works');
});
});
</script>
The problem is that the code doesn't run continually, only when the page loads, when all the boxes are unchecked. You need an action that fires when the box is checked or unchecked, which adds an action or a class to the button:
$('#foreign_checkbox').change(function(){
if (this.checked){
$('#additional_foreign').click(function() {
doSomething();
});
} else {
$('#additional_foreign').addClass('btn_disable');
}
});

Categories