Блог

Привет, я делаю домашнее задание для задания 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
 

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

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

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

nextElement.focus();