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";
    }
}

Answer 1

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 (ie 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.