英文:
Populate a field with another field value in gravity forms
问题
我目前在我的WordPress网站上有一个简单的重力表单,其中包括一个具有3个选项的单选按钮字段:(单身,已婚,免税)。
如果用户在单选按钮字段中选择了选项“免税”,我希望能动态填充同一表单上的一个隐藏文本字段,值为“免税”。如果用户选择了其他选项(单身或已婚),我希望文本字段中的值为NULL。
有人之前是否做过类似的事情,如果是的话,你能帮助我完成这些步骤吗?
英文:
I currently have a simple gravity form on my WordPress website that includes a radio button field with 3 options: (Single, Married, Exempt).
I am wanting to dynamically populate a separate hidden text field on the same form with the value "Exempt" if the user selects the option Exempt in the radio button field. If the user selects one of the other options (Single or Married), I would like the value in the text field to be NULL.
Has anyone done something similar to this before, and if so, could you assist me with the steps to accomplish this?
答案1
得分: 1
你需要将代码添加到一个自定义的JavaScript文件中。你可以在这里阅读关于如何添加JavaScript文件的信息。在你的评论中,你只提供了一个radio
输入的ID,但每个输入应该有自己独特的ID。所以假设这个表单上唯一的radio
输入是这3个输入,你也可以通过type
(就像下面我所做的那样)来定位它们。如果你想分享你表单的HTML,我可以更具体地调整答案。
代码示例:
// 文档准备好的WordPress函数
jQuery(function($) {
$('form#25 input[type="radio"]').change(function(){
if (this.value === 'exempt') {
$('input#26').val(this.value);
} else {
$('input#26').val(null);
}
})
});
label {
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="25">
<label>Single<input type="radio" name="marriage-status" value="single" /></label>
<label>Married<input type="radio" name="marriage-status" value="married" /></label>
<label>Exempt<input type="radio" name="marriage-status" value="exempt" /></label>
<!-- 隐藏输入 -->
<input id="26" type="text" />
</form>
如果你的表单只有"Filing Status"的radio
输入,你可以这样做:
// 文档准备好的WordPress函数
jQuery(function($) {
$('form#gform_25 input[type="radio"]').change(function(){
if (this.value === 'Exempt') {
$('input#input_25_24_valid').val(this.value);
} else {
$('input#input_25_24_valid').val(null);
}
})
});
ul {
padding-left:0;
}
li {
list-style-type:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="gform_25">
<li id="field_25_9" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible">
<label class="gfield_label">Filing Status<span class="gfield_required">*</span></label>
<div class="ginput_container ginput_container_radio">
<ul class="gfield_radio" id="input_25_9">
<li class="gchoice_25_9_0"><input name="input_9" type="radio" value="Single or Married filing separately" id="choice_25_9_0"><label for="choice_25_9_0" id="label_25_9_0">Single or Married filing separately</label></li>
<li class="gchoice_25_9_1"><input name="input_9" type="radio" value="Married filing jointly" id="choice_25_9_1"><label for="choice_25_9_1" id="label_25_9_1">Married filing jointly (or Qualifying widow(er))</label></li>
<li class="gchoice_25_9_2"><input name="input_9" type="radio" value="Head of household" id="choice_25_9_2"><label for="choice_25_9_2" id="label_25_9_2">Head of household (Check only if you're unmarried and pay more than half the costs of keeping up a home for yourself and a qualifying individual.)</label></li>
<li class="gchoice_25_9_3"><input name="input_9" type="radio" value="Exempt" id="choice_25_9_3"><label for="choice_25_9_3" id="label_25_9_3">Exempt</label></li>
</ul>
</div>
</li>
<!-- 你的隐藏输入 -->
<input type="text" class="gform_hidden" name="input_25_24_valid" id="input_25_24_valid">
</form>
英文:
You would need to add the code to a custom JavaScript file. You can read up on enqueuing JavaScript files here. In your comment you only provide one ID for the radio
inputs, but each input should have it's own unique ID. So assuming your only radio inputs on this form are those 3 inputs, you could also target by type
(as I have done below). If you want to share the HTML of your form I can tailor the answer more to your specific scenario.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// Document ready function for WordPress
jQuery(function($) {
$('form#25 input[type="radio"]').change(function(){
if (this.value === 'exempt') {
$('input#26').val(this.value);
} else {
$('input#26').val(null);
}
})
});
<!-- language: lang-css -->
label {
display:block;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="25">
<label>Single<input type="radio" name="marriage-status" value="single" /></label>
<label>Married<input type="radio" name="marriage-status" value="married" /></label>
<label>Exempt<input type="radio" name="marriage-status" value="exempt" /></label>
<!-- HIDDEN INPUT -->
<input id="26" type="text" />
</form>
<!-- end snippet -->
It looks like your form only has radio
inputs for "Filing Status," so you can do it like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// Document ready function for WordPress
jQuery(function($) {
$('form#gform_25 input[type="radio"]').change(function(){
if (this.value === 'Exempt') {
$('input#input_25_24_valid').val(this.value);
} else {
$('input#input_25_24_valid').val(null);
}
})
});
<!-- language: lang-css -->
ul {
padding-left:0;
}
li {
list-style-type:none;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="gform_25">
<li id="field_25_9" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible">
<label class="gfield_label">Filing Status<span class="gfield_required">*</span></label>
<div class="ginput_container ginput_container_radio">
<ul class="gfield_radio" id="input_25_9">
<li class="gchoice_25_9_0"><input name="input_9" type="radio" value="Single or Married filing sperately" id="choice_25_9_0"><label for="choice_25_9_0" id="label_25_9_0">Single or Married filing sperately</label></li>
<li class="gchoice_25_9_1"><input name="input_9" type="radio" value="Married filing jointly" id="choice_25_9_1"><label for="choice_25_9_1" id="label_25_9_1">Married filing jointly (or Qualifying widow(er))</label></li>
<li class="gchoice_25_9_2"><input name="input_9" type="radio" value="Head of household" id="choice_25_9_2"><label for="choice_25_9_2" id="label_25_9_2">Head of household (Check only if you're unmarried and pay more than half the costs of keeping up a home for yourself and a qualifying individual.)</label></li>
<li class="gchoice_25_9_3"><input name="input_9" type="radio" value="Exempt" id="choice_25_9_3"><label for="choice_25_9_3" id="label_25_9_3">Exempt</label></li>
</ul>
</div>
</li>
<!-- Your hidden input -->
<input type="text" class="gform_hidden" name="input_25_24_valid" id="input_25_24_valid">
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论