Search code examples
javascripthtmlformstwitter-bootstrapmojolicious

Can't submit a form with JavaScript function when selecting radio input


I write this html code with mojolicius code mixed. The idea is to submit the form when I select a radio input that is stylized as a Bootstrap button.

If I put a submit type input, I select the Bootstrap button and I submit it, it works perfectly. But when I use this function (submitForm(node)) to submit the form, it seems to submit it, but is doesn't do anything. The Firefox debugger doesn't throw any error.

<form method="post" id="runform">
%if (keys %$base) {
%for my $option (sort keys %$base) {

  <div class="col-sm-4">
  <div class="panel panel-success machine">

...                           

    <div class="btn-group pannel-body" data-toggle="buttons">
       <label class="btn btn-success" id="base_action" onclick="submitForm(<%= $option %>)">
          <input name="id_base" id="submit<%= $option %>" type="radio" value="<%= $option %>"><strong>&nbsp;<i class="fa fa-play" aria-hidden="true"></i>&nbsp;Start this Machine</strong>
       </label>                              
    </div>

 </div>
 </div>
%}
</form>

The JavaScript Function:

function submitForm(node) {
    var id = "submit"+ node ;
    document.getElementById(id).checked=true;
    document.getElementById("runform").submit();
}

Thanks


Solution

  • You lack an action attribute on the form, so it gets submitted to the current page, that's why it seems to submit, but does nothing, because it's likely you have configured your server to just reply with the same page to the request.

    Point the form to the right URL.