Форум

misha.korolcov · #1 (**permalink**) 20.02.2020, 02:28

добрий день есть форма есть 5 инпутов с 5 айди как собрать их в масив и изменить допустим bagraun наred я тока у меняне никак не получаетьця

<form id="myForm" onsubmit="send_form(); return false;" action="" method="POST">
        <p class="mt-3 "> First name </p>
        <div class="form-group">
            <input type="text" class="form-control " name="first_name" id="first_name" placeholder=" Enter your first name" required min="2" max="30" id="first_name"><span id="validEmai"></span>
        </div>
        <p class="mt-3 "> Last name </p>
        <div class="form-group">
            <input type="text" class="form-control " name="last_name" id="last_name" placeholder=" Enter your last name " required min="2" max="30">
        </div>
        <p class="mt-3 "> Email </p>
        <div class="form-group">
           
            <div><input type="text" id="validate"   required min="2" max="30"><span id="validEmail"></span></div>
        </div><span id="validEmail"></span>
         
        <p class="mt-3 ">Phone </p>
        <div class="form-group">
            <input type="number" class="form-control " name="phone" id="phone" placeholder="+ XX (XXX)  XXX XX XX   " required min="7">
        </div>
        <p class=" mt-5 border-bottom-main"> Your question </p>

        <p class="mt-4 mb-2">Message</p>
        <div class="form-group">
            <textarea class="form-control" rows="6" name="message" placeholder="Enter your question" id="message" required="" min="4"></textarea>
        </div>
        <div class="row">
            <div class="col-12  col-md-5 col-lg-5  offset-md-7  mt-4">
                <button type="submit" class="button button-home">Submit </button>
            </div>
        </div>
    </form>


</div>

var arrList = $('#myForm input , #myForm textarea').map(function(){
    return $(this).attr('id');
}).get();
alert(arrList);

voraa · #2 (**permalink**) 20.02.2020, 07:37

let arrList = Array.from(document.getElementById('myForm').querySelelectorAll('input,textarea'));
arrList.forEach(elem =>/*делай с elem что хошь */)

рони · #3 (**permalink**) 20.02.2020, 07:55

voraa,
для forEach querySelelectorAll нет особой необходимости в Array.from.
https://developer.mozilla.org/en-US/...deList/forEach

voraa · #4 (**permalink**) 20.02.2020, 07:59

Согласен.
Но где гарантия, что arrList не понадобится потом для чего-нибудь еще
Если человек спрашивает про массив, то я и даю ему массив. А что он потом с ним будет делать, его дело

рони · #5 (**permalink**) 20.02.2020, 08:12

misha.korolcov,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .err{
      border: 1px solid rgba(255, 0, 0, 1);
  }
  ::-webkit-input-placeholder {color:#FFFFFF}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$('#myForm input , #myForm textarea').css({'background-color' : 'rgba(153, 50, 204, 1)', 'color' : 'rgba(255, 255, 255, 1)'});
/* или так */
$('#myForm input , #myForm textarea').addClass('err');

});
  </script>
</head>
<body>
<div>

<form id="myForm" onsubmit="send_form(); return false;" action="" method="POST">
        <p class="mt-3 "> First name </p>
        <div class="form-group">
            <input type="text" class="form-control " name="first_name" id="first_name" placeholder=" Enter your first name" required min="2" max="30" id="first_name"><span id="validEmai"></span>
        </div>
        <p class="mt-3 "> Last name </p>
        <div class="form-group">
            <input type="text" class="form-control " name="last_name" id="last_name" placeholder=" Enter your last name " required min="2" max="30">
        </div>
        <p class="mt-3 "> Email </p>
        <div class="form-group">

            <div><input type="text" id="validate"   required min="2" max="30"><span id="validEmail"></span></div>
        </div><span id="validEmail"></span>

        <p class="mt-3 ">Phone </p>
        <div class="form-group">
            <input type="number" class="form-control " name="phone" id="phone" placeholder="+ XX (XXX)  XXX XX XX   " required min="7">
        </div>
        <p class=" mt-5 border-bottom-main"> Your question </p>

        <p class="mt-4 mb-2">Message</p>
        <div class="form-group">
            <textarea class="form-control" rows="6" name="message" placeholder="Enter your question" id="message" required="" min="4"></textarea>
        </div>
        <div class="row">
            <div class="col-12  col-md-5 col-lg-5  offset-md-7  mt-4">
                <button type="submit" class="button button-home">Submit </button>
            </div>
        </div>
    </form>


</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript