Функция Javascript работает только в первом ряду только внутри моего модального - PullRequest
Новая
       14

Функция Javascript работает только в первом ряду только внутри моего модального

3 голосов
/ 30 мая 2019

Я использую функцию javascript для проверки ввода, когда она используется внутри модального режима.Я нажимаю кнопку редактирования в первом ряду, функции JavaScript работают хорошо.Но когда я нажимаю кнопку редактирования во втором ряду, и последующие строки, это не работает.

Я не совсем уверен, что проблема в данных внутри модальных или данных вне модальных

Я попытался добавить имя класса в поля ввода и изменить вызывающую функцию в javascript с"#name" в ".name", но это не сработало.

Я также попробовал функцию показанного.bs

// Вот мой код для таблицы (частичный) 

    <?php
    if ($result = mysqli_query($conn, $sql_accounts)) {
    while ($row=mysqli_fetch_array($result)) {
    ?>
    <tr>
    <form action="update.php" method="POST">
    <td>
    <?php echo $row["username"]; ?> </td>
    <td>
    <?php echo $row["firstname"]; ?> </td>
    <td> .....
    <td>
    <?php echo $row["status"]; ?> </td>
    <td>
    <?php
    if ($row["status"] == "Deactivated") {
    ?>
    <a href="update.php?activate=<?php echo $row['accountid']; ?>" class="btn btn-info"> Activate </a>
    <?php
    } elseif ($row["status"] == "Active") {
    ?>
    <a href="update.php?deactivate=<?php echo $row['accountid']; ?>" class="btn btn-warning"> Deactivate </a>
    <?php
    } ?>
    <a href="#edit<?php echo $row['accountid']; ?>" data-toggle="modal" class="btn btn-success" data-toggle="modal">Edit</a>

// Вот мой код для модального(частично) 

    <div id="edit<?php echo $row['accountid']; ?>" class="modal fade" role="dialog">
    <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Edit Account</h4>
    </div>
    <div class="modal-body">
    <form method="POST" action="editaccount.php">
    <div class="form-group">
    <input type="hidden" name="edit_item_id" value="<?php echo $row['accountid']; ?>">
    <label>Username</label>
    <span id="popover-username" class="pun hide pull-right block-help"><i class="fa fa-info-circle text-danger" aria-hidden="true"></i> Username must not contain any special characters</span>
    <input type="text" id="username" name="username" class="username form-control" value="<?php echo $row['username']; ?>" placeholder="Enter Username">

// Вот моя функция javascript 

    <script>
        $(document).ready(function() {

            $('#password').keyup(function() {
                var password = $('#password').val();
                if (checkStrength(password) == false) {
                    $("#submit").attr('disabled', 'disabled');
                }
            });

            $('#confirm_password').blur(function() {
                if ($('#password').val() !== $('#confirm_password').val()) {
                    $('#popover-cpassword').removeClass('hide');
                    $("#submit").attr('disabled', 'disabled');
                } else {
                    $('#popover-cpassword').addClass('hide');
                    $("#submit").removeAttr('disabled');
                }
            });

            $('#username').blur(function() {
                var regex = /\`|\~|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\+|\=|\[|\{|\]|\}|\||\\|\'|\<|\,|\.|\>|\?|\/|\""|\;|\:|\s/;
                if ($('#username').val().match(regex)) {
                    $('#popover-username').removeClass('hide');
                    $("#submit").attr('disabled', 'disabled');
                } else {
                    $('#popover-username').addClass('hide');
                    $('#sign-up').attr('disabled', false);
                    $("#submit").removeAttr('disabled');
                }
            })

            $('#contact_number').blur(function() {
                var regex = /^[(9)][(\d+)]{9}$/;
                if ($('#contact_number').val().match(regex)) {
                    $('#popover-cnumber').addClass('hide');
                    $("#submit").removeAttr('disabled');
                } else {
                    $('#popover-cnumber').removeClass('hide');                        
                    $("#submit").attr('disabled', 'disabled');
                }
            });

            $('#password').keyup(function() {
                var password = $('#password').val();
                if (checkStrength(password) == false) {
                    $("#submit").attr('disabled', 'disabled');
                }
            });

Сообщение должно появиться, если ввод неправильный, как, например, я ввел # в поле имени пользователя тамдолжно быть в сообщении имя пользователя должно содержать любой специальный символ, где функция javascript удаляет класс hide из кода span в модальном

Ответы [ 2 ]

1 голос
/ 30 мая 2019

Как я упоминал выше, вы должны использовать селектор классов, а также я немного улучшил ваши проверки 

$('.password').keyup(function() {
  $("#submit").prop('disabled', checkStrength($(this).val()) === false);
});

$('.confirm_password').blur(function() {
  var arePasswordTheSame = $('.password').val() !== $(this).val();
  $('.popover-cpassword').toggleClass('hide', !arePasswordTheSame);
  $("#submit").prop('disabled', !arePasswordTheSame)
});

$('.username').blur(function() {
  var regex = /\`|\~|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\+|\=|\[|\{|\]|\}|\||\\|\'|\<|\,|\.|\>|\?|\/|\""|\;|\:|\s/;
  var isUserNameCorrect = $(this).val().match(regex);
  $('.popover-username').toggleClass('hide', !isUserNameCorrect);
  $(".submit").prop('disabled', !isUserNameCorrect);
  $('.sign-up').prop('disabled', !isUserNameCorrect);
})

$('.contact_number').blur(function() {
  var regex = /^[(9)][(\d+)]{9}$/;
  var isNumberCorrect = $(this).val().match(regex)
  $('.popover-cnumber').toggleClass('hide', !isNumberCorrect);
  $(".submit").prop('disabled', !isNumberCorrect);
});

Также вам нужно будет добавить ваш текущий контейнер ко всем селекторам классов.Для получения дополнительной информации, пожалуйста, обратитесь API

0 голосов
/ 30 мая 2019

Этот подход будет работать только в том случае, если ваш php-код генерирует один

для каждой учетной записи, помещая их все в html.

...