Как мне отправить все выбранные данные из выпадающего меню на сервер методом "post"?

ProgramBox

Как мне отправить все выбранные данные из выпадающего меню на сервер методом «post»?

Post author:admin
Запись опубликована:14 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #http

#javascript #jquery #HTML #http

Вопрос:

У меня есть несколько данных, и я пытаюсь выяснить, как отправить все выбранные данные с помощью вызова метода «post», чтобы запросить эту информацию с сервера и отправить ее обратно. На данный момент я экспериментирую с формами, но уверен, что есть гораздо более простой способ сделать это. Пожалуйста, будьте так добры, покажите и объясните мне версию, которая использует все выбранные пользователем параметры.

Выполняемый код: При запуске скрипта пользователь должен внести изменения в первый выпадающий список. Это создало бы второй выпадающий список. Чтобы создать третий выпадающий список, вы должны снова вызвать изменение в первом выпадающем списке (это скоро исправится).

Логика: Смысл этого скрипта заключается в том, чтобы взять несколько строк для поиска в базе данных и отправить их для обработки после нажатия кнопки «Поиск».

 <pre>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Query Tool</title>
<meta charset="ISO-8859-1">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var selector = 0;
//var arr = [0,1,2,3,4,5,6,7,8,9];
    $(document).ready(function() {
        $("#select"   selector).change(function() {
            //$.post('where',{data},function (d) {     //this is to post data to the server and get the answer with function
                // documentation is at http://api.jquery.com/jQuery.post/
                // if the answer is in JSON, decode it
                var answer = '[{"ID":"1","name":"None"},{"ID":"2","name":"Ship Type"},{"ID":"3","name":"Anomoly Type"},{"ID":"4","name":"MMSI"}]';
                var d = JSON.parse(answer);
                selector  ;
                var s = $("<select id="select_two" name="select_two" />");
                for(var val in d) {
                    $("<option />", {value: d[val].ID, text: d[val].name}).appendTo(s);
                }
                $("#select"   selector).empty();
                s.appendTo("#select"   selector);
            //}); // closing brackets for the post method
        });
        //document.getElementById("myBtn").addEventListener("click", displayDate);


    });
    function PostData() {
        var formElement = document.forms["myform"];
        var array = [];
        //$.post("form.html");
         for(var val in selector) {
                    //string = formElement.elements[val].value;
                array.concat(formElement.elements[val].value);
                    //alert(formElement.elements[val].value);//can I print out the options selected?

         }
        alert(array.length);//can I print out the options selected?


    }

</script>
</head>
<body><br>
    <p>Testing.</p>
    <h1>Organizer Tool</h1>
<HR>
<p>Please choose search criteria:</p>
<form name = "myform" action="index.html">
<select id="select0">
    <option value="None">None</option>
    <option value="Ship Type">Ship Type</option>
    <option value="Anomaly Type">Anomaly Type</option>
    <option value="MMSI">MMSI</option>
</select>
<div id="select1"></div>
<div id="select2"></div>
<div id="select3"></div>
<div id="select4"></div>
<div id="select5"></div>
<div id="select6"></div>
<div id="select7"></div>
<div id="select8"></div>
<div id="select9"></div>
 <input type="submit" value="Submit" onclick = "PostData()">
</form>
</body>
</html>
</pre>

1. Итак, у меня возникли небольшие проблемы с пониманием вопроса… вы говорите о нескольких формах, но я думаю, вы просто имеете в виду несколько выбранных элементов? Но если вы просто ищете способ упаковать все поля / элементы управления в вашей форме, чтобы отправить их на сервер, вы могли бы взглянуть на метод jQuery serialize .

2. Существует множество руководств по использованию jQuery для AJAX. Они должны показать, как это сделать.

3. Множественный выбор? Если вы можете показать мне способ отправки через все выбранные файлы, это было бы потрясающе! Возможно, я чрезмерно проанализировал их, если мне не нужно беспокоиться о нескольких формах..

4. Итак, вопрос был изменен; извините за путаницу. Если кто-нибудь из вас будет так любезен просмотреть это, дайте мне знать, имеет ли это смысл. Спасибо!

5. Удалите <pre> окружение страницы. <pre> используются для отображения текста без формата. Итак, если у вас есть текст на самом краю веб-страницы, обычно он будет красиво обернут, правильно распределен и т.д. Любой текст внутри <pre> будет отображаться так, как он набран в документе, поэтому, в двух словах, даже не используйте <pre> , пока вы полностью не поймете, что он делает. На самом деле, не обертывайте <html> теги никакими другими тегами. <html> предполагается, что это верхний тег страницы, он является основным для всех HTML-тегов.

Ответ №1:

Вот что вам нужно опубликовать из формы с минимальными:

Хотя бы один <form id="process1" name="process1">
Один <input type="submit">
Любой элемент формы с name= атрибутом

Хотя для этого способа не требуется никакого JavaScript, я написал некоторые из них, чтобы заполнить эти 8 входных данных (первоначально вы превратили их в divs). В этом фрагменте будет опубликовано значение любого элемента формы, который имеет name и имеет данные. Я предоставил iframe, который будет отображать то, что сервер получил из формы. Сервер предназначен для тестирования сообщений, но он не отвечает (отсюда и iframe).

ИСПОЛЬЗОВАНИЕ

Выберите до 8 элементов из <select> .
Нажмите <submit> кнопку
В iframe должен быть какой-то необработанный текст, сообщающий о том, что сервер получил.

Из-за СТОЛЬ строгой безопасности фрагмент работает не так, как ожидалось. Вместо этого просмотрите это PLUNKER.

ФРАГМЕНТ

 <!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="utf-8" />
  <title>Query Tool</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>

  <script>
    $(function() {
      var selected = "";
      var count = 0;
      var outputs = $('[name="output"]');
      var current;
      $('#select0').on('change', function() {
        if (count < outputs.length) {
          current = outputs.eq(count);
          count  ;
          selected = $(this).val();
          current.val(selected);
        } else return;
      });
    });
  </script>

</head>

<body>
  <form id="process1" name="process1" action="http://www.hashemian.com/tools/form-post-tester.php/tesso/" target='frame1' method='post'>
    <fieldset>
      <legend>
        <h1>Form Post Test</h1>
      </legend>

      <figure class='fig'>
        <figcaption>This is an iframe that will display whatever the server has received from this form. Unfortunately this will not function because SO sandbox security is too strict</figcaption>
        <iframe id='frame1' name='frame1' src='about:blank' width='98%'></iframe>
      </figure>

      <fieldset>
        <select id="select0" name="select0">
          <option value="Ship Type">Ship Type</option>
          <option value="Anomaly Type">Anomaly Type</option>
          <option value="MMSI">MMSI</option>
        </select>
        <input type="submit">
      </fieldset>
      <br/>
      <br/>
      <label for='select1'>Select 1:</label>
      <input id="select1" name='output'>
      <br/>
      <label for='select2'>Select 2:</label>
      <input id="select2" name='output'>
      <br/>
      <label for='select3'>Select 3:</label>
      <input id="select3" name='output'>
      <br/>
      <label for='select4'>Select 4:</label>
      <input id="select4" name='output'>
      <br/>
      <label for='select5'>Select 5:</label>
      <input id="select5" name='output'>
      <br/>
      <label for='select6'>Select 6:</label>
      <input id="select6" name='output'>
      <br/>
      <label for='select7'>Select 7:</label>
      <input id="select7" name='output'>
      <br/>
      <label for='select8'>Select 8:</label>
      <input id="select8" name='output'>
      <br/>
      <br/>

    </fieldset>
  </form>
</body>

</html>

1. Спасибо, это было очень полезно! Я думаю, что нужно сделать, это создать php-файл, который запрашивал бы выбранные значения и возвращал их на главную страницу.

2. Добро пожаловать. Звучит как надежный план, к сожалению, я работаю только во внешнем интерфейсе и знаю очень мало серверных вещей, таких как PHP. Я уверен, что вы получите много помощи с другим вопросом, просто убедитесь, что вы включили тег PHP, happy coding.