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!!!

Answer 1

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');

Answer 2

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> 

Answer 3

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

Answer 4

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!"