JQuery: фокус смещается с одной кнопки проверки радио на другую - PullRequest
Новая
       33

JQuery: фокус смещается с одной кнопки проверки радио на другую

0 голосов
/ 16 апреля 2019

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

Моя проблема связана с третьим разделом ввода, который представляет собой радиокнопочный ввод вместо текстового ввода. Есть два переключателя, которые позволяют пользователям щелкать по кругу, один для мужского пола, а другой для женского пола, но предполагается, что они нажимают только один, чтобы перейти от выпадающего списка к разделу раскрывающегося списка, несмотря на Дело в том, что в html есть раздел ввода для обеих контрольных кругов переключателей.

У меня вопрос: как мне написать код JQuery таким образом, чтобы фокус переключался на выпадающий список после нажатия только одной из переключателей вместо обеих. Мой код для HTML и Javascript / Jquery включен ниже: 

Code:`enter code here`

HTML:

    <form>
        <br>
        <label for="first_name">First Name:</label>
        <input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span>
        <br>
        <label for="last_name">Last Name:</label>
        <input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span>
        <br>
        Male <input type="radio" name="gender" value="M">
        Female <input type="radio" name="gender" value="F"> <span class="error" id="gender_error"></span>
        <br>

Javascript/JQuery

$(document).ready(function() { //document ready function to contain jquery code


$('body').css("background-color", "tan").css("padding-left", "50px");
$('h1').css("font-size", "300%");
$('h3').css("font-size", "200%");
$('input').css("margin", "10px");

var myFirstName = $("#first_name").val();
var myLastName = $("#last_name").val();

$("#first_name").focus();
$("#first_error").text("You must Enter a First Name").hide();
$("#last_error").text("You must Enter a Last Name").hide();

$(".error").css("color", "red");

$("input").change(function() {
  var myFormChange = $(this).closest('form').find(':input');
  myFormChange.eq( myFormChange.index(this) + 1 ).focus();

});

$("#mysubmit").click(function(){




    if (myFirstName == '')
    {
$("#first_error").text("You must Enter a First Name");
    }
    else {
        if (myFirstName !== '')
        {
            $("#first_error").text("");
        }
    }

});

});
// end of "document ready" jquery code.[imageofinputfocus][1]


  [1]: https://i.stack.imgur.com/a2UT6.png

1 Ответ

0 голосов
/ 16 апреля 2019

Один из подходов заключается в проверке имени входа.Если у него одно и то же имя, вы нажали первую кнопку с двумя переключателями, а затем пропустили его. 

var nextElement = myFormChange.eq( myFormChange.index(this) + 1 );

if (nextElement.attr('name') === this.name) {
    nextElement = myFormChange.eq( myFormChange.index(this) + 2 );
}

nextElement.focus();
...