получить значения формы HTML и отправить в новое окно

Question

Скажем, у меня есть эта форма в приложении, где я хочу, чтобы пользователь проверил свои интересы, а затем добавил значения в URL.Место назначения будет принимать только переменные url.

Я дошел до того, что получил одно значение в URL, но оно на этом останавливается.Если я запускаю консоль (журнал), я вижу их всех.

Я пропускаю один простой шаг или есть лучший способ?

<form id="message"><input type="checkbox" name="movies" value="Movies" id="Movies"><label class="likeButton" for="Movies">Movies</label><br><input type="checkbox" name="news" value="News" id="News"><label class="likeButton" for="News">News</label><br><input type="checkbox" name="sports" value="Sports" id="Sports"><label class="likeButton" for="Sports">Sports</label></form>
<div class="button-center done">
     <a href="#"><p>DONE</p></a>
</div>

$('.done').on('click',function(){

    var dataArray = $('#message').serializeArray();
    
    $.each(dataArray, function(i, field){
        var dataObject = field.value + ' ';
        
        window.open('http://url.com?name=test&property=' + dataObject); 
   
    });
    
 });

Answer 1

Вы можете использовать jQuery param метод.

Описание: Создать сериализованное представление массива, простого объекта или объекта jQuery, подходящего для использования в URL-запросе.запрос строки или Ajax.Если передается объект jQuery, он должен содержать элементы ввода со свойствами имя / значение.

$('.done').on('click', function() {

  var dataArray = $('#message').serializeArray();

  window.open('http://url.com?name=test&property=' + $.param( dataArray ));

});

Answer 2

Если вы просто хотите отправить данные формы в новое окно / вкладку, то вам вообще не нужен JavaScript, вы можете просто добавить дополнительный атрибут «target» к тегу формы, чтобы сообщить ему об отправкев новое окно.

NB. Если url.com изначально не является URL-адресом вашей страницы, вы также можете добавить атрибут "action", чтобы указать, что:

<form id="message" target="_blank" action="http://url.com" >...</form>

И вместо вашей гиперссылки укажитеправильная кнопка «отправить».(Вы можете использовать CSS, чтобы выглядело гиперссылкой, если это то, что вы предпочитаете.)

<input type="submit" name="submit" value="Done"/>

Если вы все еще хотите передать параметр "name", который вы 'Если вы жестко запрограммированы в вашем коде jQuery, самый простой способ достичь этого - добавить вместо этого скрытое поле в форму:

<input type="hidden" name="name" value="test"/>

Итак, в вашем случае готовый код будет выглядеть так:

<form id="message" target="_blank" action="http://url.com">
  <input type="checkbox" name="movies" value="Movies" id="Movies">
  <label class="likeButton" for="Movies">Movies</label>
  <br>
  <input type="checkbox" name="news" value="News" id="News">
  <label class="likeButton" for="News">News</label>
  <br>
  <input type="checkbox" name="sports" value="Sports" id="Sports">
  <label class="likeButton" for="Sports">Sports</label>
  <input type="hidden" name="name" value="test"/>
  <br>
  <input type="submit" value="Done"/>
</form>

Все остальное можно удалить.

Таким образом, если вы, например, отметите галочкой «Новости» и «Спорт», а затем подтвердите, окончательный URL будет выглядеть примерно так: http://url.com?news=News&sports=Sports&name=test

Демо: http://jsfiddle.net/ryzmL1hs/