php - 将表单的值发送到隐藏的重力场表单

Question

我制作了一个自定义表单，其中包含项目的复选框。如果用户选中该复选框，则会显示总金额以及姓名、电子邮件、地址和消息的重力形式。如果用户填写自定义表单和重力表单，其中包含检查总和的项目，并且表单填写重力表单部分，我希望收到一封电子邮件。重力形式没问题。我可以收到重力表格部分的电子邮件，但我想知道检查了哪些项目以及通过重力表格发送的同一封电子邮件中的总金额

Heres the custom form that i have made

有没有办法将我的定制表单的值解析为隐藏的重力场表单？如果有的话，从重力形态发邮件给我就更好了。我的所有文件都在我的本地主机中，因此无法链接到网站，但有一个 fiddle 可以查看表单。

我在其中使用的Js是

var inputs = document.getElementsByClassName('immer'),
        total  = document.getElementById('immer-total');

 for (var i=0; i < inputs.length; i++) {
        inputs[i].onchange = function() {
            var add = this.value * (this.checked ? 1 : -1);
            total.innerHTML = parseFloat(total.innerHTML) + add
        }
    }

 var dazuinputs = document.getElementsByClassName('dazu'),
        totalDazu  = document.getElementById('dazu-total');
 for (var i=0; i < dazuinputs.length; i++) {
        dazuinputs[i].onchange = function() {
            var add = this.value * (this.checked ? 1 : -1);
            totalDazu.innerHTML = parseFloat(totalDazu.innerHTML) + add
        }
    }       

我需要获取已检查的总项目的值以及总和隐藏字段的 HTML 是

<input name="input_6" id="input_1_6" type="hidden" class="gform_hidden" aria-invalid="false" value="template-calculator">

是否有办法在用户单击提交按钮时将 #immer-total 的值获取到隐藏字段名称 input_6。

经过一番研究，我得到了一个 js

   var counter = 0;
  $('.gform_button').click(function(event){
   event.preventDefault();
    counter++;

     ...
   $('#immer-total').attr('input_3', counter);
   }

但没有得到结果。

Answer 1

jQuery 在这里确实可以帮助你。不必在每次有人点击输入时对输入进行计数 - 只需在需要时对输入进行计数:

counter = $('input:checkbox:checked').length

然后您可以将该数字设置为隐藏字段的值:

$('#input_1_6').val(counter)

最好在提交表单时这样做:

$(function() {
    $('#frm1').submit(function() {
        counter = $('input:checkbox:checked').length;
        alert('Total number of checked checkboxes: '+counter);
        $('#input_1_6').val(counter);
    });
});

Note - the link you provided doesn't have the <form> tag and not the hidden input field.

这是一个基于您的代码的工作示例:

$(function() {
        $('#frm1').submit(function() {
            counter = $('input:checkbox:checked').length;
            alert('Total number of checked checkboxes: '+counter);
            $('#input_1_6').val(counter);
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm1" action="" method="post">
  <section id="template-calculator-wrap">
	<div class="calculator-margin">
		<h1>Paket-Konfigurator für Ihren Hotel oder Restaurant Webauftritt</h1>
		<div class="red-bar"></div>
		<h2>We create a unique process for each client to ensure that business objectives are met, success is achieved and users are happy.</h2>

		<div class="calculator-total-wrap">
			<div class="row">
				<div class="col-md-6 col-sm-6 col-xs-6 calc-total1">
					<h1><span>CHF</span> 4’850.-</h1>
					<h3>Erstellung einmalig</h3>
				</div>

				<div class="col-md-6 col-sm-6 col-xs-6 calc-total2">
					<h1><span>CHF</span> 2’975.-</h1>
					<h3>Unterhalt jährlich</h3>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6 col-sm-6">
				<div class="price-col-title-wrap">
					<h4>Immer enthalten</h4>
					<h3><span>CHF</span> <span id="immer-total">0</span>.-</h3>
				 	  <input type="checkbox" id="c1" class="immer" value="50" name="cc" onclick="return false" checked="">
				      <label for="c1"><span> </span> Installation Wordpress</label> <br>
				      
				      <input type="checkbox" id="c2" class="immer" value="50" name="cc">
				      <label for="c2"><span> </span>  Basis SEO und Dynamic Sitemap</label> <br>

				      <input type="checkbox" id="c3" class="immer" value="50" name="cc">
				      <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br>

				      <input type="checkbox" id="c4" class="immer" value="50" name="cc">
				      <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br>

				      <input type="checkbox" id="c5" class="immer" value="50" name="cc">
				      <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br>

				      <input type="checkbox" id="c6" class="immer" value="50" name="cc">
				      <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br>
		      </div>

		      <div class="price-col-title-wrap">
					<h4>Dazu Module für Funktionalität</h4>
					<h3><span>CHF</span> <span id="dazu-total">0</span>.-</h3>
				 	  <input value="50" class="dazu" type="checkbox" id="d1" name="cc">
				      <label for="d1"><span> </span> Installation Wordpress</label> <br>
				      
				      <input value="50" class="dazu" type="checkbox" id="d2" name="cc">
				      <label for="d2"><span> </span>  Basis SEO und Dynamic Sitemap</label> <br>

				      <input value="50" class="dazu" type="checkbox" id="d3" name="cc">
				      <label for="d3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br>

				      <input value="50" class="dazu" type="checkbox" id="d4" name="cc">
				      <label for="d4"><span> </span> Seite für Datenschutz und Impressum</label> <br>

				      <input value="50" class="dazu" type="checkbox" id="d5" name="cc">
				      <label for="d5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br>

				      <input class="dazu" type="checkbox" id="c6" name="cc">
				      <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br>

				      <input class="dazu" type="checkbox" id="c1" name="cc">
				      <label for="c1"><span> </span> Installation Wordpress</label> <br>
				      
				      <input class="dazu" type="checkbox" id="c2" name="cc">
				      <label for="c2"><span> </span>  Basis SEO und Dynamic Sitemap</label> <br>

				      <input class="dazu" type="checkbox" id="c3" name="cc">
				      <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br>

				      <input class="dazu" type="checkbox" id="c4" name="cc">
				      <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br>

				      <input class="dazu" type="checkbox" id="c5" name="cc">
				      <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br>

				      <input class="dazu" type="checkbox" id="c6" name="cc">
				      <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br>

				      <input class="dazu" type="checkbox" id="c1" name="cc">
				      <label for="c1"><span> </span> Installation Wordpress</label> <br>
				      
				      <input class="dazu" type="checkbox" id="c2" name="cc">
				      <label for="c2"><span> </span>  Basis SEO und Dynamic Sitemap</label> <br>

				      <input class="dazu" type="checkbox" id="c3" name="cc">
				      <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br>

				      <input class="dazu" type="checkbox" id="c4" name="cc">
				      <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br>


				      <input class="dazu" type="checkbox" id="c6" name="cc">
				      <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br>
		      </div>

	      </div>

	      <div class="col-md-6 col-sm-6">
				<div class="price-col-title-wrap">
					<h4>Immer enthalten</h4>
					<h3><span>CHF</span> 1’600.-</h3>
				 	  <input type="checkbox" id="c1" name="cc">
				      <label for="c1"><span> </span> Installation Wordpress</label> <br>
				      
				      <input type="checkbox" id="c2" name="cc">
				      <label for="c2"><span> </span>  Basis SEO und Dynamic Sitemap</label> <br>

				      <input type="checkbox" id="c3" name="cc">
				      <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br>

				      <input type="checkbox" id="c4" name="cc">
				      <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br>

				      <input type="checkbox" id="c5" name="cc">
				      <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br>

				      <input type="checkbox" id="c6" name="radio">
				      <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br>
					
					<label>Design-Anpassungen Paket </label><br>
				     <input type="radio" id="R1" name="cc">
				     <label for="R1" class="radio-padding-right"><span> </span> 8 Stunden</label> 
					
					 <input type="radio" id="R2" name="cc">
				     <label for="R2"><span> </span> 12 Stunden</label> <br>
		      </div>

		      <div class="price-col-title-wrap">
					<h4>Dazu Module für Content</h4>
					<h3><span>CHF</span> 1’600.-</h3>

					<label>Design-Anpassungen Paket </label><br>
				        <div class="numbers-row">
					        <!-- <label for="name">French Hens</label> <br/> -->
					        <div class="dec button">-</div>
					        <input type="text" name="french-hens" id="french-hens" value="11">
					        <div class="inc button">+</div>
			            </div> 
									
					 
					<input type="checkbox" id="c5" name="cc">
				    <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br>

				     <label>Design-Anpassungen Paket </label><br>
				     <input type="radio" id="R4" name="cc">
				     <label for="R4" class="radio-padding-right"><span> </span> 8 Stunden</label> 
					
					 <input type="radio" id="R5" name="cc">
				     <label for="R5" class="radio-padding-right"><span> </span> 12 Stunden</label> 

				     <input type="radio" id="R3" name="cc">
				     <label for="R3"><span> </span> 12 Stunden</label> <br>

				     <label>Design-Anpassungen Paket </label><br>
				     <input type="radio" id="R4" name="cc">
				     <label for="R4" class="radio-padding-right"><span> </span> 8 Stunden</label> 
					
					 <input type="radio" id="R5" name="cc">
				     <label for="R5" class="radio-padding-right"><span> </span> 12 Stunden</label> 

				     <input type="radio" id="R3" name="cc">
				     <label for="R3"><span> </span> 12 Stunden</label> <br>

				     <label>Design-Anpassungen Paket </label><br>
				     <input type="radio" id="R4" name="cc">
				     <label for="R4" class="radio-padding-right"><span> </span> 8 Stunden</label> 
					
					 <input type="radio" id="R5" name="cc">
				     <label for="R5" class="radio-padding-right"><span> </span> 12 Stunden</label> 

				     <input type="radio" id="R3" name="cc">
				     <label for="R3"><span> </span> 12 Stunden</label> <br>
		      </div>
				
	   

	      </div>

	    </div>

			<!-- gravity form here -->

 	</div> <!-- end calculator-margin div -->
	

</section>
<input name="input_6" id="input_1_6" type="hidden" class="gform_hidden" aria-invalid="false" value="template-calculator">
  <input type="submit" name="submit" value="submit" />
</form>