2

Hi my problem right now is how to disable a submit button until the select dropdown and input field is filled in. My disable is working but it won't enable even though i have already selected in the dropdown and in the input field. Here is my code. Hope you could help me.

echo "<form action='portal-files/user-file-upload.php' method='post' enctype='multipart/form-data'>";
echo "<input type='hidden' name='MAX_FILE_SIZE' value='100000' />";
echo "<input type='hidden' name='admin_id' value='$user->id' />";
echo "<select name='id' id='form-option' class='test-only'>";
echo '<option selected="selected">' .'Choose a User'. '</option>';

foreach ($registeredUsers as $key => $value) {
  $registered = JFactory::getUser($value);
  echo '<option value="'.$registered->id.'">'.$registered->name.'</option>';

}
echo "</select>";
echo "<input name='uploadedfile' type='file' id='custom-file-input' class='test-only'/> <br/>";
echo '<input type="submit" name="submit" value="Upload" id="custom-submit-input" disabled="disabled">';
echo "</form>";


<script> 

    jQuery(document).ready(function() { 
         jQuery('.test-only').on('keyup change', function(){
            if (jQuery('#form-option').val() == '') {
                    jQuery('#custom-submit-input').prop('disabled', true);
            } else {
                    jQuery('#custom-submit-input').prop('disabled', false);
            }
        });

        }); 
    }); 

</script>
shadowbudz
  • 231
  • 1
  • 5
  • 17
  • May be you want this http://stackoverflow.com/questions/31398788/how-to-disable-submit-button-until-input-and-select-dropdown-filled-in/31398944#31398944 – Sadikhasan Jul 14 '15 at 06:19
  • close question if you found solution . solution from below answers then accept answer or found solution at your own then post as answer and accept it . – Nishit Maheta Jul 24 '15 at 04:27

4 Answers4

0

try this in your first option tag

echo '<option selected="selected" value="">' .'Choose a User'. '</option>';
Syed mohamed aladeen
  • 6,507
  • 4
  • 32
  • 59
0

change your condition code here .

if (jQuery('#form-option').val() == '') {

To

if (jQuery(this).val() == '') {

jQuery(this) Means

converts the DOM element returned by this to a jQuery object, from which, you can continue using jQuery on. LINK

Community
  • 1
  • 1
Nishit Maheta
  • 6,021
  • 3
  • 17
  • 32
0

You have to maintain one flag to check for checking value is filled or not?

jQuery('.test-only').on('keyup change', function() {
 var flag = false;
  $('.test-only').each(function() {
       if($(this).val()=="") {
         flag = true;
         return false;
       }
  });

 jQuery('#custom-submit-input').prop('disabled', flag);

});

Demo

Sadikhasan
  • 18,365
  • 21
  • 80
  • 122
0

There is some issue into html tag.

I set this as example into JSFIDDLE. Please check this once I have set value = '' into default .

Let me know if you face any query/concern regarding this.

Thanks!

AddWeb Solution Pvt Ltd
  • 21,025
  • 5
  • 26
  • 57