使用表单字段值作为隐藏字段中的 URL 参数

Question

我有一个包含几个文本字段和一个隐藏字段的表单。隐藏字段值需要构造为 URL，其他字段值作为参数。

只有当我开始输入表单的第一个字段而不是其他字段时才会填充隐藏字段值，除非我返回第一个字段并更新它。 我需要在输入时立即更新隐藏字段。在下面的示例中，我将显示隐藏字段 (shortDescription)，以便于测试。

我猜隐藏字段也需要进行 URL 编码，因为这些值可能是会破坏 URL 的字符（如 @、. 等）但不确定如何？

代码如下：

shortName = $('#webform-client-form-2548 #edit-submitted-uw-gegevens-first-name');
  shortLastname = $('#webform-client-form-2548 #edit-submitted-uw-gegevens-last-name');
  shortPhone = $('#webform-client-form-2548 #edit-submitted-contact-info-phone');
  shortEmail = $('#webform-client-form-2548 #edit-submitted-contact-info-email');
  shortDescription = $('#webform-client-form-2548 .webform-component--description input');


$(shortName,shortLastname,shortEmail,shortPhone).on('input change blur keyup', function() {    
   $(shortDescription).val('https://example.com/link/product?first_name=' + shortName.val() + '&last_name=' + shortLastname.val() + '&email=' + shortEmail.val() + '&phone=' + shortPhone.val());
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="webform-client-form-2548">
<div class="form-item webform-component webform-component-textfield webform-component--uw-gegevens--first-name">
  <label class="element-invisible" for="edit-submitted-uw-gegevens-first-name">Voornaam <span class="form-required" title="Dit veld is verplicht.">*</span></label>
 <input required="required" placeholder="Voornaam" type="text" id="edit-submitted-uw-gegevens-first-name" name="submitted[uw_gegevens][first_name]" value="" size="60" maxlength="128" class="form-text required focusout" data-kwimpalastatus="alive" data-kwimpalaid="1600096712583-2">
</div>
<div class="form-item webform-component webform-component-textfield webform-component--uw-gegevens--last-name">
  <label class="element-invisible" for="edit-submitted-uw-gegevens-last-name">Achternaam <span class="form-required" title="Dit veld is verplicht.">*</span></label>
 <input required="required" placeholder="Achternaam" type="text" id="edit-submitted-uw-gegevens-last-name" name="submitted[uw_gegevens][last_name]" value="" size="60" maxlength="128" class="form-text required focusout" data-kwimpalastatus="alive" data-kwimpalaid="1600096712583-3">
</div>
  <input required="required" class="email form-text form-email required focusout" placeholder="E-mailadres" type="email" id="edit-submitted-contact-info-email" name="submitted[contact_info][email]" size="60" data-kwimpalastatus="alive" data-kwimpalaid="1600162335742-4">
  <input required="required" placeholder="Telefoonnummer" type="tel" id="edit-submitted-contact-info-phone" name="submitted[contact_info][phone]" value="" size="17" class="form-text form-tel required focusout" data-kwimpalastatus="alive" data-kwimpalaid="1600162335742-5">
<div class="form-item webform-component webform-component-hidden webform-component--description">
 <input type="text" name="submitted[description]" value="" style="width:800px">
</div>
</form>

有什么想法吗？

Answer 1

您可以简单地将事件委托给除结果输入之外的所有表单输入（将id="result" 添加到 HTML 中）

$("#webform-client-form-2548 input:not(#result)")

然后您可以将结果保存到变量中并对其进行编码，然后放入归档中...

  var url = 'https://example.com/link/product?first_name=' + shortName.val() + '&last_name=' + shortLastname.val() + '&email=' + shortEmail.val() + '&phone=' + shortPhone.val();
  var uri = encodeURI(url);
  $(shortDescription).val(uri);

了解encodeURI 和decodeURIComponent

示例：

shortName = $('#webform-client-form-2548 #edit-submitted-uw-gegevens-first-name');
shortLastname = $('#webform-client-form-2548 #edit-submitted-uw-gegevens-last-name');
shortPhone = $('#webform-client-form-2548 #edit-submitted-contact-info-phone');
shortEmail = $('#webform-client-form-2548 #edit-submitted-contact-info-email');
shortDescription = $('#webform-client-form-2548 .webform-component--description input');


$("#webform-client-form-2548 input:not(#result)").on('input change blur keyup', function() {
  var url = 'https://example.com/link/product?first_name=' + shortName.val() + '&last_name=' + shortLastname.val() + '&email=' + shortEmail.val() + '&phone=' + shortPhone.val();
  var uri = encodeURI(url);
  $(shortDescription).val(uri);
  var dec = decodeURIComponent(uri);
  console.clear();
  console.log(uri)
  console.log(dec)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="webform-client-form-2548">
  <div class="form-item webform-component webform-component-textfield webform-component--uw-gegevens--first-name">
    <label class="element-invisible" for="edit-submitted-uw-gegevens-first-name">Voornaam <span class="form-required" title="Dit veld is verplicht.">*</span></label>
    <input required="required" placeholder="Voornaam" type="text" id="edit-submitted-uw-gegevens-first-name" name="submitted[uw_gegevens][first_name]" value="" size="60" maxlength="128" class="form-text required focusout" data-kwimpalastatus="alive" data-kwimpalaid="1600096712583-2">
  </div>
  <div class="form-item webform-component webform-component-textfield webform-component--uw-gegevens--last-name">
    <label class="element-invisible" for="edit-submitted-uw-gegevens-last-name">Achternaam <span class="form-required" title="Dit veld is verplicht.">*</span></label>
    <input required="required" placeholder="Achternaam" type="text" id="edit-submitted-uw-gegevens-last-name" name="submitted[uw_gegevens][last_name]" value="" size="60" maxlength="128" class="form-text required focusout" data-kwimpalastatus="alive" data-kwimpalaid="1600096712583-3">
  </div>
  <input required="required" class="email form-text form-email required focusout" placeholder="E-mailadres" type="email" id="edit-submitted-contact-info-email" name="submitted[contact_info][email]" size="60" data-kwimpalastatus="alive" data-kwimpalaid="1600162335742-4">
  <input required="required" placeholder="Telefoonnummer" type="tel" id="edit-submitted-contact-info-phone" name="submitted[contact_info][phone]" value="" size="17" class="form-text form-tel required focusout" data-kwimpalastatus="alive" data-kwimpalaid="1600162335742-5">
  <div class="form-item webform-component webform-component-hidden webform-component--description">
    <input type="text" id="result" name="submitted[description]" value="" style="width:800px">
  </div>
</form>

Answer 2

因为你的元素：

shortName 
shortLastname
shortPhone
shortEmail
shortDescription

已经是 jquery 元素，您不能使用以下形式将它们组合起来：

$(shortName,shortLastname,shortEmail,shortPhone).

但您可以使用.add() 来：

创建一个新的 jQuery 对象，并将元素添加到匹配的集合中 元素。

shortName = $('#webform-client-form-2548 #edit-submitted-uw-gegevens-first-name');
shortLastname = $('#webform-client-form-2548 #edit-submitted-uw-gegevens-last-name');
shortPhone = $('#webform-client-form-2548 #edit-submitted-contact-info-phone');
shortEmail = $('#webform-client-form-2548 #edit-submitted-contact-info-email');
shortDescription = $('#webform-client-form-2548 .webform-component--description input');


shortName.add(shortLastname.add(shortEmail.add(shortPhone))).on('input change blur keyup', function() {
    $(shortDescription).val('https://example.com/link/product?first_name=' + shortName.val() + '&last_name=' + shortLastname.val() + '&email=' + shortEmail.val() + '&phone=' + shortPhone.val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form id="webform-client-form-2548">
    <div class="form-item webform-component webform-component-textfield webform-component--uw-gegevens--first-name">
        <label class="element-invisible" for="edit-submitted-uw-gegevens-first-name">Voornaam <span class="form-required" title="Dit veld is verplicht.">*</span></label>
        <input required="required" placeholder="Voornaam" type="text" id="edit-submitted-uw-gegevens-first-name" name="submitted[uw_gegevens][first_name]" value="" size="60" maxlength="128" class="form-text required focusout" data-kwimpalastatus="alive" data-kwimpalaid="1600096712583-2">
    </div>
    <div class="form-item webform-component webform-component-textfield webform-component--uw-gegevens--last-name">
        <label class="element-invisible" for="edit-submitted-uw-gegevens-last-name">Achternaam <span class="form-required" title="Dit veld is verplicht.">*</span></label>
        <input required="required" placeholder="Achternaam" type="text" id="edit-submitted-uw-gegevens-last-name" name="submitted[uw_gegevens][last_name]" value="" size="60" maxlength="128" class="form-text required focusout" data-kwimpalastatus="alive" data-kwimpalaid="1600096712583-3">
    </div>
    <input required="required" class="email form-text form-email required focusout" placeholder="E-mailadres" type="email" id="edit-submitted-contact-info-email" name="submitted[contact_info][email]" size="60" data-kwimpalastatus="alive" data-kwimpalaid="1600162335742-4">
    <input required="required" placeholder="Telefoonnummer" type="tel" id="edit-submitted-contact-info-phone" name="submitted[contact_info][phone]" value="" size="17" class="form-text form-tel required focusout" data-kwimpalastatus="alive" data-kwimpalaid="1600162335742-5">
    <div class="form-item webform-component webform-component-hidden webform-component--description">
        <input type="text" name="submitted[description]" value="" style="width:800px">
    </div>
</form>