Get value from custom HTML input structure

[Rafal]

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 years, 1 month ago by Rafal.
• This topic was modified 2 years, 1 month ago by Rafal.
• This topic was modified 2 years, 1 month ago by Rafal.

[Ally]

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

[Rafal]

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 years, 1 month ago by Rafal.

[Ally]

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

[Rafal]

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 2 years, 1 month ago by Rafal.
• This reply was modified 2 years, 1 month ago by Rafal.
• This reply was modified 2 years, 1 month ago by Rafal.

[Ally]

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

[Rafal]

Thank you, it works great 🙂
Regards,
Rafal.

[Author]

Posts