javascript - 如何获取 html 垃圾邮件值并复制到另一个 html 字段

Question

我已经使用 $_POST 将数据从这个表单发送到另一个页面。但是，我需要将一个字段的值复制到另一个字段，如下所示（id="valparc" -> 要复制的字段的 id）：

该字段因用户的选择而异。我需要做的是获取该字段的值并在用户单击“提交”时复制到另一个字段。

这是html

   <section class="form-section">
        <div id="c-mask"></div>
      <div class="container">
        <div class="col-xs-12 col-sm-6 col-sm-offset-6 col-md-5 col-md-offset-6">
          <div class="form-lp">
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <h1 class="title-form">Quanto sua empresa precisa?</h1>
              </div>
              <form action="/calculadora/enviar.php" method="post">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                  <div class="value-range-total">
                    <span>R$</span>
                    <span id="slidernumber">3000</span>
                  </div>
                  <input type="range" name="valor" min="1000" step="500" max="10000" value="3000" />
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                  <span class="value-range">R$ 1mil</span>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                  <span class="value-range text-right">R$ 10mil</span>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                  <h2 class="title-form">Em quantas parcelas?</h2>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 p-5">
                    <!--<button class="button-line">6x</button>-->
                     <label for="6x" id="l6x" class="lblcheck">6x</label>
                    <input type="radio" id="6x" name="parcelas" value="6x" placeholder="6x" class="ipt-check">
                  </div>
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 p-5">
                    <!--<button class="button-line">12x</button>-->
                     <label for="12x" id="l12x" class="lblcheck active">12x</label>
                    <input type="radio" id="12x" name="parcelas" checked value="12x" placeholder="6x" class="ipt-check">
                  </div>
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 p-5">
                    <!--<button class="button-line active">18x</button>-->
                     <label for="18x" id="l18x" class="lblcheck">18x</label>
                    <input type="radio" id="18x" name="parcelas" value="18x" placeholder="6x" class="ipt-check">
                  </div>
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 p-5">
                    <!--<button class="button-line">24x</button>-->
                     <label for="24x" id="l24x" class="lblcheck">24x</label>
                    <input type="radio" id="24x" name="parcelas" value="24x" placeholder="6x" class="ipt-check">
                  </div>
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 p-5">
                    <!--<button class="button-line">36x</button>-->
                     <label for="36x" id="l36x" class="lblcheck">36x</label>
                    <input type="radio" id="36x" name="parcelas" value="36x" placeholder="6x" class="ipt-check">
                  </div>
                  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 p-5">
                    <!--<button class="button-line">48x</button>-->
                     <label for="48x" id="l48x" class="lblcheck">48x
                        <input type="radio" id="48x" name="parcelas" value="48x" class="ipt-check">
                     </label>
                  </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                  <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                      <h3 class="second-title-form">Parcelas a partir de:</h3>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                      <h4 class="title-form total-form">R$<span name="presta" id="valparc">357,83</span><span class="ast">*</span></h4>
                    </div>
                  </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                  <button class="btn-blue-light" id="finalbtn">SOLICITAR COTAÇÃO</button>
                </div>
                  <div class="boxenviar">
                    <input type="text" name="nome" placeholder="Nome" required class="ipt_form">
                    <input type="text" name="tel" placeholder="Telefone" id="tel" required class="ipt_form">
                    <input type="email" name="email" placeholder="E-mail" required class="ipt_form">
                    <input type="hidden" name="whats" value="99999999999">
<input type="hidden" name="valparc" value="">
                    <input type="submit" name="submit" value="solicitar cotação" class="ipt_sbmt">
                  </div>
              </form>
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <small class="info-form"><span class="ast">*</span> Esta é uma simulação. A análise real é individual e varia de empresa para empresa, para conhecer a sua, solicite uma cotação online.</small>
              </div>
            </div>
          </div>          
        </div>
      </div>
    </section>

不需要是“输入”我只需要表单上的这个字段保持隐藏并获取另一个字段的值。

接收数据的字段——

<input type="hidden" name="valparc" value="">

这个要复制的字段是动态的，由下面的js生成

<script type="text/javascript">
      $(document).ready(function(){
      $("[type=range]").change(function(){
        var newval= $(this).val();
        $("#slidernumber").text(newval);
          
         if ($('#6x').is(':checked')) {
             var result2 = newval * ((Math.pow((1+0.06), 6)*0.06)/(Math.pow((1+0.06), 6) - 1));
             $('#valparc').text(result2.toFixed(2).replace(".", ","));
         } else if ($('#12x').is(':checked')) {
             var result2 = newval * ((Math.pow((1+0.06), 12)*0.06)/(Math.pow((1+0.06), 12) - 1));
             $('#valparc').text(result2.toFixed(2).replace(".", ","));
             
         } else if ($('#18x').is(':checked')) {
             var result2 = newval * ((Math.pow((1+0.06), 18)*0.06)/(Math.pow((1+0.06), 18) - 1));
             $('#valparc').text(result2.toFixed(2).replace(".", ","));
              
         } else if ($('#24x').is(':checked')) {
             var result2 = newval * ((Math.pow((1+0.06), 24)*0.06)/(Math.pow((1+0.06), 24) - 1));
             $('#valparc').text(result2.toFixed(2).replace(".", ","));
             
         } else if ($('#36x').is(':checked')) {
             var result2 = newval * ((Math.pow((1+0.06), 36)*0.06)/(Math.pow((1+0.06), 36) - 1));
             $('#valparc').text(result2.toFixed(2).replace(".", ","));
             
         } else if ($('#48x').is(':checked')) {
             var result2 = newval * ((Math.pow((1+0.06), 48)*0.06)/(Math.pow((1+0.06), 48) - 1));
             $('#valparc').text(result2.toFixed(2).replace(".", ","));
             
         }
      });
        $('#l6x').click(function(){
            var valnew = $("[type=range]").val();
            $('#l6x').addClass('active');
            $('#l12x').removeClass('active');
            $('#l18x').removeClass('active');
            $('#l24x').removeClass('active');
            $('#l36x').removeClass('active');
            $('#l48x').removeClass('active');
             var result2 = valnew * ((Math.pow((1+0.06), 6)*0.06)/(Math.pow((1+0.06), 6) - 1));
             $('#valparc').text(result2.toFixed(2).replace(".", ","));
        });  
        $('#l12x').click(function(){
            var valnew = $("[type=range]").val();
            $('#l6x').removeClass('active');
            $('#l12x').addClass('active');
            $('#l18x').removeClass('active');
            $('#l24x').removeClass('active');
            $('#l36x').removeClass('active');
            $('#l48x').removeClass('active');
             var result2 = valnew * ((Math.pow((1+0.06), 12)*0.06)/(Math.pow((1+0.06), 12) - 1));
             $('#valparc').text(result2.toFixed(2).replace(".", ","));
        });  
        $('#l18x').click(function(){
            var valnew = $("[type=range]").val();
            $('#l6x').removeClass('active');
            $('#l12x').removeClass('active');
            $('#l18x').addClass('active');
            $('#l24x').removeClass('active');
            $('#l36x').removeClass('active');
            $('#l48x').removeClass('active');
             var result2 = valnew * ((Math.pow((1+0.06), 18)*0.06)/(Math.pow((1+0.06), 18) - 1));
             $('#valparc').text(result2.toFixed(2).replace(".", ","));
        });  
        $('#l24x').click(function(){
            var valnew = $("[type=range]").val();
            $('#l6x').removeClass('active');
            $('#l12x').removeClass('active');
            $('#l18x').removeClass('active');
            $('#l24x').addClass('active');
            $('#l36x').removeClass('active');
            $('#l48x').removeClass('active');
             var result2 = valnew * ((Math.pow((1+0.06), 24)*0.06)/(Math.pow((1+0.06), 24) - 1));
             $('#valparc').text(result2.toFixed(2).replace(".", ","));
        });  
        $('#l36x').click(function(){
            var valnew = $("[type=range]").val();
            $('#l6x').removeClass('active');
            $('#l12x').removeClass('active');
            $('#l18x').removeClass('active');
            $('#l24x').removeClass('active');
            $('#l36x').addClass('active');
            $('#l48x').removeClass('active');
             var result2 = valnew * ((Math.pow((1+0.06), 36)*0.06)/(Math.pow((1+0.06), 36) - 1));
             $('#valparc').text(result2.toFixed(2).replace(".", ","));
        });  
        $('#l48x').click(function(){
            var valnew = $("[type=range]").val();
            $('#l6x').removeClass('active');
            $('#l12x').removeClass('active');
            $('#l18x').removeClass('active');
            $('#l24x').removeClass('active');
            $('#l36x').removeClass('active');
            $('#l48x').addClass('active');
             var result2 = valnew * ((Math.pow((1+0.06), 48)*0.06)/(Math.pow((1+0.06), 48) - 1));
             $('#valparc').text(result2.toFixed(2).replace(".", ","));
        }); 
          $('#finalbtn').click(function(){
             $('.boxenviar').css('display','block'); 
             $('#c-mask').css('display','block'); 
          });
          $('#c-mask').click(function(){
             $('.boxenviar').css('display','none'); 
             $('#c-mask').css('display','none'); 
          });
          
    });
    </script>

这是我的第一份 js 工作，请耐心等待。我不太了解（还）。

当用户选择 12X 或其他方式的贷款时，字段“valparc”会更改其值。我已经尝试了很多在这里看到的东西，但还没有成功。

标签： javascriptphphtml

Answer 1

一种方法是在 form.submit 处填充该字段。您将事件侦听器附加到提交按钮，防止它自动提交，获取您想要的文本并将其应用于隐藏元素值。最后，您可以在完成后提交表单。

请注意，您的 html 没有显示表单开始标记，并且页面上可能有多个表单，因此我引用了封闭的表单元素.closest('form')

let b = document.querySelector('#finalbtn');
b.addEventListener('click', doValue)

function doValue(e) {
  e.preventDefault(); // stops automatic form submit
  let val = document.querySelector('span#valparc').innerText;
  document.querySelector('input[name="valparc"]').value = val;
  console.log(document.querySelector('input[name="valparc"]').value)
}

<form>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <h4 class="title-form total-form">R$<span id="valparc">357,83</span><span class="ast">*</span></h4>
    <!-- Field to copy -->
  </div>
  </div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <button class="btn-blue-light" id="finalbtn">SOLICITAR COTAÇÃO</button>
  </div>
  <div class="boxenviar">
    <input type="text" name="nome" placeholder="Nome" required class="ipt_form">
    <input type="text" name="tel" placeholder="Telefone" id="tel" required class="ipt_form">
    <input type="email" name="email" placeholder="E-mail" required class="ipt_form">
    <input type="hidden" name="valparc" value="" />
    <!-- This field will receive the copy data -->
    <input type="submit" name="submit" value="solicitar cotação" class="ipt_sbmt">
  </div>
</form>