jquery variable from one function to another function?

Question

I have 2 functions where I'm looking to pass a variable called "url" to the second function.

The first function gets an href attribute from the value of "url" as it spits out of my database and is a trigger to open a modal window.

 <a class=\"trigger3\" url=\"".$url."\" href=\"#\">

The function looks like this.

 <script type="text/javascript">
 $(document).ready(function(){
    $(".trigger3").click(function(){
            var url=$(this).attr("url");
            $(".panel3").toggle("fast");
            $(this).toggleClass("active");
            return false;
    });
 });
 </script>

I have confirmed that the variable is there.

The second function is supposed to capture this variable and return it along with submitting form data.

Here is the second function.

 <script type="text/javascript">
 function submitForm2() {
    $.ajax({type:'POST', url: 'flagadd.php', data:$('#flagProxy').serialize()+'&url=url', success: function(response) {
    $('#flagProxy').find('.form_result2').html(response);
}});

return false;
 } 
 </script>


 <div class="panel3">
 <form id="flagProxy" onsubmit="return submitForm2();">
 <textarea style="resize:none" name="flag" cols="25" rows="5"></textarea>
 <input type="hidden" name="url" />
 <br>
 <input type="submit" name="submit" value="Submit" />
 <input type="button" name="cancel" value="Cancel" class="trigger3" />
 <div class="form_result2"></div>
 </form>
 </div>

I've been trying to figure this out for a few days but I'm not sure what to do. I'm thinking either call one function from within a function or somehow make the variable global to both functions.

Thanks for any help you can offer, it is much appreciated and I could use a good nights sleep :)

Answer 1

You can call one function from the other passing the value as a parameter but if both functions are event-triggered then I'll use a global variable to save that value:

 <script type="text/javascript">

 var global;

 $(document).ready(function(){
    $(".trigger3").click(function(){
            var url=$(this).attr("url");
            $(".panel3").toggle("fast");
            $(this).toggleClass("active");
            global = 3;
            return false;
    });
 });

function submitForm2() {
    console.log(global); // 3
    $.ajax({type:'POST', url: 'flagadd.php', data:$('#flagProxy').serialize()+'&url=url', success: function(response) {
    $('#flagProxy').find('.form_result2').html(response);
}});

return false;
}

 </script>

Answer 2

Don't just make up HTML attribute names. If you want to store data, use the HTML5 data-* attributes—eg, data-url="..." instead.

If you just want to send it as part of a form, why not just have a hidden field in the form and update it?

<input type="hidden" name="url">

+

var url = $(this).data('url');  // jquery understands HTML5 data-* attributes too
$('#flagProxy input[name=url]').val(url);

Even better, instead of a link, just use a button inside the form with a value.

<input type="submit" name="url" value="...">

(I'd use <button> , but older IE is really dumb and doesn't correctly handle sending its form value.)