input field id keeps changing, how do i target it

Home Forums Quform WordPress input field id keeps changing, how do i target it

This topic is: resolved
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #35063
    joeblow44444444
    Participant

    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.

    #35064
    Ally
    Support Staff

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

    #35066
    joeblow44444444
    Participant

    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?

    #35067
    joeblow44444444
    Participant

    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.

    #35069
    joeblow44444444
    Participant

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

    #35075
    Ally
    Support Staff

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

    #35082
    joeblow44444444
    Participant

    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 />
    #35086
    Ally
    Support Staff

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

    #35089
    joeblow44444444
    Participant

    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?

    #35091
    Ally
    Support Staff

    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 2 weeks, 2 days ago by Ally.
    • This reply was modified 2 weeks, 2 days ago by Ally.
    #35094
    joeblow44444444
    Participant

    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?

    #35095
    Ally
    Support Staff

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

    #35096
    joeblow44444444
    Participant

    excellent, worked. thanks again.

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2022 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy