Way to get data from HTML form to Microsoft Flow without a page refresh and no php

Question

I am trying to create an HTML form that tallies who is at a sports game, and then pass that data to Microsoft Flow. I have the html form behind a JavaScripted Geofence. I want to be able to take that form data, and without a page refresh, compile it into a JSON, then pass it to Microsoft Flow, without using PHP or an inbetween step.

I have read that AJAX may help me do this, but AJAX seems to be used mostly to POST data to a PHP file. I am not entirely sure how the Flow trigger works. I am using the Flow trigger "When an HTTP Request is Received". How would I go about giving data from this form to Flow? Thank you. (to clarify the code, when the check in button is pushed, getLocation() makes the form visable).

  <h4 id="loc" style="text-align:center;"></h4><br>
  <h4 id="word" style="text-align:center;"></h4><br>

  <div  class="wow fadeInUp" data-wow-delay="0.2s" style="text-align:center;">
    <form id="yummyfood" style="display:none;" action="javascript:void(0);" name="CheckIn" method="post">
      <p><label for="name">First Last Name. (Use same name every time or you won't get your points.)</label>
        <input type="text" name="name" id="name"></p>

        <p><label for="email">School Email Address</label>
          <input type="text" name="email" id="email"></p>

          <p><label for="grade">What Grade are you in?</label>
            <input type="text" name="grade" id="grade"></p>

            <p><label for="game">Which game are you at?</label>
              <input type="text" name="game" id="game"></p>


        </form>
        <button value="Submit" type="button" onclick="formdone()">
    </div>


    <!--FormScript-->
    <script>
    function submit(){
      console.log("i win")
    }
      function submitform() {
      console.log("one")
    var form = document.getElementById("yummyfood")
    var formData = JSON.stringify($("#myForm").serializeArray());
    $.ajax({
      type: "POST",
      url: "https://prod-93.westus.logic.azure.com:443/----Fay0OuN2k",
      data: formData,
      success: function(formdone){},
      dataType: "json",
      contentType : "application/json"
      console.log(formData)
    });
  }
    function formdone() {
      yummyfood.style.display = 'none'
    }
    </script>

I am getting nothing from this and many many variations of it. Any help is appreciated.

AJAX lets you send a HTTP request to a URL. There's nothing which restricts it to only using the POST method, or to sending to servers which use PHP. So check what kind of HTTP request your Flow expects, and then use AJAX to make one. — ADyson, Sep 13 '19 at 15:00
"I am getting nothing from this" ...unless you made a mistake when copying it to here, you have multiple syntax errors in your JavaScript. Are you checking your console for errors? — ADyson, Sep 13 '19 at 15:02
Also you have nothing to trigger your "submitform()" function and actually run the AJAX request. — ADyson, Sep 13 '19 at 15:02
@ADyson Could you elaborate on how to use AJAX to do this? Thank you! I understand that it is possible, I just don't know how. — Liightninggod, Sep 13 '19 at 15:35
@ADyson Also, I understand that there are errors; and the trigger is further down. I was just providing the code so I could get more detailed help. — Liightninggod, Sep 13 '19 at 15:38
Well, since you're using jQuery's AJAX helper function, then https://api.jquery.com/jquery.ajax/ can tell you all the possible options you can set to affect how the HTTP request is constructed, how you send the data, and how you deal with the response. However, I can't tell you what exact settings you need in order to make a correct HTTP request to your particular URL, because you haven't told us anything about it or pointed us to any relevant documentation which might be informative. — ADyson, Sep 13 '19 at 20:55

score 2 · Accepted Answer · answered Sep 16 '19 at 23:39

There are a number of syntax errors in your code sample along with orphaned methods like submit() and submitform() which will never be called resulting in the ajax code never being run.

Here is a working example derived from your code samples that you provided. It should be enough to get you going.

<form id="myForm">
    <p>
        <label for="name">First Last Name. (Use same name every time or you won't get your points.)</label>
        <input type="text" name="name" id="name">
    </p>
    <p>
        <label for="email">School Email Address</label>
        <input type="text" name="email" id="email">
    </p>
    <p>
        <label for="grade">What Grade are you in?</label>
        <input type="text" name="grade" id="grade">
    </p>
    <p>
        <label for="game">Which game are you at?</label>
        <input type="text" name="game" id="game">
    </p>
</form>

<input id="submitButton" type="button" value="Submit">

<script>
    // Bind button click event to function
    $(function () {
        $('#submitButton').click(submit);
    });

    /**
     * Submits the form.
     */
    function submit() {
        var formData = $("#myForm").serializeArray();
        var jsonData = formDataToJson(formData);

        // Post data to http endpoint
        $.ajax({
            type: "POST",
            url: "https://prod-93.westus.logic.azure.com:443/----Fay0OuN2k", // Replace with Microsoft Flow HTTP request action URL
            data: jsonData,
            dataType: "json",
            contentType: "application/json;charset=UTF-8"
        })
            .done((data, textStatus, jqXHR) => {
                console.log(textStatus);
            })
            .fail((jqXHR, textStatus, errorThrown) => {
                console.log(`${textStatus}: ${errorThrown}`);
            });

    }

    /**
     * Converts form data to json.
     * @param {Object} formData - The form data.
     */
    function formDataToJson(formData) {
        var object = {};
        formData.forEach((value, key) => {
            object[value.name] = value.value
        });
        return JSON.stringify(object);
    }
</script>

Pro Tips

The HTTP request trigger in Flow is always expecting a content type header of application/json.

Set the Request Body JSON Schema of your Flow HTTP request action to match schema of the data you are sending.

{
    "type": "object",
    "properties": {
        "name": {
            "type": "string"
        },
        "email": {
            "type": "string"
        },
        "grade": {
            "type": "string"
        },
        "game": {
            "type": "string"
        }
    }
}

Way to get data from HTML form to Microsoft Flow without a page refresh and no php

1 Answers1

Pro Tips