Use form field values as URL params in hidden field

Question

I have a form with few text fields and one hidden field. Hidden field value need to be constructed as URL with other field values as params.

Hidden field value is being populated only when I start typing in the first field of the form but not the others unless I go back to the first field and update it. I need hidden field to be updated immediately on input. In the example below I'm showing hidden field (shortDescription) for the ease of testing.

I'm guessing the hidden field will need to be URL encoded as well, since the values could be characters that can break the URL (like @, ., etc) but not sure how?

Here's code:

 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>

Any ideas?

Answer 1

Because your elements:

shortName 
shortLastname
shortPhone
shortEmail
shortDescription

are already jquery elements you cannot combine them using the form:

$(shortName,shortLastname,shortEmail,shortPhone).

but you can use .add() in order to:

Create a new jQuery object with elements added to the set of matched elements.

 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>

Answer 2

You can simply delegate event into all inputs in form except result input (added id="result" into HTML)

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

Then you can save that result into variable and encode it, then put into filed...

  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);

Read about encodeURI and decodeURIComponent

Example:

 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>