Пустые данные при использовании json stringify html результатов формы

При попытке отправить мои из данных в json.stringify () результаты моих предупреждений возвращаются пустыми [].

<html>
<head>
        <meta charset = "utf-8">
        <script
        src = "https://code.jquery.com/jquery-3.3.1.js"
        integrity = "sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60 = "
        crossorigin = "anonymous"></script>
        <script src = "http://malsup.github.com/jquery.form.js"></script>
        <script src = "https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
        <script>
         formData = {};
          var formData = JSON.stringify($("#myForm").serializeArray());

          $.ajax({
    url: "myurlfortesting.com",
    data: formData,
    dataType : 'json',
    contentType: 'application/json',
    type: 'POST',
    success: function (response) {
      console.info(response);

    }
});
alert(formData)
</script>

  <body>

        <form class = "myForm" id = "myForm" method = "POST" >
            <div class = "form-group row">
            <label for = "example-text-input" class = "col-2 col-form-label">Store</label>
              <input class = "form-control" type = "text"   name = "store_code">
          </div>
          <div class = "form-group row">
            <label for = "example-number-input" class = "col-2 col-form-label">companies</label>
              <input class = "form-control" type = "number"  name = "company_code">
          </div>

          <div class = "form-group row">
            <label for = "example-number-input" class = "col-2 col-form-label">People</label>
              <input class = "form-control" type = "number"   name = "people_code">
          </div>


            <input value = "Submit" type = "submit">
        </form>

Предупреждение отправляет пустой []. Результаты, которые я хочу получить после того, как я нажму кнопку отправки формы в предупреждении, представляют собой строковый объект json, который выглядит как

'{"store_code": "New York", "company_code": 55, "people_code": 83}'

javascript json

24.11.2018 08:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

336

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

попробуйте это ниже. У меня есть действие формы после нажатия кнопки. Если вам нужно изменить, чтобы отправить.

<html>
<head>
        <meta charset = "utf-8">
        <script
        src = "https://code.jquery.com/jquery-3.3.1.js"
        integrity = "sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60 = "
        crossorigin = "anonymous"></script>
        <script src = "http://malsup.github.com/jquery.form.js"></script>
        <script src = "https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
        <script>

    function process()
    {       


         formData = {};
          var formData = JSON.stringify($("#myForm").serializeArray());
          $.ajax({
                url: "myurlfortesting.com",
                data: formData,
                dataType : 'json',
                contentType: 'application/json',
                type: 'POST',
                success: function (response) {
                  console.info(response);

                }
            });
            alert(formData)

    }
</script>

  <body>

        <form class = "myForm" id = "myForm" method = "POST" >
            <div class = "form-group row">
            <label for = "example-text-input" class = "col-2 col-form-label">Store</label>
              <input class = "form-control" type = "text"   name = "store_code">
          </div>
          <div class = "form-group row">
            <label for = "example-number-input" class = "col-2 col-form-label">companies</label>
              <input class = "form-control" type = "number"  name = "company_code">
          </div>

          <div class = "form-group row">
            <label for = "example-number-input" class = "col-2 col-form-label">People</label>
              <input class = "form-control" type = "number"   name = "people_code">
          </div>


            <input value = "button" type = "submit" onclick = "process();">
        </form>

Это дает формат [{"name": "store_code", "value": "wrefds"}, {"name": "company_cod‌ e», "value": "2"}, {"na‌ me": " people_code "," v‌ alue ":" 4 "}]. Я ищу формат, который выглядит как '{"store_code": "New York", "company_code": 55, "people_code": 83}'

— 24.11.2018 08:22

24.11.2018 08:15

Ответ принят как подходящий

Ваш тег script находится над тегом body. Таким образом, скрипт выполняется до того, как форма загружается в DOM. Поместите тег script в конец тега body, и вы получите желаемый результат.

Кроме того, вам нужно будет проанализировать значение из каждого поля ввода отдельно и построить formData, если вам нужно получить желаемый формат данных.

Удалите type = "POST" в свой тег.
Вызовите метод onclick кнопки отправки
Верните false из метода, чтобы не запускать отправку формы браузера по умолчанию.

Взгляните на этот код.

<html>

<head>
  <meta charset = "utf-8">
  <script src = "https://code.jquery.com/jquery-3.3.1.js" integrity = "sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60 = " crossorigin = "anonymous"></script>
  <script src = "http://malsup.github.com/jquery.form.js"></script>
  <script src = "https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>

  <body>

    <form class = "myForm" id = "myForm">
      <div class = "form-group row">
        <label for = "example-text-input" class = "col-2 col-form-label">Store</label>
        <input class = "form-control" type = "text" name = "store_code">
      </div>
      <div class = "form-group row">
        <label for = "example-number-input" class = "col-2 col-form-label">companies</label>
        <input class = "form-control" type = "number" name = "company_code">
      </div>

      <div class = "form-group row">
        <label for = "example-number-input" class = "col-2 col-form-label">People</label>
        <input class = "form-control" type = "number" name = "people_code">
      </div>

      <input value = "Submit" type = "button" onclick = "submitForm();">
    </form>

    <script>
      function submitForm() {
        formData = {};
        formData['store_code'] = $("#myForm ").find('input[name = "store_code"]').val();
        formData['company_code'] = $("#myForm ").find('input[name = "company_code"]').val();
        formData['people_code'] = $("#myForm ").find('input[name = "people_code"]').val();
        console.info(formData);

        $.ajax({
          url: "myurlfortesting.com",
          data: formData,
          dataType: 'json',
          contentType: 'application/json',
          type: 'POST',
          success: function(response) {
            console.info(response);

          }
        });

        // important so you don't submit the form after the ajax call
        return false;
      }
    </script>
  </body>

Это дает формат [{"name": "store_code", "value": ""}, {"name": "company_code", "va‌ lue": ""}, {"name": "pe‌ ople_code "," значение ":" ‌ "}]. Я просто хочу [{"store_code": "mystore", "company_code": 5, "people_code": 4}]

— 24.11.2018 08:19

@ jumpman8947 Я обновил код. Теперь он должен предоставить вам требуемый формат данных.

— 24.11.2018 08:34

24.11.2018 08:16