My Scenerio:
I have a function:
The function Addprocedure() is called on onclick of Addprocedure button.
In this function i want to check if btnAddSelectedProcedures is clicked then do Something else do nothing
function Addprocedure(){
if()// Check if Button is clicked, button id = `btnAddSelectedProcedures`
{
//Do Something
}
else{
//Do nothing
}
}
Save the state of the button in a variable.
Define btnClicked globally as false. When btnAddSelectedProcedures is clicked, change btnClicked to true. When you call Addprocedure check if btnClicked variable is true and if so, that button has been clicked.
Example:
var btnClicked = false;
function Addprocedure() {
if (btnClicked) {
//Do something...
} else {
//Do something else...
}
}
$('BUTTON[name="btnAddSelectedProcedures"]').click(function() {
btnClicked = true;
});
$('BUTTON[name="Addprocedure"]').click(function() {
Addprocedure();
});
Try
$('#btnAddSelectedProcedures').click(function(){
$(this).data('clicked', true)
})
then
function Addprocedure(){
if($('#btnAddSelectedProcedures').data('clicked')){
//clicked
} else {
//not clicked
}
}
It is simple, check id
function Addprocedure(){
if(this.id === 'btnAddSelectedProcedures')// Check if Button is clicked, button id = `btnAddSelectedProcedures`
{
//Do Something
}
else{
//Do nothing
}
}
One possiblity,
You can declare a global variable and mark it as true when yourbtnAddSelectedProcedures clicked and use that to check in your Addprocedure() function.
var isButton1Clicked =false;
onButton1Click{
isButton1Clicked ==true
}
onButton2Click{
if(isButton1Clicked){
//procedd
}
}
I suggest to avoid using global var. Use a class instead ( or You can set data-* attribute as well )
$('#btnAddSelectedProcedures').on('click', function(){
//$(this).toggleClass('clicked');
if(! $(this).hasClass('clicked') ){ //allows you to set only once the class
$(this).addClass('clicked');
}
Addprocedure();
});
then
function Addprocedure(){
if( $("#btnAddSelectedProcedures").hasClass('clicked') ) //I guess you can call $(this) too
{
//Do Something
}
else{
//Do nothing
}
}
I used toggleClass because I think you want to check every time if the user clicked .
Use addClass in the other way.
<button id="1" onClick="Addprocedure(this.id)">B1</button>
and then
function Addprocedure(clicked_id)
{
alert(clicked_id);
}
Related
I have a jQuery event inside a JavaScript function. I've already read that you cannot access the inner function. However, I would like to know how to adjust my code so that the parent function returns true or false depending on the jQuery function.
function validate() {
$("#button").on('click', function(){
var input = document.forms["formular"]["text"].value;
if (input == "") {
return false;
}
});
if(onclickfunction() == true){
return true;
}
else{
return false
}
}
validate();
Or can you recommend a different approach?
Not sure what this code is supposed to do, because calling validate only creates the event listener without actually executing it. But what you can do is to prevent the default action when you need, which is how validation is usually implemented:
$("#button").on('click', function(){
var input = document.forms["formular"]["text"].value;
yourSecondFunction(input !== "");
});
function yourSecondFunction(inputIsValid) {
// Do your magic here
}
I have two functions and i want to call one function when the radio button is checked as an employee and the other when the radio button is checked as a user.
employee.form.send = function() {
employee.validator.checkForm();
if (employee.validator.valid()) {
employee.form.submit();
}
};
invite.form.send = function() {
invite.validator.checkForm();
if (invite.validator.valid()) {
alert(1);
invite.form.submit();
}
}
I would normally call them with a click event like this
invite.find('#sendInviteButton').on('click',invite.form.send);
Now i want to call different functions when the #sendInviteButton is clicked. Depending on the radio button selected. How do i do that?
I am not able to call the invite.form.send inside an if condition.
If I understood correctly, you want to do something like this:
if($('#employee_radio_button').is(':checked'))
employee.form.send();
else
invite.form.send();
You could wrap the click into a function with jQuery like so, assuming your function names are "oneFunction" and "anotherFunction"..
$('#sendInviteButton').click(function() {
if ($('#sendInviteButton').is(':checked')) {
oneFunction();
} else {
anotherFunction();
}
});
what about binding the event to a function which checks the state of the ratio button and than depending on that call the proper functions accordingly? (Check code below)
invite.find('#sendInviteButton').on('click', checkState); // update the event binding
function checkState() {
if (document.getElementById('sendInviteButton').checked) {
// call function if #sendInviteButton is checked
} else {
// call other function
}
}
or in case you use jQuery:
function checkState() {
if($('#sendInviteButton').is(':checked')) {
// call function if #sendInviteButton is checked
} else {
// call other function
}
}
I have this code which asks a question; askQuestion()
which runs as the page loads and runs again when a button with id wb_option_button is clicked.
But I noted that at the first click, its runs well, but the second click never never run. I want to know what is wrong with it (in case), and how to do it work.
var q_selected;
var q_number = 1;
var questionDiv = $('.wb_questions');
var optionDiv = $('div#wb_options');
function askQuestion()
{
questionDiv.html(questions[q_number]['question']);
optionDiv.html('<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][0]+'</button>'+
'<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][1]+'</button>'+
'<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][2]+'</button>'+
'<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][3]+'</button>'
);
}
function checkAnswer(q_answer)
{
if(q_selected === q_answer)
{
return true;
}
}
function isCheckpoint()
{
if(checkpoints[q_number]!=null)
{
return true;
}
else
{
return false;
}
}
askQuestion();
$('button.wb_option_button').click(function(){
q_selected = $(this).text();
if(checkAnswer(questions[q_number]['answer'])===true)
{
if(isCheckpoint()===true)
{
showRank(q_number);
}
else
{
q_number+=1;
//alert(q_number);
askQuestion();
// showStage();
return q_number;
}
}
else
{
alert("You failed");
}
});
var questions is an object, var checkpoints ia also an object.
All of your buttons have the same ID. When you get an Element by id, it will only return the first element it finds with this id. If you want to get multiple elements you have to get them with another selector, ie. by className or any other means then by ID.
Edit : You are in fact selecting the buttons by className. The problem is that when you call askQuestion() again, the click listener is not added to the new buttons, so you might want to move the click event assignment inside askQuestion
Hope this helps.
After a little more digging, I arrived at this solution which works perfectly.
Thank you all for your help!!!
$('.wb_options').on('click','.wb_option_button',function(){
q_selected = $(this).text();
if(checkAnswer(questions[q_number]['answer'])===true)
{
if(isCheckpoint()===true)
{
showRank(q_number);
}
else
{
q_number+=1;
askQuestion();
alert(q_number);
// showStage();
//return q_number;
}
}
else
{
alert("You failed");
}
});
I am trying to add an else statement to this piece of javascript so that if a div-1 is clicked once it shows div-2 and if div-1 is clicked again it hides div-2.
Does anyone know how I could do this?
$(function() {
$('.div-1').click(function() {
$('.div-2').show();
return false;
});
});
Try toggle() instead:
$('.div-1').click(function() {
$('.div-2').toggle();
return false;
});
You can add a dummy class and check for it's exixtence.
$(function() {
$('.div-1').click(function() {
var $this = $(this),
$div2 = $('.div-2');
if($this.hasClass('open')) {
$this.removeClass(open');
$div2.hide();
} else {
$this.addClass(open');
$div2.show();
}
return false;
});
});
I totally agree with Jason P's answer that you should be using toggle instead, but in case you actually needed to use an if statement, you can do this:
$('.div-1').click(function() {
if ($('.div-2').is(':visible')) {
$('.div-2').hide();
} else {
$('.div-2').show();
}
return false;
});
jsFiddle
I have a problem with javscript. I was wonder is it possible to create something like this in javascript:
<script>
function all_is_filled(){
if($('input[type=checkbox]').checked && document.getElementById('text_field').value!="" )
{
//do something...
}
}
</script>
So when someone check checkbox and fill text_field then this do something...Is there a way to do it?
This will work:
function all_is_filled() {
if ($('input[type=checkbox]').prop('checked') == true && $('#text_field').value != "") {
//do something...
}
};
$('#myform').on('change', function () {
all_is_filled()
});
I added a listen function to call all_is_filled() on change, but you can also put it onsubmit.
Simple demo HERE