0

Section of Form in home.php

<div id='googleForm'>
            <form>

              <div class='item'>
                <label class='label'>お名前</label>
                <input class='inputs' type='text' name='entry.1403582438' required>
              </div>

              <div class='item'>
                <label class='label'>メールアドレス</label>
                <input class='inputs' type='email' name='entry.920640653' required>
              </div>
              <div class='item'>
                <label class='label'>お電話番号</label>
                <input class='inputs' type='text' name='entry.1631209175' required>
             </div>

              <div class='item'>
                <p class='label'>お問合わせの種類</p>
                <div class='inputs'>
                <input id='cut' type='radio' name='entry.1757207008' value='1'><label for="cut">無料体験</label>
                <input id='cut-color' type='radio' name='entry.1757207008'  value='2'><label for="cut-color">料金</label>
                <input id='headspa' type='radio' name='entry.1757207008'  value='3'><label for="headspa">入会について</label>
                <input id='other' type='radio' name='entry.1757207008'  value='4'><label for="other">その他</label>

                </div>
              </div>

              <div class='item'>
                <label class='label'>お問合わせ内容</label>
                <textarea class='inputs' name='entry.669414687' required></textarea>
              </div>

              <div class='btn-area'>
                <input type='submit' value='送信'><input type='reset' value='リセット'>
              </div>

            </form>
        </div>

Section of ajax in home.php

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
      $(function() {
        $('#googleForm').submit(function(e){

                let hostUrl = "https://docs.google.com/forms/u/0/d/e/1FAIpQLSfuXJf8bjE4cYO5f_5g4w-CW0R_LXruvaNG1-veDiEwFh0fEg/formReisponse";
                let name = $('input:text[name="entry.1403582438"]').val();
                let email = $('input[name="entry.920640653"]').val();
                let contact = $('input:text[name="entry.1631209175"]').val();
                let category_id = $('input:radio[name="entry.1757207008"]:checked').val();
                let inquiry = $('textarea[name="entry.669414687"]').val();
                $.ajax({
                   url: "https://docs.google.com/forms/d/e/1FAIpQLSfuXJf8bjE4cYO5f_5g4w-CW0R_LXruvaNG1-veDiEwFh0fEg/viewform?usp=pp_url",
                   type: "POST",
                   data: { "entry.1403582438": name, "entry.920640653": email, "entry.1631209175": contact, "entry.1757207008": category_id, "entry.669414687": inquiry},
                   dataType: "xml",
                   statusCode: {
                        0: function() {

                        },
                        200: function() {

                        }
                   }
                });

         e.preventDefault();
        });
      });
    </script>

I would like to submit post request to Google form with ajax.

Why i want to use ajax is because of expecting the web page not to transition to Google Form when submiting post request.

the problem is when submiting the request, it always have been ending up with some errors like below appear on console panel.

enter image description here

I have no idea what to do to solve this problem.

I would be very happy if you share your knowledges.

A Y
  • 81
  • 1
  • 6
  • your server doesnt allow access to google link, what server your using? apache? – yoss Apr 30 '20 at 14:52
  • Thank you for your comment! yes, i do I am using apache. – A Y Apr 30 '20 at 14:55
  • please create a file ".htaccess" in your folder and put this inside of it (Header set Access-Control-Allow-Origin "*") and restart your apache and test it, show what errors you get. – yoss Apr 30 '20 at 15:01
  • I think allowing access error is happening on server of google form, not my side. because I submitted post request to google form server, and i got this error ”Access to XMLHttpRequest at 'https://docs.google.com/forms/d/e/1FAIpQLSfuXJf8bjE4cYO5f_5g4w-CW0R_LXruvaNG1-veDiEwFh0fEg/viewform?usp=pp_url' from origin 'http://xs858158.xsrv.jp' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.” – A Y Apr 30 '20 at 15:22
  • fomer is google form server – A Y Apr 30 '20 at 15:22
  • later is my server. – A Y Apr 30 '20 at 15:23
  • your server doesnt allow fetching from external servers, try with another website – yoss Apr 30 '20 at 15:23
  • You have to send the request header in the ajax call. or it wont be accepted. `beforeSend: function(xhr) { xhr.setRequestHeader("Authorization", ""); }` – Swrena Apr 30 '20 at 15:32
  • also check [question](https://stackoverflow.com/questions/47523265/jquery-ajax-no-access-control-allow-origin-header-is-present-on-the-requested) – Swrena Apr 30 '20 at 15:32
  • @yoss as you said, my serve haven't been allowing Access from other servers. in other word, there was no line of it(Header set Access-Control-Allow-Origin "*") in .htaccess file so i put it inside of .heaccess but the issue is persisting,,,, – A Y Apr 30 '20 at 15:36
  • did you restart tha apache? what error you have now – yoss Apr 30 '20 at 15:38
  • thank you for comment @Sorena! I will check the link. – A Y Apr 30 '20 at 15:39
  • @yoss yes I restarted server but the same error is perisisting,, – A Y Apr 30 '20 at 15:44
  • @yoss below is in .htaccess file SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off SetEnvIf Request_URI ".*" Ngx_Cache_StaticMode Header set Access-Control-Allow-Origin "*" – A Y Apr 30 '20 at 15:45
  • try to change dataType to jsonp – yoss Apr 30 '20 at 15:54

1 Answers1

-1

It was solved. The problem is just that i have set wrong value to url variable. Correcting that to appropriate one, post request had submitted to Google Form correctly.

Addtionally, when changing 'datatype' from 'xml' to 'jsonp', below error that had been persisting was solved

''' Access to XMLHttpRequest at 'https://docs.google.com/forms/u/0/d/e/1FAIpQLSfuXJf8bjE4cYO5f_5g4w-CW0R_LXruvaNG1-veDiEwFh0fEg/formResponse' from origin 'http://xs858158.xsrv.jp' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. '''

A Y
  • 81
  • 1
  • 6