2

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.

6
  • 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
    Commented Sep 13, 2019 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
    Commented Sep 13, 2019 at 15:02
  • Also you have nothing to trigger your "submitform()" function and actually run the AJAX request.
    – ADyson
    Commented Sep 13, 2019 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. Commented Sep 13, 2019 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. Commented Sep 13, 2019 at 15:38

1 Answer 1

2

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.

enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.