html - Input and Select Issue with jquery -
good day, have issue , have been trying find way out day, no luck.
the snap shot below form in want enable button when select field changes , not empty , input field not empty.
below i've tried. enables button when return input box.
skillbutton = function() { var skill = $.trim($("#skillauto").val()); //$('select[name=selector]').val() var level = $("#level :selected").val() //if((skill !== '') && (level !== '')) && (level !== '') if ((skill !== '') && (level !== '')) { //alert(level); $('form.js-form-skills') .find('button#putskill') .prop('disabled', false); } else { $('button#putskill').prop("disabled", true); }; } <div class="hidden" id="skills"> <div class="form-row form-wrapper cf"> <div class="control is-horizontal"> <div class="control is-grouped"> <p class="control is-expanded"> <!-- <span class="js-awesomplete"> --> <input maxlength="20" id="skillauto" name="skill" placeholder="add skill" class="capitalize input is-fullwidth" value="" type="text"> <!-- </span> --> </p> <p class="control is-expanded"> <span class="select is-fullwidth"> <select id="level" name="level"> <option value="" class="hidden">experience level</option> <?php if($skillevels): foreach($skillevels $level):?> <option value="<?=$level->level_id?>"><?=$level->level_name?></option> <?php endforeach; endif;?> </select> </span> </p> </div> </div> <p class="control"> <input type="hidden" name="skproceed" value="yea"> <button class="button is-primary" id="putskill"><span>submit</span> </button> </p> </div> </div>
you should put disabled in button's attributes in original html, starts out disabled. can run function when select or input changed with:
$("#level").change(skillbutton); $("#skillauto").on("input", skillbutton); 
Comments
Post a Comment