Submit button submits form without runing onclick function

[Abdelkader Elouissi]

Hello,

When using 

My problem is:

When i use type="submit" for BtnSaveVideo button, the form is submitted without running the function submitForm().

But when i use type="button" for BtnSaveVideo, the function submitForm is executed but the form is not submitted.

If i use a manual submit ($('form#FormUserDetails').submit();), the doPost function doesn't knows that the BtnSaveVideo was clicked.

Is there a way to send the BtnSaveVideo name as parameter to the doPost function?

Or any other idea.

Thanks.

Here is an example of my code:

HTML

 <form method="post" action="<?= url ?>" id="FormUserDetails">

<div class="row" style="margin-top: 0px;margin-bottom:0px">  <!-- Abstract-->

    <h3 style="margin-top: 0px;margin-bottom:0px">Abstract<span style="color:red">*</span></h3>

       <div class="input-field col s12">

          <textarea id="Abstract" name="Abstract" class="materialize-textarea" style="width: 900px; height: 150px; border:1px solid red; margin-top: 0px;margin-bottom:0px" required></textarea>

        </div>

  </div>

    <div class="row"> 

      <div class="input-field col s3">

        <button id="BtnSave" name="BtnSave" class="btn waves-effect waves-light" type="submit" value="Save">Save

          <i class="material-icons right">send</i>

        </button>

      </div> 

    

      <div class="input-field col s3">

        <button id="BtnCancel" name="BtnCancel" class="btn waves-effect waves-light" type="submit" value="Cancel" formnovalidate="formnovalidate">Cancel

          <i class="material-icons right">send</i>

        </button>

      </div>

      <div class="input-field col s3">

        <button id="BtnSaveVideo" name="BtSaveVideo" class="btn waves-effect waves-light btn BoutonSaveVideo" type="submit" onclick="submitForm();" value="Save Video" >Save presentation

        </button>

      </div>

</form>

Script

<Script>

 function submitForm() {

 do some thing ......

}

</script>

Code.gs

function doPost(e) {

   if(e.parameter.BtnSaveVideo=="Save Video")

    {

        var htmlOutput =  HtmlService.createTemplateFromFile('Page1');

        htmlOutput.message = 'Your presentation has been saved successfully';

        return htmlOutput.evaluate(); 

    }

}

[Tanaike]

Although I'm not sure whether I could correctly understand your expected goal, how about the following modification?

From
function submitForm() {

  // do some thing ......

}

To

function submitForm() {

  // do some thing ......

  document.getElementById("FormUserDetails").submit();
}

By this, when "Save presentation" button is clicked, after your script of "do some thing ......" was run, document.getElementById("FormUserDetails").submit() is run. By this, I think that the values of "parameter":{"Abstract":"###","BtSaveVideo":"Save Video"} is sent. But, if I misunderstood your expected goal, I apologize.

[Abdelkader Elouissi]

@Tanaike

Many thanks for your response.

After using your suggestion (document.getElementById("FormUserDetails").submit();), i get the message below:

The script completed but did not return anything.

It means that the values of parameter are not sent (especially {"BtnSaveVideo":"Save Video"}.

Is there a way to fill the values of parameters before submit?

[cbmserv...@gmail.com]

Just out of curiosity, in the html form tag, did you put the url for your webapp?

 

This line here:

 

<form method="post" action="<?= url ?>" id="FormUserDetails">

 

After action, you need to have the url of the webapp.

--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/58739d37-06c1-4efd-83bb-1a600c5ea7c3n%40googlegroups.com.

[Abdelkader Elouissi]

@George

The url of the web page is sent by doPost function. As you can see, it loads the 'Page1' HTML file.

The problem is that the Post parameter values are not sent after the form submit.
it's a vicious circle. If I use the "submit" type, the form is submitted correctly but the onclick event (function submitForm) is not run. But if i use "button" type, the onclick event (function submitForm) is run but the form is not submitted. If i use manual submit (document.getElementById("FormUserDetails").submit();), the Post parameter values are not sent (therefore, the doPost function doesn't recognize which button was clicked).

Thanks.

[cbmserv...@gmail.com]

Ok but the doPost function is called by the webapp url.

 

Did you deploy this as a webapp?

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/9fd936b7-8918-4ff9-a08f-0d64464e36a8n%40googlegroups.com.

[Abdelkader Elouissi]

@George

Yes, i deployed it as webapp. It has 2 HTML pages (Page1 &  FormUserDetails) and code.gs

[cbmserv...@gmail.com]

I see now how you have this. Yeah I do not know of any solutions to your problem.

 

I do have 1 suggestion you can try. Move the submit button outside of the form tags just to see the effect this may have. It should still be able to submit your form data in theory…

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/eddc0c00-a9ad-449c-9866-c9276836caf6n%40googlegroups.com.

[CBMServices Web]

You are welcome. This is something I learned from Alan on this forum.

On Mon., Aug. 15, 2022, 11:26 p.m. Abdelkader Elouissi, <el...@univ-mascara.dz> wrote:

@George

Wow
By magic, by moving the buttons outside of the form tag, it works correctly.

You saved me.

Thanks.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/7971be29-feee-49a8-b128-f626c8fa4ac7n%40googlegroups.com.