Passing a variable to jQuery function

Question

I know this is probably simple but I have read and tried a bunch of answers on here and I cannot figure it out. How do I pass the variable 'booklink' to the jQuery function?

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btns = document.querySelectorAll('.ebtn');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal 
[].forEach.call(btns, function(btn) {
    btn.onclick = function(event) {
        modal.style.display = "block";
        var booklink = jQuery(this).attr("data-id");
        console.log(booklink);
        // on submit open book link
        jQuery('#mc4wp-form-1').submit(function () {
                window.open(booklink);
        })
    }
})
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Can you show us what booklink looks like when it is logged? — Ben Steward
– Ben Steward, Commented Jul 19, 2018 at 0:02
Why are you using things like onclickand document.querySelectorAll() when you're using jQuery? $(".ebtn").click(function(event) { ... }) — Barmar
– Barmar, Commented Jul 19, 2018 at 0:04
Also not likely that target will be modal itself when anything inside the modal is clicked — charlietfl
– charlietfl, Commented Jul 19, 2018 at 0:19
Why do you need to pass booklink to a jQuery function? It looks like you're passing it to window.open() correctly. — Barmar
– Barmar, Commented Jul 19, 2018 at 0:19

user7193487 · Accepted Answer · 2018-07-19 01:52:48Z

From what I can see you are using a mix of jQuery and vanilla javascript, this is not a bad thing but it can make things confusing in the future, try to stick to one style (i.e. jQuery OR vanilla javascript NOT both).

From what I can see from your code, your code should work as is since you're declaring the 'booklink' variable before the submit is called.

I've gone ahead and tidied up your code to match all jQuery and modified it slightly which should assist in passing the 'booklink' value.

// Get the modal
var modal = jQuery("#myModal");//return matching elemetns id(s) of #myModal

// Get the button that opens the modal
var btns = jQuery('.ebtn');//return matching elements with class(es) of .ebtn

//Declare booklink out of the event
var booklink = "";
$('.ebtn').on('click', function(event){
    modal.css('display','block');

    //Update booklink when processing the click event
    booklink = jQuery(this).attr("data-id");

    //Call the function to submit the form and open a new window
    openBookLink(booklink);
});

// When the user clicks on <span> (x), close the modal
$('.close').on('click', function(){
    modal.css('display','none');
})

// When the user clicks anywhere outside of the modal, close it
$(window).on('click', function(event) {
    if (event.target == modal) {
        modal.css('display','none');
    }
});

function openBookLink(booklink){    
    jQuery('#mc4wp-form-1').submit(function () {
        //This should match what booklink was set to above
        window.open(booklink);
    })
}

The main changes are declaring the booklink variable outside of the event and defining it's value when you process the click event, which it's then passed to a function.

This solved the issue. I am still really new to javascript and especially jQuery so I end up piecing together what I know a lot. Thanks for all the notes, this really helps me learn.

Collectives™ on Stack Overflow

Passing a variable to jQuery function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related