Home › Forums › Quform WordPress › input field id keeps changing, how do i target it
- This topic has 12 replies, 2 voices, and was last updated 2 years ago by
joeblow44444444.
- AuthorPosts
- January 12, 2023 at 5:01 am #35063
joeblow44444444
Participantexample 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.
January 12, 2023 at 9:49 am #35064Ally
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
January 12, 2023 at 10:30 am #35066joeblow44444444
Participantbreaks 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?
January 12, 2023 at 12:13 pm #35067joeblow44444444
Participantsome 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.
January 12, 2023 at 6:57 pm #35069joeblow44444444
Participanthow do i get the data typed into the custom input fields to go to the database and emails? anyone?
January 13, 2023 at 10:27 am #35075Ally
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
January 15, 2023 at 2:31 pm #35082joeblow44444444
Participantnone 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 />
January 16, 2023 at 10:23 am #35086Ally
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
January 16, 2023 at 1:35 pm #35089joeblow44444444
Participantthat 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?
January 18, 2023 at 11:17 am #35091Ally
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
January 18, 2023 at 1:36 pm #35094joeblow44444444
Participantthanks 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?
January 19, 2023 at 11:07 am #35095Ally
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
January 22, 2023 at 8:59 am #35096joeblow44444444
Participantexcellent, worked. thanks again.
- AuthorPosts
- You must be logged in to reply to this topic.