простой JavaScript для получения значений type = «radio» в сводку

1

Цените заранее помощь :) Попробовали несколько вещей, но застряли и не выпустили.

Имейте form.html, который собирает данные, и использование jquery получает значения в summary.html. Возникли проблемы с получением значений переключателя "пол".

form.html

    <label for="firstname">First Name:</label><input id="firstname" name="firstname" type="text" autofocus placeholder="John" required="required" maxlength="15" />
    <br>
    <label for="surname">Surname:</label><input id="surname" name="surname" type="text" placeholder="Smith" required="required" maxlength="30" />
    <br>
    <br>

    Gender:
    <input id="male" type="radio" name="gender" value="male" /><label for="male">Male</label>
    <input id="female" type="radio" name="gender" value="female" /><label for="female">Female</label>
    <input id="prefernotsay" type="radio" name="gender" value="prefernotsay" checked /><label for="prefernotsay">Prefer Not to Say</label>
    <br>   

    <input id="submit" type="submit" value="submit" />
    <br>    
</form>

summary.html

<body>
<table>
    <tr>         
        <td id="firstname" /></td>
    </tr>
    <tr>
        <td id="surname" /></td>
    </tr>      
    <tr>
        <td id="gender" /></td>
    </tr>
</table>

JS

window.onload = function () {
"use strict";

var url = new URL(window.location.href);

var firstname = url.searchParams.get("firstname"); document.getElementById("firstname").innerText = firstname;

var surname = url.searchParams.get("surname"); document.getElementById("surname").innerText = surname;    

var radios = document.getElementsByName('gender');

for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
        alert(radios[i].value);
        break;
    }
}

};

  • 1
    Я вижу пару вещей: 1. Вы вызываете весь этот код при загрузке окна. Я предполагаю, что вы захотите сделать это при отправке формы или нажатии кнопки. 2. Я не вижу здесь никакого использования jQuery, это все селекторы js dom.
  • 0
    в чем проблема или ошибка, которую вы получаете?
Показать ещё 2 комментария
Теги:

2 ответа

1
Лучший ответ

Чтобы получить выбранное значение в группе переключателей, вы хотите выбрать элемент :checked в группе и получить его .val(). Вот простую версию, которую вы можете запустить и наблюдать:

jQuery(function ($) {
  $('form').on('submit', function (e) {
    e.preventDefault();
    
    var gender = $('input[name="gender"]:checked').val();
    
    alert('Gender = ' + gender);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <div>
    Gender
    <input id="male" type="radio" name="gender" value="male" /><label for="male">Male</label>
    <input id="female" type="radio" name="gender" value="female" /><label for="female">Female</label>
    <input id="prefernotsay" type="radio" name="gender" value="prefernotsay" checked /><label for="prefernotsay">Prefer Not to Say</label>
  </div>
  
  <div><input id="submit" type="submit" value="submit" /></div>
</form>
Поделиться
  • 0
    Просто перечитайте свой вопрос: вы пытаетесь отобразить выбранное значение на странице, на которую отправляется ваша форма, а не на странице, на которой отображается форма? В этом случае использование url.searchParams.get("gender") и использование этого значения кажется ответом на ваш вопрос.
  • 0
    Благодарю вас! Извините за путаницу с моим вопросом
1

Предполагая, что вы отправляете параметры из своей формы на вторую страницу, вы должны получать значение для пола из searchParams, как и другие значения

window.onload = function () {
    var url = new URL(window.location.href);

    document.getElementById("firstname").innerText = url.searchParams.get("firstname");

    document.getElementById("surname").innerText = url.searchParams.get("surname");    

    document.getElementById("gender").innerText = url.searchParams.get("gender");
}
Поделиться
  • 0
    Вопрос ОП, в частности, требует решения jQuery.
  • 0
    Если вы посмотрите на его пример, он вообще не получает значений с помощью JQuery.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню