Пройдя через дом для вложенных объектов - PullRequest
Новая
       3

Пройдя через дом для вложенных объектов

0 голосов
/ 16 мая 2018

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

Это мой HTML: 

<html lang="en">

<head>
    <title>HotGym</title>
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="content-language" content="he">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/master.css">
    <link rel="stylesheet" type="text/css" href="css/addTrainee.css">
    <link rel="shortcut icon" href="imgs/icon.png" type="image/x-icon">

</head>

<body>
    <div class="addNav"></div>
    <div class="pages">
        <div class="page">
            <h2 class="headline">Adding Trainee</h2>
            <div class="add_trainee">
                <form>
                    <div class="inp">
                        <p>Full name</p>
                        <input spaceholder="please enter fullname" type="text" class="fullName">
                    </div>
                    <div class="inp">
                        <p>Gender</p>
                        <input spaceholder="please  enter" type="text" class="gender">
                    </div>
                    <div class="inp">
                        <p>Age</p>
                        <input require spaceholder="please enter fullname" type="number" class="age">
                    </div>
                    <div class="inp">
                        <p>Phone number</p>
                        <input spaceholder="please enter fullname" type="text" class="phoneNumber">
                    </div>
                    <div class="inp">
                        <p>Adress</p>
                        <input spaceholder="please enter fullname" type="text" class="adress">
                    </div>
                    <div class="inp">
                        <p>Medical assurance Date</p>
                        <input spaceholder="please enter fullname" type="date" class="dateMedicalAssuranceEnd">
                    </div>
                    <div class="inp">
                        <p>Date start memebership</p>
                        <input spaceholder="please enter fullname" type="date" class="dateMembershipStart">
                    </div>
                    <div class="inp">
                        <p>Date end memebership</p>
                        <input spaceholder="please enter fullname" type="date" class="dateMembershipEnd">
                    </div>
                    <div class="inp">
                        <input class="addTrainee" type="submit" name="submit" value="save">
                    </div>
                </form>
            </div>
            <script src="jquery/dist/jquery.js"></script>
            <script src="js/add-trainee-main.js" type="module"></script>
</body>

</html>

мой jquery выглядит так: addBtn правильный, и я попробовал много методов отсюда:

https://api.jquery.com/category/traversing/

 handleAddTrainee() {
        // console.log(this);
        let addBtn = $('.addTrainee');
        // console.log(addBtn)
        debugger
        // $('.addTrainee').on('click', () => {
        // let $traineeForm = $(this).closest('.trainee-from') // need to know the way you orginized the html.

        // cetch trainee data 

        //----
        let fullName = addBtn.closest('.add_trainee').find('.inp').find('input.fullName').val();
        let gender = $(this).closest('.gender').val();
        let age = $(this).closest('.age').val();
        let phoneNumber = $(this).closest('.phoneNumber').val();
        let adress = $(this).closest('.adress').val();
        let dateMedicalAssuranceEnd = $(this).closest('.dateMedicalAssuranceEnd').val();
        let dateMembershipStart = $(this).closest('.dateMembershipStart').val();
        let dateMembershipEnd = $(this).closest('.dateMembershipEnd').val();
        //-----
        let traineeForm = {
            fullName: fullName,
            gender: gender,
            age: age,
            phoneNumber: phoneNumber,
            adress: adress,
            dateMedicalAssuranceEnd: dateMedicalAssuranceEnd,
            dateMembershipStart: dateMembershipStart,
        }
        this.gymRepo.addTrainee(traineeForm).then(() => {
                alert("new trainee as been saved");
            })
            // })
    }

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Я бы использовал ответ @ aa-Ahmed-aa с более полным примером. 

const recoverValues = function() {
  const values = {};

  $(':input').each(function(){
  if($(this).hasClass('addTrainee'))
    return;
  // very ugly code
  values[$(this).attr('class')] = $(this).val();
  });

  return values;
}

Чтобы вы могли получить хорошо выглядящий JSON для всех ваших входных данных, кроме кнопки отправки.

PS: мне нравится пробел;)

0 голосов
/ 16 мая 2018

вы используете jquery, так почему бы вам не использовать что-то подобное 

$(':input').each(function(){
if($(this).hasClass('addTrainee'))
    return;
console.log($(this).val() );
});

это даст вам значения всех входных данных, кроме кнопки сохранения

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...