时间戳

首页 > 解决方案 > 自动编译表单中可变数量的字段

javascript - 自动编译表单中可变数量的字段

问题描述

早上好，我需要创建一个按钮，通过 JAVASCRIPT 自动填写 HTML 页面的 INPUT、SELECT 和 RADIO 字段（这是一个注册表单）。这些字段的数量是未知的，它因情况而异。

在 INPUT 字段中，按钮应自动插入文本 TEST，而对于 SELECT 和 RADIO 字段，选择第一个可用的。

然后该按钮应识别 HTML 页面中存在多少 INPUT、SELECT 和 RADIO 并自动填写它们。

谁能帮帮我？非常感谢！

这里有一个例子：

<form id="booking_guests" method="post" class="needs-validation" novalidate="" action="/it/booking/guests/book/" data-next-booking-step="/it/quote/proceed/">


  <div class="booking-one-room">
    <div class="room_recap">
      <h2>Camera 1</h2>
      <p>1 adulto</p>
    </div>


    <div class="collapse-cont" data-toggle="collapse" data-target="#guest1" aria-expanded="true" aria-controls="guest1">
      <p>Ospite 1: Adulto</p>

      <input type="hidden" name="room[1][person:1][type]" value="Adults">
      <input type="hidden" name="room[1][person:1][typeBook]" value="Adult">
    </div>

    <div id="guest1" class="booking-one-guest collapse show" aria-labelledby="guest1" data-parent="#guest1">

      <div class="form-group d-md-flex justify-content-md-between">
        <div class="col-md-5">
          <label>Titolo *</label>
          <select class="form-control brs_input-form" name="room[1][person:1][title]" required="">
            <option value="" selected="" disabled="">Seleziona</option>
            <option value="Mr">
              Sig.
            </option>
            <option value="Mrs">
              Sig.ra
            </option>
          </select>


        </div>
      </div>

      <div class="form-group d-md-flex justify-content-md-between">
        <div class="col-md-7">
          <label>Nome *</label>
          <input type="text" class=" form-control brs_input-form" name="room[1][person:1][name]" required="" value="">


        </div>
      </div>

      <div class="form-group d-md-flex justify-content-md-between">
        <div class="col-md-7">
          <label>Cognome *</label>
          <input type="text" class="form-control brs_input-form" name="room[1][person:1][surname]" required="" value="">


        </div>
      </div>

      <div class="form-group d-md-flex justify-content-md-between">
        <div class="col-md-7">
          <label>Data di nascita *</label>
          <input type="hidden" class="form-control brs_input-form db1 flatpickr-input" name="room[1][person:1][birthday]" min="1921-04-28" max="2003-04-28" required="" value="2003-04-10"><input class="form-control brs_input-form db1 input" placeholder=""
            required="" tabindex="0" type="text" readonly="readonly">


        </div>
      </div>

      <div class="form-group d-md-flex justify-content-md-between">
        <div class="col-md-5">
          <label>Sesso *</label>
          <select class="form-control brs_input-form" name="room[1][person:1][gender]" required="">
            <option value="" selected="" disabled="">Seleziona</option>
            <option value="Male">
              Maschile
            </option>
            <option value="Female">
              Femminile
            </option>
          </select>


        </div>
      </div>

      <div class="form-group d-md-flex justify-content-md-between">
        <div class="col-md-7 brs_radio-check">
          <input class="form-control lead_check" type="radio" name="leading" id="radio1" value="1:1">
          <label for="radio1">Intestatario pratica</label>


        </div>
      </div>
      <div class="lead_extra_fields" style="display: block;">

        <div class="form-group d-md-flex justify-content-md-between">
          <div class="col-md-5">
            <label>Paese *</label>
            <select class="form-control countrySelect brs_input-form required-to-lead" name="room[1][person:1][country]" required="">
              <option value="" selected="" disabled="">Seleziona</option>
              <option value="1">
                Italia
              </option>
              <option value="2">
                Spagna
              </option>
              <option value="3">
                Germania
              </option>
              <option value="4">

            </select>


          </div>
        </div>

        <div class="form-group d-md-flex justify-content-md-between">
          <div class="col-md-7">
            <label>Indirizzo *</label>
            <input type="text" class="form-control brs_input-form required-to-lead" name="room[1][person:1][address]" value="" required="">


          </div>
        </div>

        <div class="form-group d-md-flex justify-content-md-between">
          <div class="col-md-7">
            <label>Codice postale *</label>
            <input type="number" class="form-control brs_input-form required-to-lead" name="room[1][person:1][zip]" value="" required="">


          </div>
        </div>

        <div class="form-group d-md-flex justify-content-md-between">
          <div class="col-md-7">
            <label>Città *</label>
            <input type="text" class="form-control brs_input-form required-to-lead" name="room[1][person:1][city]" value="" required="">


          </div>
        </div>


        <div class="form-group d-md-flex justify-content-md-between">
          <div class="col-md-7">
            <label>Telefono *</label>
            <input type="text" class="form-control brs_input-form required-to-lead" name="room[1][person:1][phone]" value="" required="">


          </div>
        </div>

        <div class="form-group d-md-flex justify-content-md-between">
          <div class="col-md-7">
            <label>Cellulare *</label>
            <input type="text" class="form-control brs_input-form required-to-lead" name="room[1][person:1][mobile]" value="" required="">



          </div>
        </div>

        <div class="form-group d-md-flex justify-content-md-between">
          <div class="col-md-7">
            <label>Email *</label>
            <input type="email" class="form-control brs_input-form required-to-lead" name="room[1][person:1][email]" value="" required="">

            <div class="invalid-feedback">^ Questo campo è obbligatorio, e deve indicare un indirizzo email valido</div>
          </div>
        </div>
        <div class="form-group d-md-flex justify-content-md-between" style="display: none !important">
          <div class="col-md-7">
            <label>Codice fiscale *</label>
            <input type="text" class="form-control brs_input-form cod-fis required-to-lead required-italy-only" minlength="16" maxlength="16" pattern="^[a-zA-Z]{6}[0-9]{2}[a-zA-Z][0-9]{2}[a-zA-Z][0-9]{3}[a-zA-Z]$" name="room[1][person:1][ssn]" value="">

            <div class="invalid-feedback">^ Questo campo è obbligatorio e deve contenere un codice fiscale valido</div>
          </div>
        </div>
        <div class="custom-select-privacy">
          <div class="title">Preferenze di contatto</div>
          <p>Vorremmo inviarti degli aggiornamenti sulle ultime promozioni e novità di Imperatore.<br> A questo link puoi consultare la nostra <a class="privacy-link" href="/it/azienda/privacy/">politica sulla privacy</a>.</p>
          <div id="selected--zg-ul-select" class=""></div>
          <ul class="be-select zg-ul-select" tabindex="0">
            <li class="accept-contact-yes active"><a>Si, voglio ricevere aggiornamenti sulle novità di Imperatore</a></li>
            <li class=""><a>No, non voglio ricevere nessuna comunicazione</a></li>
          </ul>
        </div>
        <div class="brs_filter-check">
          <input type="checkbox" id="el21" class="accept-contact" name="room[1][person:1][accept_post]" checked="">
          <label for="el21">post</label>
        </div>
        <div class="brs_filter-check">
          <input type="checkbox" id="el31" class="accept-contact" name="room[1][person:1][accept_email]" checked="">
          <label for="el31">email</label>
        </div>
        <div class="brs_filter-check">
          <input type="checkbox" id="el41" class="accept-contact" name="room[1][person:1][accept_phone]" checked="">
          <label for="el41">phone</label>
        </div>
        <div class="brs_filter-check">
          <input type="checkbox" id="el51" class="accept-contact" name="room[1][person:1][accept_sms]" checked="">
          <label for="el51">sms</label>
        </div>
        <div class="brs_filter-check">
          <input type="checkbox" id="el61" class="accept-contact" name="room[1][person:1][accept_marketing]" checked="">
          <label for="el61">marketing</label>
        </div>
      </div>
    </div>

  </div>

  <div class="room_submit">
    <input type="submit" class="book-extra brs_btn-primary-small" value="Procedi con il preventivo">
  </div>

</form>

标签： javascriptjquery

解决方案

<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>

  YOUR CODE HERE
    <button id="go">CLick me</button>

<script>
$(document).ready(function(){
    
    $("#go").on('click',function(){
        $("input[type='text'],input[type='email']").each(function(){
           $(this).val('Test'); 
        });
        
        $("select").each(function(){
           $(this)[0].selectedIndex = 1;      //change 1 for the index you want
        });

       $("div.brs_radio-check").each(function(){
          $( this ).children("input[type='radio']")[0].checked=true;
        });
    });
});
</script>

</body>
</html>

推荐阅读