Pass a variable from HTML to a JS file

Question

I'm trying to pass a value from a html page to a JS file.

HTML part:

<a href="#" id="pagejs_general_delete_wizardresultid"><i class=" icon-bin" ></i> Delete</a>

JS file:

$('#pagejs_general_delete_wizardresultid').on('click', function() {
        swal({
            title: "Are you sure?",
            text: "Are you sure you want to delete item with reference <wizardresultid here>? This can not be undone!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#EF5350",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel!",
            closeOnConfirm: false,
            closeOnCancel: false
        },
        function(isConfirm, wizardresultid){        
            if (isConfirm) {
                swal({
                    title: "Deleted!",
                    text: "The record has been deleted.",
                    confirmButtonColor: "#66BB6A",
                    type: "success"
                });
            }
            else {
                swal({
                    title: "Cancelled",
                    text: "Nothing has been changed.",
                    confirmButtonColor: "#2196F3",
                    type: "error"
                });
            }
        });
    });

I'm unsure how I can pass the variable wizardresultid from HTML to the javascript. I can find examples how to pass it a function from a button, but not how to do it from a link. Furthermore, I'm trying to display the wizardresultid in the text. Is that the correct way to do that:

text: "Are you sure you want to delete item with reference" + wizardresultid + "? This can not be undone!"

Thanks for your help!!!

I don't actually see any hint of a wizardresultid in your html. But possibly this is what you're looking for? : http://stackoverflow.com/questions/3273350/jquery-click-pass-parameters-to-user-function — Gimby, Nov 11 '15 at 12:13

score 6 · Answer 1 · answered Nov 11 '15 at 12:15

6

Recommended 'data' attribute. like

<a href="#" id="pagejs_general_delete_wizardresultid" data="your data"><i class=" icon-bin" ></i> Delete</a>

and access using:

var val = $('#pagejs_general_delete_wizardresultid').attr('data');

answered Nov 11 '15 at 12:15

Sanjay Kumar N S

4,653
4
23
38

Although this is a more user friendly way of doing it (because you can refrence the element using a user friendly name instead of an element ID), it doesn't actually answer the OPs question – Precastic Nov 11 '15 at 12:24

score 1 · Accepted Answer · answered Nov 11 '15 at 12:28

You shold use data-attribute in html, and get this in js with .attr().

$('#pagejs_general_delete_wizardresultid').on('click', function() {
    var myAttribute = $(this).attr('wizardresultid');
  
        swal({
            title: "Are you sure?",
            text: "Are you sure you want to delete item with reference "+myAttribute+"? This can not be undone!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#EF5350",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel!",
            closeOnConfirm: false,
            closeOnCancel: false
        },
        function(isConfirm, wizardresultid){        
            if (isConfirm) {
                swal({
                    title: "Deleted!",
                    text: "The record has been deleted.",
                    confirmButtonColor: "#66BB6A",
                    type: "success"
                });
            }
            else {
                swal({
                    title: "Cancelled",
                    text: "Nothing has been changed.",
                    confirmButtonColor: "#2196F3",
                    type: "error"
                });
            }
        });
    });

<a href="#" id="pagejs_general_delete_wizardresultid" wizardresultid="55"><i class=" icon-bin" ></i> Delete</a>

score 0 · Answer 3 · answered Nov 11 '15 at 12:13

a simple way would be to add it to your id and use a class for the on click event, then you could split the id.

something like:

//html
<a href="#" class="pagejs_general_delete_wizardresultid" id="result-1"><i class=" icon-bin" ></i> Delete</a>

//js
$('.pagejs_general_delete_wizardresultid').on('click', function() {
    var splitId = $(this).attr('id');
    splitId = splitId.split('-');
    var realId = splitId[1]

   //.....rest of your logic goes here
});

score -1 · Answer 4 · answered Nov 11 '15 at 12:18

-1

wizardresultid is the second parameter in the SweetAlert callback function. You cannot reference that parameter outside that particular callback function.

Instead you should be using $(this).attr('id') which gets the ID of the target element in the click callback function, as in:

text: "Are you sure you want to delete item with reference" + $(this).attr('id') + "? This can not be undone!"

answered Nov 11 '15 at 12:18

Precastic

3,742
1
24
29

This does not do what the OP is asking for. The OP want the last part of the element ID - not all the id. – Zakaria Acharki Nov 11 '15 at 12:55
@ZakariaAcharki If you look at the OPs code the "wizardresultid" he is referring to is the parameter in the callback function which if you look at the SweetAlert website is the full ID of the element. NOWHERE does he mention getting part of the ID. – Precastic Nov 11 '15 at 12:58
See the accepted answer please and you will anderstand. – Zakaria Acharki Nov 11 '15 at 13:49

Pass a variable from HTML to a JS file

4 Answers4