MVC View JavaScript Function Running at Load Time

Question

I have a view in MVC and it contains a button that should call a javascript function when clicked. The problem is the function is running when the view is loaded instead of when the button is clicked.

<label for="structureParameter">Choose a structure parameter</label><select id="structureParameter" name="structureParameter">
    <option disabled="disabled" selected="selected">...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
<input type="button" id="submit" value="submit" />

<script type="text/javascript">
function setStructure() {
    var selectElement = document.getElementById("structureParameter");
    var pageType = selectElement.value
    return pageType;
}

$(document).ready(function () {
    $('#submit').onclick = setStructure();
})
</script>

The function setStructure() is being run at load instead of when the button is clicked, so document.getElementById("structureParameter") is not yet set. How can only run setStructure() once the button is clicked?

I tried moving $('#test').onclick = setStructure(); outside of document.ready and it doesn't help.

Matthew · Accepted Answer · 2015-08-27 20:16:37Z

2

Change the event handler to look like this:

$(document).ready(function () {
    $('#submit').click(function () {
        alert('hello, world!');
    });
})

In your case, replace the alert with a call to setStructure()

Fiddle: https://jsfiddle.net/mwatz122/ztc78z1e/

answered Aug 27, 2015 at 20:16

Matthew

8271 gold badge10 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

MVC View JavaScript Function Running at Load Time

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related