How to manipulate and redirect google form action without having that shown to the user with javascript and/or jquery

Question

i have a google form that i toke embedded into my site and change the css, so it can post to google sheets.

<form action="https://docs.google.com/forms/d/FormID/formResponse" method="POST" target="_self" onsubmit="" role="form">
  <table>
    <thead>
      <tr>
        <th>Friends name</th>
        <th>Email</th>
      </tr>
    </thead>
  <tbody>

  <tr>
    <td>
      <div class="form-group">
        <input type="text" name="entry.ID" value="" id="entry_ID" class="form-control" dir="auto" aria-label="Name  " title="">
      </div>
    </td>

    <div>
      <input type="submit" name="submit" value="Submit" id="button-submit" class="btn btn-primary btn-block">
    </div>
</form>`

Now if you notice the button is an input here, what i want to do is to keep the form posting normaly to google sheets, without showing any of that to the user, i want to redirect the user to either a different page of success message or some jquery action that says that the posting worked. i hope i was specific enough, google was of no help, and i could not find anything similar to this, ps: i deleted most of the irrelevant code and inputs.

Answer 1

You can't keep it posting normally and hijack the response from the server. But you can post the data using AJAX and handle the reponse:

$( "form" ).on( "submit", function( event ) {
  var $t = $( this ),
      params = $t.serialize(),
      url = $t.prop('action');

  event.preventDefault();

  $.post( url , params )
     .done(function() {
        console.log( "success" );
        window.location.href = "success.html");
     })
     .fail(function() {
        console.log( "error" );
        window.location.href = "error.html");
     });
});