Submit a form using onchange

JavaScript
1

I have a form

<form action="" method="GET" class="form-inline" style="display:inline-block; width:250px" name="Positions">
<input type="number" class="form-control" name="x_coord" id="x_coord" maxlength="4" value="250" onchange="this.form.submit()" >
<input type="number" class="form-control" name="y_coord" maxlength="4" id="y_coord" value="20" onchange="this.form.submit()">							   <button class="btn btn-outline-secondary" type="submit" name="set"><span class="icon-plus"></span></button>
<input type="hidden" name="id" value="1">
</form>

I am trying to submit the form whenever either of the input boxes change, but it doesn’t seem to work
III can test if its workingt if I see the URL chjange?

2

Before we get to any JavaScript stuff, there are a number of HTML problems with your code. The action attribute is not allowed to be empty, and the maxlength attribute is invalid on number types

With the action attribute remove that until you have something to put in there.

With the maxlength attribute, use the max attribute instead to indicate the maximum number size of 9999. To set the visual width of the input field use CSS to set the width.

input[type=number] {
    width: 4em;
}

When you change one of those fields, such as typing 200 where the 250 is and then pressing tab to trigger the change event, the query string of the page URL does change. When that happens the page goes back to the 250 that you defined in the HTML code.

So the URL does change. I suspect though that you want something different than what I explained to happen instead?

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.