Как получить введенные пользователем данные из HTML-формы и добавить в строку JSON для отправки в запросе POST с использованием JS / Jquery - PullRequest
Новая
       15

Как получить введенные пользователем данные из HTML-формы и добавить в строку JSON для отправки в запросе POST с использованием JS / Jquery

0 голосов
/ 03 октября 2019

Я пытаюсь получить данные из HTML-формы, добавленной в строку JSON, для отправки в качестве полезной нагрузки в запросе POST.

Мой HTML-код на данный момент: 

<form id="myForm">
      <label class="fnameLabel1" for="fname">FULL NAME</label>
      <input class="fname1" type="text" id="fname" name="fullname" placeholder="" required>

      <label class="emailLabel1" for="email">EMAIL</label>
      <input class="email1" type="text" id="email" name="email" placeholder="" required>

      <input  class="submit1" type="submit" value="Book Now" id="submit1">

    </form>

Итак, моя настоящая проблема в том, как мне получить то, что введено в эти поля ввода здесь при отправке: 

  <script>  
  $('submit1').click(function () {


     var url = "http://www.my_api_url.com/apiurl";

     var payload = {
       "attachments": [{
         "fallback": "testing:",
         "pretext": "testing:",
         "color": "#00008b",
         "fields": [{
           "title": "Name",
           "value": **NAME ENTERED IN FORM**,
           "title": "Email",
           "value": **EMAIL ENTERED IN FORM**,
           "short": true
         }]
       }]
     }

     $.post(url.JSON.stringify(payload), function (data) {
       $('#result').text(data);
     })
  })
</script>

Я не уверен, правильно ли я это делаю или близок к тому, чтобы быть правым. Моя цель - когда пользователь вводит свои данные и нажимает кнопку «Отправить». эти данные отправляются в нужный API. Я не знаю, как я могу добавить эти данные в JSON или есть ли более эффективные способы достижения той же цели.

1 Ответ

0 голосов
/ 03 октября 2019

То, как вы создаете свой JS-объект, выглядит чисто (хотя я не уверен, что вам нужны квадратные скобки). Как вы это тоже разбираете. Чтобы получить значение поля ввода, мое простейшее решение на основе чистого js было бы: 

    document.getElementById("fname").value;

Источник: https://www.tutorialrepublic.com/faq/how-to-get-the-value-of-text-input-field-using-javascript.php

Запрос на публикацию должен выглядеть примерно так: 

   $.post(url, JSON.stringify(payload), function (data) { $.('#result').text(data); })

Источник: https://www.webucator.com/how-to/how-send-receive-json-data-from-the-server.cfm

https://api.jquery.com/jQuery.post/

...