html onsubmit doesn't start Javascript function

Question

I have a form with a Javascript populated collection of cacheable items, and a text box that is an id that is entered by a user. I want on the form submit to redirect the user to the JSON response from the rest call. The rest URL works when I enter directly into the browser however transferring that to html and js is beating me. The form on submit does nothing when the submit is clicked.

My form -

<form id="query" action="get" onsubmit="return restLink();">
  <td>
    <select id="selectCacheableItemType">
      <option>Select a Cacheable Item Type</option>
    </select>
  </td>
  <td>
    Cacheable item Id: <input type="text" id="cacheableId"><br>
  </td>
</form>

The cacheable item type is populated here -

window.onload = function cacheItemType(){
    var select = document.getElementById("selectCacheableItemType");
    var options = ["1", "2", "3", "4", "5", "6","7"];
    for(var i = 0; i < options.length; i++) {
        var opt = options[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
    }
};

and the restLink() function is -

function restLink() {   
    cachetypename = document.getElementyId('selectCacheableItemType').getValue();
    cacheid = document.getElementyId('cacheableId').getValue();
    return window.location.href = "http://localhost:8080/rest/query/"+ cachetypename + "/" + cacheid;
}

Any help is much appreciated.

Where is the submit button? Your HTML is invalid. You can not have a form around td tags. — epascarello
– epascarello, Commented Oct 28, 2014 at 14:27
have you tried to add submit input? and make onclick event on that submit input? — guramidev
– guramidev, Commented Oct 28, 2014 at 14:28
setting window.location.href will make you go to that page. Secondly when you have an error in your javascript, your function wont be called/finnished. In browser open your developers tools -> console to see if your javascript returns errors when you submit. — Joel Harkes
– Joel Harkes, Commented Oct 28, 2014 at 14:30

brso05 · Accepted Answer · 2014-10-28 14:29:14Z

2

You are trying to set window.location.href. You either want to submit the form to this url. Or you don't need a form at all and just want to change the location to this url. You are combining 2 things and that is why it isn't working. I would get rid of the from and just create a button with onclick calling your restLink() method. No need for a form here.

Something like this:

<table>
<tr>
  <td>
    <select id="selectCacheableItemType">
      <option>Select a Cacheable Item Type</option>
    </select>
  </td>
  <td>
    Cacheable item Id: <input type="text" id="cacheableId"><br>
  </td>
</tr>
<tr>
    <input type="button" id="enterButton" onclick="restLink()">
</tr>
</table>

answered Oct 28, 2014 at 14:29

brso05

13.3k2 gold badges25 silver badges41 bronze badges

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

1 Comment

Chris Kerr Over a year ago

This was the answer that worked best for me. Many thanks. Have an up vote and accepted tick.

user4103823 · Accepted Answer · 2014-10-28 14:35:42Z

Have you tried adding a submit button?

<form id="query" action="get" onsubmit="return restLink();">
  <td>
    <select id="selectCacheableItemType">
      <option>Select a Cacheable Item Type</option>
    </select>
  </td>
  <td>
    Cacheable item Id: <input type="text" id="cacheableId"><br>
  </td>
 <input type="submit" value="Submit" id="submitForm"/>
</form>

And then:

$(document).ready(
function(){
    cacheItemType();
 var select = $("#selectCacheableItemType");
    var options = ["1", "2", "3", "4", "5", "6","7"];
    for(var i = 0; i < options.length; i++) {
        var opt = options[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
});

Collectives™ on Stack Overflow

html onsubmit doesn't start Javascript function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related