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?

WizardCoder · Accepted Answer · 2017-09-25 22:09:15Z

4

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>

edited Sep 25, 2017 at 22:09

answered Sep 25, 2017 at 19:57

WizardCoder

3,48111 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adders Over a year ago

Thanks. It only seems to work for one of the forms - as i said, I have multiple, all the same but just with a different datavalue

Adders Over a year ago

Works perfectly. Thank you - just need to understand it now! :)

Christian4423 · Accepted Answer · 2017-09-25 20:56:26Z

0

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 (i.e. no jQuery)

edited Sep 25, 2017 at 20:56

answered Sep 25, 2017 at 20:50

Christian4423

1,8072 gold badges16 silver badges26 bronze badges

Collectives™ on Stack Overflow

Passing a data value from HTML to JS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related