在Gravity Forms中使用一个字段的值填充另一个字段。

huangapple go评论65阅读模式
英文:

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($) {
$(&#39;form#25 input[type=&quot;radio&quot;]&#39;).change(function(){
if (this.value === &#39;exempt&#39;) {
$(&#39;input#26&#39;).val(this.value);
} else {
$(&#39;input#26&#39;).val(null);
}
})
});

<!-- language: lang-css -->

label {
display:block;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;form id=&quot;25&quot;&gt;
&lt;label&gt;Single&lt;input type=&quot;radio&quot; name=&quot;marriage-status&quot; value=&quot;single&quot; /&gt;&lt;/label&gt;
&lt;label&gt;Married&lt;input type=&quot;radio&quot; name=&quot;marriage-status&quot; value=&quot;married&quot; /&gt;&lt;/label&gt;
&lt;label&gt;Exempt&lt;input type=&quot;radio&quot; name=&quot;marriage-status&quot; value=&quot;exempt&quot; /&gt;&lt;/label&gt;
&lt;!-- HIDDEN INPUT --&gt;
&lt;input id=&quot;26&quot; type=&quot;text&quot; /&gt;
&lt;/form&gt;

<!-- 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($) {
$(&#39;form#gform_25 input[type=&quot;radio&quot;]&#39;).change(function(){
if (this.value === &#39;Exempt&#39;) {
$(&#39;input#input_25_24_valid&#39;).val(this.value);
} else {
$(&#39;input#input_25_24_valid&#39;).val(null);
}
})
});

<!-- language: lang-css -->

ul {
padding-left:0;
}
li {
list-style-type:none;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;form id=&quot;gform_25&quot;&gt;
&lt;li id=&quot;field_25_9&quot; class=&quot;gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible&quot;&gt;
&lt;label class=&quot;gfield_label&quot;&gt;Filing Status&lt;span class=&quot;gfield_required&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
&lt;div class=&quot;ginput_container ginput_container_radio&quot;&gt;
&lt;ul class=&quot;gfield_radio&quot; id=&quot;input_25_9&quot;&gt;
&lt;li class=&quot;gchoice_25_9_0&quot;&gt;&lt;input name=&quot;input_9&quot; type=&quot;radio&quot; value=&quot;Single or Married filing sperately&quot; id=&quot;choice_25_9_0&quot;&gt;&lt;label for=&quot;choice_25_9_0&quot; id=&quot;label_25_9_0&quot;&gt;Single or Married filing sperately&lt;/label&gt;&lt;/li&gt;
&lt;li class=&quot;gchoice_25_9_1&quot;&gt;&lt;input name=&quot;input_9&quot; type=&quot;radio&quot; value=&quot;Married filing jointly&quot; id=&quot;choice_25_9_1&quot;&gt;&lt;label for=&quot;choice_25_9_1&quot; id=&quot;label_25_9_1&quot;&gt;Married filing jointly (or Qualifying widow(er))&lt;/label&gt;&lt;/li&gt;
&lt;li class=&quot;gchoice_25_9_2&quot;&gt;&lt;input name=&quot;input_9&quot; type=&quot;radio&quot; value=&quot;Head of household&quot; id=&quot;choice_25_9_2&quot;&gt;&lt;label for=&quot;choice_25_9_2&quot; id=&quot;label_25_9_2&quot;&gt;Head of household (Check only if you&#39;re unmarried and pay more than half the costs of keeping up a home for yourself and a qualifying individual.)&lt;/label&gt;&lt;/li&gt;
&lt;li class=&quot;gchoice_25_9_3&quot;&gt;&lt;input name=&quot;input_9&quot; type=&quot;radio&quot; value=&quot;Exempt&quot; id=&quot;choice_25_9_3&quot;&gt;&lt;label for=&quot;choice_25_9_3&quot; id=&quot;label_25_9_3&quot;&gt;Exempt&lt;/label&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- Your hidden input --&gt;
&lt;input type=&quot;text&quot; class=&quot;gform_hidden&quot; name=&quot;input_25_24_valid&quot; id=&quot;input_25_24_valid&quot;&gt;
&lt;/form&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年1月7日 00:42:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/59615854.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定