How to set parameter values to a "onClick" function using javascript or jquery

Question

I am trying to set parameters to onClick event inside a html button using javascript.

This is how html button looks like:

<button type="button" id="upload-button" onclick="uploadFileIGCSE('param1', 'param2', 'param3')" class="btn btn-success" aria-expanded="false">Upload</button>

param1 = should be the value from a html select element with id='year' and name='year'

param2 = should be the value from a html select element with id='grade' and name='grade'

param3 = should be the value from a html select element with id='subject' and name='subject'

These are the html select options

<div class="col-md-3">
    <select id="year" name="year" class="form-control">
        <option value="select" disabled="disabled">- Select Year -</option>
        <option value="1">2001</option>
        <option value="2">2002</option>
        <option value="3">2003</option>
    </select>
</div>

<div class="col-md-3">
    <select id="grade" name="grade" class="form-control">
        <option value="select" disabled="disabled">- Select Grade -</option>
        <option value="1">Grade 5</option>
        <option value="2">Grade 6</option>
        <option value="3">Grade 7</option>
    </select>
</div>

<div class="col-md-3">
    <select id="subject" name="subject" class="form-control">
        <option value="select" disabled="disabled">- Select Subject -</option>
        <option value="1">Edexcel</option>
        <option value="2">National</option>
        <option value="3">Other</option>
    </select>
</div>

I have no clue how to set values to param1, param2, param3

This is what I tried but it feels wrong.

$('#upload-button').val = $('#year').val;

Can someone please help me?

I need to set values for the parameters (param1, param2, param3) in the function uploadFileIGCSE('param1', 'param2', 'param3') using javascript or jquery

Thank you

You should wrap the function in a new anonymous function: onclick="function(){ uploadFileIGCSE('param1', 'param2', 'param3'); }" fnName() will call the function once and whatever that function returns will be bound as onclick handler. — Luuuud
– Luuuud, Commented May 20, 2019 at 14:10
I don't quite get what you are trying to say @LuudJacobs. Can you come up with an example? — Jananath Banuka
– Jananath Banuka, Commented May 20, 2019 at 14:12

Deep · Accepted Answer · 2019-05-20 14:30:43Z

I can understand your needs. if you really wanted to do this only with HTML element, here is the way.

<button type="button" id="upload-button" 
    onclick="uploadFileIGCSE(
             document.querySelector('#year').value, 
             document.querySelector('#grade').value, 
             document.querySelector('#subject').value)" 
    class="btn btn-success" aria-expanded="false">Upload</button>

Here is the working example

function uploadFileIGCSE(val1, val2, val3){
  document.querySelector('#log').innerHTML = `${val1}, ${val2}, ${val3}`
}

<div class="col-md-3">
    <select id="year" name="year" class="form-control">
        <option value="select" disabled="disabled">- Select Year -</option>
        <option value="1">2001</option>
        <option value="2">2002</option>
        <option value="3">2003</option>
    </select>
</div>

<div class="col-md-3">
    <select id="grade" name="grade" class="form-control">
        <option value="select" disabled="disabled">- Select Grade -</option>
        <option value="1">Grade 5</option>
        <option value="2">Grade 6</option>
        <option value="3">Grade 7</option>
    </select>
</div>

<div class="col-md-3">
    <select id="subject" name="subject" class="form-control">
        <option value="select" disabled="disabled">- Select Subject -</option>
        <option value="1">Edexcel</option>
        <option value="2">National</option>
        <option value="3">Other</option>
    </select>
</div>

<button type="button" id="upload-button" 
        onclick="uploadFileIGCSE(
                 document.querySelector('#year').value, 
                 document.querySelector('#grade').value, 
                 document.querySelector('#subject').value)" 
        class="btn btn-success" aria-expanded="false">Upload</button>
        
<p>log value : (<span id="log"></span>)</p>

connexo · Accepted Answer · 2019-05-20 14:39:37Z

You really shouldn't be using inline event listeners like onclick (for maintainability, security and separation of concerns reasons).

Instead, add the listener using the DOM API's HTMLElement.prototype.addEventListener():

document.getElementById('upload-button').addEventListener('click', function() {
  uploadFileIGCSE(year.value, grade.value, subject.value);
})

function uploadFileIGCSE(x,y,z) {
  console.log(x,y,z);
}

document.getElementById('upload-button').addEventListener('click', function() {
  uploadFileIGCSE(year.value, grade.value, subject.value);
})

<div class="col-md-3">
    <select id="year" name="year" class="form-control">
        <option value="select" disabled="disabled">- Select Year -</option>
        <option value="1">2001</option>
        <option value="2">2002</option>
        <option value="3">2003</option>
    </select>
</div>

<div class="col-md-3">
    <select id="grade" name="grade" class="form-control">
        <option value="select" disabled="disabled">- Select Grade -</option>
        <option value="1">Grade 5</option>
        <option value="2">Grade 6</option>
        <option value="3">Grade 7</option>
    </select>
</div>

<div class="col-md-3">
    <select id="subject" name="subject" class="form-control">
        <option value="select" disabled="disabled">- Select Subject -</option>
        <option value="1">Edexcel</option>
        <option value="2">National</option>
        <option value="3">Other</option>
    </select>
</div>

<button type="button" id="upload-button">Upload</button>

thiago tanaka · Accepted Answer · 2019-05-20 14:31:08Z

0

try this

<button type="button" id="upload-button" onclick="getOption()" class="btn btn-success"
    aria-expanded="false">Upload</button>

function getOption() {
    var year = document.getElementById("year");
    var year_option = year.options[year.selectedIndex].value;

    var grade = document.getElementById("grade");
    var grade_option = grade.options[grade.selectedIndex].value;

    var subject = document.getElementById("subject");
    var subject_option = subject.options[subject.selectedIndex].value;

    uploadFileIGCSE(year_option, grade_option, subject_option)
}

answered May 20, 2019 at 14:31

thiago tanaka

9178 silver badges8 bronze badges

Comments

gpaulini · Accepted Answer · 2019-05-20 14:40:56Z

0

$('#upload-button').click(function(e) {
    var year = $('#year').val();
    var grade = $('#grade').val();
    var subject = $('#subject').val();

    uploadFileIGCSE(year, grade, subject);
})

You could try something like this.

answered May 20, 2019 at 14:40

gpaulini

4115 silver badges13 bronze badges

Comments

ADyson · Accepted Answer · 2019-05-20 14:51:30Z

The click event can simply run an anonymous function. Its only input will be the default event object supplied by the DOM engine. That function can then gather the values from the various elements you're interested in, and make a further call to the uploadFileIGCSE function, passing those values as parameters.

Here's a demo. Note that I've used an unobtrusive event handler using addEventListener() in the JS code, rather than "onclick" within the HTML. This is generally considered to be better practice, as it makes the code easier to read, maintain and debug, and helps to separate the functionality from the presentation.

N.B. you could use jQuery for any/all of this, but equally it's not really necessary, it doesn't really add much value in this situation.

var button = document.getElementById("upload-button");
button.addEventListener("click", function(event) {
  var year = document.getElementById("year").value;
  var grade = document.getElementById("grade").value;
  var subject = document.getElementById("subject").value;
  uploadFileIGCSE(year, grade, subject);
});

function uploadFileIGCSE(year, grade, subject) {
  console.log(year, grade, subject);
}

<button type="button" id="upload-button" onclick="uploadFileIGCSE('param1', 'param2', 'param3')" class="btn btn-success" aria-expanded="false">Upload</button>

<div class="col-md-3">
  <select id="year" name="year" class="form-control">
    <option value="select" disabled="disabled">- Select Year -</option>
    <option value="1">2001</option>
    <option value="2">2002</option>
    <option value="3">2003</option>
  </select>
</div>

<div class="col-md-3">
  <select id="grade" name="grade" class="form-control">
    <option value="select" disabled="disabled">- Select Grade -</option>
    <option value="1">Grade 5</option>
    <option value="2">Grade 6</option>
    <option value="3">Grade 7</option>
  </select>
</div>

<div class="col-md-3">
  <select id="subject" name="subject" class="form-control">
    <option value="select" disabled="disabled">- Select Subject -</option>
    <option value="1">Edexcel</option>
    <option value="2">National</option>
    <option value="3">Other</option>
  </select>
</div>

No need for event.preventDefault(); since button[type=button] has no default action.
@connexo very true. I hadn't clocked that. It's like a reflex action to add preventDefault lol. I'll remove it.

Collectives™ on Stack Overflow

How to set parameter values to a "onClick" function using javascript or jquery

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related