Enable the button when fields are filled in

Question

I’m wanting two things are: button enabled when fields are filled OR make mandatory in the fields (required), this I put the required in the input fields, when clicking Save/Continue, simply it continued without requiring to answer all. Because this HTML came with default without forcing the fields, just Skip or Save See the code below:

<div class="add-photo sun_startup">
    <div class="text-center">
        <h2><img src="https://img.icons8.com/dusk/64/000000/badge.png" width="40" height="40"/> <?php echo $wo['lang']['tell_us'];?></h2>
        <h4><?php echo $wo['lang']['tell_us_des'];?></h4>
        <form class="setting-general-form form-horizontal row" method="post">
            <div class="col-md-3 col-sm-2"></div>
            <div class="col-md-6 col-sm-8">
                <!-- Text input-->
                <div class="row">
                    <div class="col-sm-6">
                        <div class="sun_input">
                            <input id="first_name" name="first_name" type="text" required class="form-control input-md" placeholder="<?php echo $wo['lang']['first_name']; ?>" value="<?php echo $wo['user']['first_name']?>" autocomplete="off" autofocus> 
                            <label for="first_name"><img src="https://img.icons8.com/office/30/000000/rename.png" width="25" height="25"/> <?php echo $wo['lang']['first_name']; ?></label>  
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="sun_input">
                            <input name="last_name" id="last_name" type="text" required class="form-control input-md" placeholder="<?php echo $wo['lang']['last_name']; ?>" value="<?php echo $wo['user']['last_name']?>" autocomplete="off">
                            <label for="last_name"><img src="https://img.icons8.com/office/30/000000/rename.png" width="25" height="25"/> <?php echo $wo['lang']['last_name']; ?></label>  
                        </div>
                    </div>
                </div>
                <div class="sun_input">
                    <select id="country" name="country" required class="form-control">
                        <?php 
                            foreach ($wo['countries_name'] as $country_ids => $country) { 
                                $country_id = $wo['user']['country_id'];
                                $selected_contry = ($country_ids == $country_id) ? ' selected' : '' ;
                        ?>
                            <option value="<?php echo $country_ids;?>" <?php echo $selected_contry;?> ><?php echo $country;?></option>
                        <?php } ?>
                    </select>
                    <label for="country"><img src="https://img.icons8.com/plasticine/100/000000/country.png" width="25" height="25"/> <?php echo $wo['lang']['country']; ?></label>
                </div>
                <div class="sun_input">
                <!--input id="address" name="address" type="text" class="form-control input-md" value="<?php echo $wo['setting']['address'];?>" placeholder="<?php echo $wo['lang']['location']; ?>" / required-->
                <!--label  for="address"><img src="https://img.icons8.com/doodle/48/000000/user-location.png" width="27" height="27"/> <?php echo $wo['lang']['location']; ?></label-->  
            </div>              
                <div class="sun_input">
                    <input id="usr_birthday" name="birthday" type="text" class="form-control required input-md" placeholder="<?php echo $wo['lang']['birthday']; ?>" autocomplete="off" / required> 
                    <label for="usr_birthday"><img src="https://img.icons8.com/office/30/000000/birthday.png" width="25" height="25"/> <?php echo $wo['lang']['birthday']; ?></label>
                </div>
                <input type="hidden" name="user_id" value="<?php echo $wo['user']['user_id'];?>">
                <input type="hidden" name="hash_id" value="<?php echo Wo_CreateSession();?>">
            </div>
            <div class="col-md-3 col-sm-2"></div>
        </form>
    </div>
    <div class="continue-button">
        <!--small class="skip-step" onclick="Wo_SkipStep('start_up_info');"><?php echo $wo['lang']['skip'];?></small-->
        <button class="btn con-button btn-main" onclick="Wo_SubmitInfoForm();"><?php echo $wo['lang']['start_up_continue'];?></button>
    </div>
    <div class="clear"></div>
</div>

Please help me! What do you suggest I put some JS? that you recognize well? I tried to do it like this https://cursos.alura.com.br/forum/topico-habitar-desabilitar-botao-65202 But it didn’t work.

Answer 1

This is happening because you are submitting your form on your button (which has no type Submit) through the event onclick.

How to remedy this:

1. Change your form submission from onclick button for a new attribute called onsubmit in the element form;
2. Add type="submit" on the form submission button.

Answer 2

You can use Jquery to make this process of enabling or disabling the button, just put the event onblur in the fields calling a javascript function as for example below:

<input id="campo1" onblur="valida()" />
<input id="campo2" onblur="valida()" />
<input type="submit" id="botao" value="Botão Teste">

<script>
function valida(){
   if($('#campo1').val() != '' && $('#campo2').val() != ''){
      $('#botao').prop("disabled", false);
   } else {
      $('#botao').prop("disabled", true);
   }
}
</script>

I hope I’ve helped.