CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zach Murphy
Zach Murphy

Reputation: 33

How to submit a form on mobile through an element outside of the form

I'm building an app, and want to have my submit button for a generated form placed in the footer, outside of the form scope. I currently have the footer button simulate the click of the hidden submit button within the form and this works, but not on mobile.

I'm doing this on a platform utilizing Bootstrap v3.3.7 and JQuery v1.11.2.

I have tried attaching event listeners to the "click" function of the hidden submit button that just output some arbitrary sting to the console, just to see if the "click" function was being hit.

HTML:

<form action="/test-post" data-endpoint-id="/test-post" method="POST" role="form" data-toggle="validator">
    <div class="form-group  ">
        <label> Label </label>
        <input type="text" value="" class="form-control input" name="test_input" placeholder="">         
    </div>

    <button id="submit" class="btn btn-default hide" type="submit">
        Button
    </button>
</form>

<div>
    <a id="target">
        <div>submit</div>
    </a>
</div>

JS:

$( "#target" ).click(function() {
  $("#submit").click();
});

I added this bit to see if it was at least reaching the "click" handler, and it it output appropriately to the console.

$("#submit").click(function(){
  console.log("It's Working?");
});

On desktop, the form submits and I'm redirected appropriately before the log fires, but on mobile it only logs the string, so it IS CLICKING THE BUTTON and refusing to submit.

The standard submit button works fine on all devices when not hidden, and my current solution works on desktop when the button is hidden.

Upvotes: 1

Views: 137

Answers (2)

Ankur Mishra
Ankur Mishra

Reputation: 1296

You can use Jquery submit() function to submit the form:

$( "#target" ).click(function() {
  $("form").submit();
});

Upvotes: 2

Josh Whiddett
Josh Whiddett

Reputation: 39

have you tried putting the button in a div and hiding the div:

<div style="display:none">
    <button id="submit" class="btn btn-default" type="submit">
        Button
    </button>
</div>

Upvotes: 1

Related Questions