При отправке формы, включите данные из элемента на странице, не в этой форме - PullRequest
Новая
       2

При отправке формы, включите данные из элемента на странице, не в этой форме

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

Поиски в Google предупреждены о том, чтобы не вкладывать формыЭто ноно - создавать большую внешнюю форму, содержащую некоторые дополнительные данные для включения в группу небольших внутренних форм. Справедливо. Но тогда кто-то может помочь мне решить эту проблему:

У меня есть: 

    <form method="get">
      Square
      <br>Row: <input name="row">
      <br>Col: <input name="col">

      <input type="hidden" name="place_island" value="square">
      <input type="submit" style="display: none">
    </form>

(и куча других групп малых форм, подобных этой, для других фигур)

В верхней части страницы у меня также есть что-то вроде этого: 

  <form id="player_select">
    <input type="radio" name="which_player" value="player1" checked="checked">Player1
    <br><input type="radio" name="which_player" value="player2">Player2
  </form>

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

Итакнапример, как есть, когда я отправляю форму, я могу получить:
Parameters: %{"col" => "asdasd", "place_island" => "square", "row" => "12345"}

Но мне нужно также включить:
"which_player" => "player2"

Я бы предпочел избегать JavaScript, если это не достаточно просто. Есть ли способ сделать это в HTML ванили? (А если нет, можете ли вы сказать мне решение javascript? <3) </p>

Ответы [ 3 ]

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

Вот фрагмент, в котором вы получаете значения формы и создаете с ней объект FormData, а также добавляете или удаляете из него пары значений ключа. Если вы наблюдаете первую строку кода в функции getFormData, то есть event.preventDefault();, это фактически останавливает отправку формы и делает ее доступной для обработки в соответствии с необходимостью. 

function getFormData(event) {
  event.preventDefault();
  var form = document.querySelector('form');
  var data = new FormData(form);
  data.append('player', document.getElementById('player').value);
  console.log(data.get('player'));
  console.log(data.get('FirstName'));
}
<form onsubmit="getFormData(event)">
  First name: <input type="text" name="FirstName" value="Mickey"><br> Last name: <input type="text" name="LastName" value="Mouse"><br>
  <button type="submit">Submit</button>
</form>
<input type="radio" id="player" value="player1">

Когда у вас есть все доступные данные формы, и добавленное к ним пользовательское значение, которое вы можете опубликовать, отправляется на сервер с помощью XMLHttpRequest. Подробнее о XMLHttpRequest Ниже приведен фрагмент кода, который отправит его на сервер // Ниже приведен код, который можно использовать для отправки на сервер 

  var xhr = new XMLHttpRequest();
  xhr.open("POST", '/server', true);
  xhr.onreadystatechange = function() { // Call a function when the state changes.
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
      // Request finished. Do processing here.
    }
  }
  xhr.send(data);

Приведенное выше решениеэто ванильный JavaScriptЕсли вы хотите и у вас все в порядке, вы можете даже использовать другие библиотеки AJAX. JQuery является наиболее широко используемым.

Документация Jjery Ajax

Подробнее о FormData здесь

Это должно решить вашу проблему.

Надеюсь, это поможет:)

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

Для будущих читателей вот решение. Разочаровал это потребовало JS и не было никакого обычного HTML-способа сделать это, ну да ладно 

<form
  id="square_form"
  method="get"
  onsubmit="check_player_radio('square_form')"
>

и 

 <script>
   function check_player_radio(form_id) {
     const which_player = document.querySelector('input[name = "which_player"]:checked').value

     $('#' + form_id).append('<input type="hidden" name="which_player" value="' + which_player +'">')
   }
 </script>
0 голосов
/ 03 октября 2019

Попробуйте: 

<html>
<head>
    <style>

    </style>
    </head>
<body>


    <form id="numberForm">
        <input type="radio" name="which_player" value="player1" checked="checked">Player1
        <br>
        <input type="radio" name="which_player" value="player2">Player2

    </form>


    <form method="get">
            Square
            <br>Row: <input name="row">
            <br>Col: <input name="col">

            <input type="hidden" id="get_wich_player" name="get_wich_player" value="">

            <input type="hidden" name="place_island" value="square">
            <input id="btn" type="submit" style="display: show">
          </form>

    <script type="text/javascript">
        document.getElementById('btn').addEventListener('click', function() {
            var formInput = document.getElementById("numberForm");
            document.getElementById('get_wich_player').value=formInput.which_player.value;
        });
    </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...