Passing a data value from HTML to JS

Question

I'm displaying multiple forms and need to pass a value so I know which uploaded item belongs to which form.

I need to pass a data value from my HTML form to a jquery script.

I have the following code - you can see the data value i've included as data-uploadValue="some-value" as well as in the script as {{ data-uploadValue}}

 function uploadFile() { var file = _("file1").files[0]; // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new FormData(); formdata.append("file1", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "/upload/{{ data-uploadValue }}"); // ajax.send(formdata); } 

 <form id="upload_form" enctype="multipart/form-data" method="post"> <div class="file has-name is-fullwidth is-info"> <label class="file-label"> <input class="file-input" type="file" name="file1" id="file1" value="test_value" data-uploadValue="some-value" onchange="uploadFile()"><br> <span class="file-cta"> <span class="file-icon"> <i class="fa fa-upload"></i> </span> <span class="file-label"> Choose a file… </span> </span> <span class="file-name"> <div style="color:red;" id="status"></div> Supported file types: .png, .jpg, .jpeg and .gif </span> </label> <div style="display:none"> <p id="loaded_n_total"></p> <progress id="progressBar" class="progress" value="0" max="100" style="width:300px;"></progress></div> </div> </form> 

How can I achieve this?

Answer 1

You can get the data attribute of a html element by using $('.file-input').data('uploadValue'); or $('.file-input').attr('data-uploadValue');

EDIT

You can try passing the element to the function with this and then in the function use .getAttribute("data-uploadValue") . That will give you the data attribute of the element that called the function.

 function uploadFile(element) { var file = _("file1").files[0]; // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new FormData(); formdata.append("file1", file); var ajax = new XMLHttpRequest(); var uploadValue = element.getAttribute("data-uploadValue"); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "/upload/" + uploadValue); // ajax.send(formdata); } 

 <form id="upload_form" enctype="multipart/form-data" method="post"> <div class="file has-name is-fullwidth is-info"> <label class="file-label"> <input class="file-input" type="file" name="file1" id="file1" value="test_value" data-uploadValue="some-value" onchange="uploadFile(this)"><br> <span class="file-cta"> <span class="file-icon"> <i class="fa fa-upload"></i> </span> <span class="file-label"> Choose a file… </span> </span> <span class="file-name"> <div style="color:red;" id="status"></div> Supported file types: .png, .jpg, .jpeg and .gif </span> </label> <div style="display:none"> <p id="loaded_n_total"></p> <progress id="progressBar" class="progress" value="0" max="100" style="width:300px;"></progress></div> </div> </form> 

Answer 2

Using Jquery it is super easy.

You can use any selector to select something, you call the $(".class").data() method.

$("[data-attr]").data() => returns js object

note, you can use specific attributes for selectors as well, omit the parentheses.

$("[data-action=getData]").data() => returns js object

<div id="id" data-key="value"></div>

$("#id").data().key => returns the value of the data-*

Please refer to this article if you have to use Vanilla Javascript (ie no jQuery)