input field id keeps changing, how do i target it

[joeblow44444444]

example 50_20, but in browser inspect it shows with a different appendage every time the page is refreshed, presumably a session id, i.e. quform_50_20_cd5j98. how to target the changing input field in jquery?

code below is from a virtual number keypad, wherein the user taps buttons and the numbers appear in the input field:

$(document).ready(function () {
  const input_value = $("#quform_104_23");

  $("#quform_104_23").keypress(function () {
    return false;
  });

  $(".calc").click(function () {
    let value = $(this).val();
    field(value);
  });
  function field(value) {
    input_value.val(input_value.val() + value);
  }
  $("#clear").click(function () {
    input_value.val("");
  });
});

would rather have pinpad pass data to existing quform input field, but can’t figure out how, not a code guy.

any help is appreciated.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[joeblow44444444]

breaks it. ended up renaming the id selectors, worked for first input but not the rest. thinking there’s some way to use only quform functionality to accomplish this, just not smart enough to figure it out. this is for a form on a browser locked touchscreen, can’t use os virtual keyboard because it contains special characters, spacebars, tabs, etc, as well as methods of circumventing browser lock.

anyway i need each field in the step-page form (first name, last name, email, phone, etc) to have its own virtual keypad to enter alphabetic or numeric characters into the input fields. i played with layouts of checkboxes or radio buttons labeled a-z and 0-9 styled into grids under each input field, but can’t figure how to correctly pass the characters to the input fields, and still wouldn’t be able to select any letter/number more than once or a backspace button to delete a typo, for instance.

jquery plugins seem promising, but to integrate with quform they require a lot of customization that’s apparently over my head. any suggestions?

[joeblow44444444]

some progress with jquery, but data entered into the input fields doesn’t show up in email or entries. {all_form_data} simply sends the actual empty input fields from the form instead of the values entered into the input fields. not finding clear guidance in the docs.

[joeblow44444444]

how do i get the data typed into the custom input fields to go to the database and emails? anyone?

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[joeblow44444444]

none of the above. however, i was able to get the jquery virtual keypad to type into quform fields and the data is saved to entry dbase and emails. two things are still failing:

1) the preview page will not populate any field where data was entered via the keypad. have tried multiple iterations and combinations of blur, change, click, keydown, triggerhandlers, selectors, etc.

2) the keypad will not type into the stripe integration card element field.

maybe you’ll see something i don’t below.

keypad jquery example:

$(document).ready(function () {
   let input_1 = $(".quform-field-101_398");
   // have tried let, const, var
	
 $(".quform-field-101_398").keydown(function () {
    return false; 
  // have tried true
  });
	
  $(".calc").click(function () {
    let value1 = $(this).val();
    fieldfirst(value1);
  });
  function fieldfirst(value1) {
    input_1.val(input_1.val() + value1);
  }
  $("#clear").click(function () {
    input_1.val("");
  });
  $("#bkspc").click(function () {
    input_1.val(input_1.val().slice(0, -1));
  });
});

keypad html example:

      <input type="button" value="A" id="A" class="pinButton calc"/>
        <input type="button" value="B" id="B" class="pinButton calc"/>
        <input type="button" value="C" id="C" class="pinButton calc"/>
        <input type="button" value="D" id="D" class="pinButton calc"/>
        <input type="button" value="E" id="E" class="pinButton calc"/>
        <input type="button" value="F" id="F" class="pinButton calc"/>
        <input type="button" value="G" id="G" class="pinButton calc"/><br />
        <input type="button" value="H" id="H" class="pinButton calc"/>
        <input type="button" value="I" id="I" class="pinButton calc"/>
        <input type="button" value="J" id="J" class="pinButton calc"/>
        <input type="button" value="K" id="K" class="pinButton calc"/>
        <input type="button" value="L" id="L" class="pinButton calc"/>
        <input type="button" value="M" id="M" class="pinButton calc"/>
        <input type="button" value="N" id="N" class="pinButton calc"/><br />
        <input type="button" value="O" id="O" class="pinButton calc"/>
        <input type="button" value="P" id="P" class="pinButton calc"/>
        <input type="button" value="Q" id="Q" class="pinButton calc"/>
        <input type="button" value="R" id="R" class="pinButton calc"/>
        <input type="button" value="S" id="S" class="pinButton calc"/>
        <input type="button" value="T" id="T" class="pinButton calc"/>
        <input type="button" value="U" id="U" class="pinButton calc"/><br />
        <input type="button" value="V" id="V" class="pinButton calc"/>
        <input type="button" value="W" id="W" class="pinButton calc"/>
        <input type="button" value="X" id="X" class="pinButton calc"/>
        <input type="button" value="Y" id="Y" class="pinButton calc"/>
        <input type="button" value="Z" id="Z" class="pinButton calc"/>
        <input type="button" value="clear" id="clear" class="pinButton clear"/>
        <input type="button" value="back
space" id="bkspc" class="pinButton bkspc"/><br />

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[joeblow44444444]

that did it, thanks very much.

yeah there’s a proxy method to circumvent the xss cors thing but that’s outside the scope of quform.

off topic but is there ever going to be a way to style the kendo time and date pickers?

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

• This reply was modified 1 year, 3 months ago by Ally.
• This reply was modified 1 year, 3 months ago by Ally.

[joeblow44444444]

thanks but i should have been more specific. primarily needing responsive width and height per separate instances of the widget in separate forms on the same site.

i.e., quforms on two pages, one page is full width and another is two column. while the quforms on those pages are responsive, the calendar is always the same relative size and in the same relative position. how do i adjust each one’s width, height, position and responsiveness?

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[joeblow44444444]

excellent, worked. thanks again.

[Author]

Posts