Show submit button on valid data using jQuery

Question

I need to show the .nexto button once I have valid text in the input. Each and every field has its own button so the thing is when I get a valid value of input the button associated with the field should show and other input fields buttons should hide. Thank you.

var required = $('input[required]');
required.on('keyup', function(event) {
  if (this.value !== "") {
    $(this).$('.nexto').show();
  } else {
    $(this).$('.nexto').hide();
  }
})



  1→What's your First Name? *
  
    
    |
  
  
    OK ✔
  


  2→What's Your Last Name? *
  
    
    |
  
  
    OK ✔

user_1467988 · Answer

The way you find .nexto element is wrong. From this object inside the event handler, do find closest .typeform-element and then find .nexto child.

Also you need to hide all of the .nexto at start.

$('.nexto').hide()

var required = $('input[required]');
required.on('keyup', function (event) {
    var nexto = $(this).closest('.typeform-element').find('.nexto')
    if (this.value !== "") {
        nexto.show();
    } else {
        nexto.hide();
    }
})




    1→What's your First Name? *
    
        
        |
    
    
        OK ✔
    



    2→What's Your Last Name? *
    
        
        |
    
    
        OK ✔

user_519413 · Answer

To make this work you need to use jQuery's DOM traversal methods to find the .nexto related to the input which raised the event.

As such you can use a combination of closest(), next() and find(). Also note that you should use CSS to hide those elements by default. In addition, I'd suggest using the input event instead of keyup, as it also works for paste events triggered by the mouse. Try this:

var $required = $('input[required]');

$required.on('input', function(event) {
  $(this).closest('.input-element').next('.ok-btn').find('.nexto').toggle(this.value !== "");
})

.ok-btn .nexto { display: none; }



  1→What's your First Name? *
  
    
    |
  
  
    OK ✔
  


  2→What's Your Last Name? *
  
    
    |
  
  
    OK ✔

Show submit button on valid data using jQuery

2 Answers