Get value from custom HTML input structure

Home Forums Quform WordPress Get value from custom HTML input structure

This topic is: resolved
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #34743
    Rafal
    Participant

    Hello,
    How to get value from custom input (eg via “name” attribute)? I have created an HTML code that contains an custom input structure (incrementing/decrease values with plus and minus buttons) and JavaScript code.
    I would like the entered data to be sent to an e-mail and saved in the database as via default input
    So I created a hidden element to which I could insert a value from custom HTML, but i don’t know how to do this using PHP/JS.
    Could you please help me solve this problem?
    Thank you!

    HTML code:

    
    <!-- First custom input -->
    <div class="quform-label quform-label-yardage">
        <label class="quform-label-text" for="">Yardage<span class="quform-required">*</span></label>
    </div>
    <div class="input-group custom-plus-minus-input">
        <input type="number" step="1" min="1" max="1000" value="70" name="yardage" class="quantity-field form-control input-number quform-input quform-input-text quform-cf quform-field-yardage">
        <button type="button" class="button-minus btn" data-field="yardage">
            <i class="icon-line-minus"></i>
        </button>
        <button type="button" class="button-plus btn" data-field="yardage">
            <i class="icon-line-plus"></i>
        </button>
    </div>
    
    <!-- Second custom input -->
    <div class="quform-label quform-label-rooms">
        <label class="quform-label-text" for="">Rooms<span class="quform-required">*</span></label>
    </div>
    <div class="input-group custom-plus-minus-input">
        <input type="number" step="1" min="1" max="100" value="3" name="rooms" class="quantity-field form-control input-number quform-input quform-input-text quform-cf quform-field-rooms">
        <button type="button" class="button-minus btn" data-field="rooms">
            <i class="icon-line-minus"></i>
        </button>
        <button type="button" class="button-plus btn" data-field="rooms">
            <i class="icon-line-plus"></i>
        </button>
    </div>
    

    JavaScript code:

    
    function incrementValue(e) {
      e.preventDefault();
      var fieldName = $(e.target).data('field');
      var parent = $(e.target).closest('div');
      var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
    
      if (!isNaN(currentVal)) {
        parent.find('input[name=' + fieldName + ']').val(currentVal + 1);
      } else {
        parent.find('input[name=' + fieldName + ']').val(0);
      }
    }
    
    function decrementValue(e) {
      e.preventDefault();
      var fieldName = $(e.target).data('field');
      var parent = $(e.target).closest('div');
      var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
    
      if (!isNaN(currentVal) && currentVal > 0) {
        parent.find('input[name=' + fieldName + ']').val(currentVal - 1);
      } else {
        parent.find('input[name=' + fieldName + ']').val(0);
      }
    }
    
    $('.input-group').on('click', '.button-plus', function (e) {
      incrementValue(e);
    });
    
    $('.input-group').on('click', '.button-minus', function (e) {
      decrementValue(e);
    });
    
    • This topic was modified 2 months ago by Rafal.
    • This topic was modified 2 months ago by Rafal.
    • This topic was modified 2 months ago by Rafal.
    #34749
    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.

    #34778
    Rafal
    Participant

    Thank you for your help! The solution is very simple.
    Could I display the error (validator) below the custom input?
    I tried:

    
    add_filter('quform_element_valid_1_53', function ($valid, $value, Quform_Element_Field $element) {
        if (empty($value)) {
            $element->addError('The field is required');
            $valid = false;
        }
        return $valid;
    }, 10, 3);
    

    but it doesn’t work for me.
    if I set the attribute “required”, the form is sent despite the empty value

    
    <input class="quantity-field form-control input-number quform-input quform-input-text quform-cf quform-field-yardage" max="1000" min="1" name="quform_1_53" step="1" type="number" required />
    
    • This reply was modified 2 months ago by Rafal.
    #34783
    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.

    #34785
    Rafal
    Participant

    Thanks for your quick help.
    I have one last problem.
    I would like to change validator text for custom inputs.

    So I replace:

    
    $field->addValidator(new Quform_Validator_Required());
    

    to:

    
    $field->addValidator('required', array(
        'messages' => array('required' => 'Yardage is required!')
    ));
    

    according to the documentation: https://support.themecatcher.net/quform-php/customisation/validators/changing-the-required-error-message-this-field-is-required

    But it doesn’t work for me.

    Full code:

    
    add_filter('quform_pre_validate_1', function (array $result, Quform_Form $form) {
        $field = $form->getElement('quform_1_53');
        if($field instanceof Quform_Element_Field) {
            /* $field->addValidator(new Quform_Validator_Required()); */
            $field->addValidator('required', array(
                'messages' => array('required' => 'Yardage is required!')
            ));
        }
        return $result;
    },10, 2);
    
    • This reply was modified 1 month, 4 weeks ago by Rafal.
    • This reply was modified 1 month, 4 weeks ago by Rafal.
    • This reply was modified 1 month, 4 weeks ago by Rafal.
    #34793
    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.

    #34794
    Rafal
    Participant

    Thank you, it works great 🙂
    Regards,
    Rafal.

Viewing 7 posts - 1 through 7 (of 7 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