CODEWITHSUNDEEP
javascriptjqueryhtml
TheAleMaster
TheAleMaster

Reputation: 83

Enable Button After Form Auto Populates

I have a form that auto populates based on records returned from my MySQL database. I have all fields but the search field as read only because the user shouldn't be able to edit them. I would like my submit button disabled until the field "beerID" has been populated, but I can't seem to get it working. Onkeyup doesn't work because the user isn't actually typing in that field. And I can't seem to get onChange to work either. Any ideas?

Here is my JavaScript (enableSubmit is the code for the submit button):

<script>
$(function() {

        $('#brewery').val("");
        $('#style').val("");
        $('#ABV').val("");
        $('#IBU').val("");
        $('#OG').val("");
        $('#FG').val("");
        $('#beerID').val("");

        $("#beer").autocomplete({
            source: "beers.php",
            minLength: 2,
            select: function(event, ui) {
                $('#beerID').val(ui.item.beerID);
                $('#brewery').val(ui.item.brewery);
                $('#style').val(ui.item.style);
                $('#ABV').val(ui.item.ABV);
                $('#IBU').val(ui.item.IBU);
                $('#OG').val(ui.item.OG);
                $('#FG').val(ui.item.FG);
            }
        });
    });

function enableSubmit(){
    if(beerID.value.length > 0) { 
        document.getElementById('newJournalEntry').disabled = false; 
    } else { 
        document.getElementById('newJournalEntry').disabled = true;
    }
}
</script>

And here is my HTML:

<div data-role="page" id="view" data-url="currentpage">
<div data-role="header" data-position="fixed" data-theme="b" data-content-theme="b">
    <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    <h2>Beer Journal</h2>
</div>

<div class="ui-body ui-body-a">
    <form action="journal.php" method="post" data-ajax="false" enctype="multipart/form-data">
        <fieldset>
            <p class="ui-widget">
                <label for="beer"></label>
                    <input type="search" name="beer" id="beer" placeholder="Start Typing a Beer's Name..." >
                <div class="ui-field-contain">
                    <label for="brewery">Brewery:</label>
                        <input type="text" id="brewery" name="brewery" readonly>
                    <label for="style">Style:</label>
                        <input type="text" id="style" name="style" readonly>
                    <label for="ABV">ABV(%):</label>
                        <input type="text" id="ABV" name="ABV" readonly>
                    <label for="IBU">IBU:</label>
                        <input type="text" id="IBU" name="IBU" readonly>
                    <label for="OG">OG:</label>
                        <input type="text" id="OG" name="OG" readonly>
                    <label for="FG">FG:</label>
                        <input type="text" id="FG" name="FG" readonly>
                    <label for="beerID" onChange="enableSubmit()">BeerID:</label>
                        <input type="number" id="beerID" name="beerID" readonly>
                </div>
            </p>
        </fieldset>
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><input type="submit" name="newJournalEntry" id="newJournalEntry" data-inline="false" data-shadow="false" data-corners="false" value="Create Beer Journal Entry" data-theme="e" disabled></div>
            <div class="ui-block-b"><input type="button" onClick="location.href='newentryaddbeer.php'" data-inline="false" data-shadow="false" data-corners="false" value="Start from Scratch" data-theme="f"></div>
         </fieldset>
    </form>
</div>

Upvotes: 1

Views: 126

Answers (5)

Fillip Peyton
Fillip Peyton

Reputation: 3657

The reason why change isn't working is because change is only fired on user interaction with a field. Since the value of beerID is being changed by jQuery, a change event isn't fired.

From this SO question, it is suggested that you manually fire the change event yourself:

$('#beerID').change();

Two other issues:

Issue 1:

You are attaching the onchange handler to the label rather than the beerID element itself.

Issue 2:

In your enableSubmit() function, you are referencing a variable beerID that doesn't exist.

Solution:

<script>
$(function() {

        $('#brewery').val("");
        $('#style').val("");
        $('#ABV').val("");
        $('#IBU').val("");
        $('#OG').val("");
        $('#FG').val("");
        $('#beerID').val("");

        $("#beer").autocomplete({
            source: "beers.php",
            minLength: 2,
            select: function(event, ui) {
                $('#beerID').val(ui.item.beerID).change();
                $('#brewery').val(ui.item.brewery);
                $('#style').val(ui.item.style);
                $('#ABV').val(ui.item.ABV);
                $('#IBU').val(ui.item.IBU);
                $('#OG').val(ui.item.OG);
                $('#FG').val(ui.item.FG);
            }
        });
    });

function enableSubmit(){
    if($('#beerID').val().length > 0) { 
        $('#newJournalEntry').parent().removeClass('ui-state-disabled');
    } else { 
        $('#newJournalEntry').parent().addClass('ui-state-disabled');
    }
}
</script>

<div data-role="page" id="view" data-url="currentpage">
<div data-role="header" data-position="fixed" data-theme="b" data-content-theme="b">
    <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    <h2>Beer Journal</h2>
</div>

<div class="ui-body ui-body-a">
    <form action="journal.php" method="post" data-ajax="false" enctype="multipart/form-data">
        <fieldset>
            <p class="ui-widget">
                <label for="beer"></label>
                    <input type="search" name="beer" id="beer" placeholder="Start Typing a Beer's Name..." >
                <div class="ui-field-contain">
                    <label for="brewery">Brewery:</label>
                        <input type="text" id="brewery" name="brewery" readonly>
                    <label for="style">Style:</label>
                        <input type="text" id="style" name="style" readonly>
                    <label for="ABV">ABV(%):</label>
                        <input type="text" id="ABV" name="ABV" readonly>
                    <label for="IBU">IBU:</label>
                        <input type="text" id="IBU" name="IBU" readonly>
                    <label for="OG">OG:</label>
                        <input type="text" id="OG" name="OG" readonly>
                    <label for="FG">FG:</label>
                        <input type="text" id="FG" name="FG" readonly>
                    <label for="beerID">BeerID:</label>
                        <input type="number" onchange="enableSubmit()" id="beerID" name="beerID" readonly>
                </div>
            </p>
        </fieldset>
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><input type="submit" name="newJournalEntry" id="newJournalEntry" data-inline="false" data-shadow="false" data-corners="false" value="Create Beer Journal Entry" data-theme="e" disabled></div>
            <div class="ui-block-b"><input type="button" onClick="location.href='newentryaddbeer.php'" data-inline="false" data-shadow="false" data-corners="false" value="Start from Scratch" data-theme="f"></div>
         </fieldset>
    </form>
</div>

Upvotes: 1

beercodebeer
beercodebeer

Reputation: 990

As kehrk said, the .change event handler would be a good fit. Something like this is what I'd use:

$(document).on('change', '#beerID', function(){
    if($(this).val() == ''){
        $('input[type=submit]').attr('disabled', 'disabled');
    }
    else {
        $('input[type=submit]').removeAttr('disabled');
    }
});

Upvotes: 1

Jai
Jai

Reputation: 74738

You can put it here to enable it:

select: function (event, ui) {
        $('#beerID').val(ui.item.beerID);
        $('#brewery').val(ui.item.brewery);
        $('#style').val(ui.item.style);
        $('#ABV').val(ui.item.ABV);
        $('#IBU').val(ui.item.IBU);
        $('#OG').val(ui.item.OG);
        $('#FG').val(ui.item.FG);

        if($('#beerID').val() !== ''){
           $('#newJournalEntry').prop('disabled', false);
        }

    }

Upvotes: 0

Brad Faircloth
Brad Faircloth

Reputation: 327

I don't see where you set beerID try adding

beerID= $('#beerID');

before the if statement

Then call the enablesubmit function once you have completed the auto fill of the fields.

Upvotes: 0

keeehlan
keeehlan

Reputation: 8054

There's no reason that the .change event handler shouldn't work.

$(function () {

    //this should work...
    $("#beerID").change(function () {
        $("#newJournalEntry").prop("disabled", false);
    });        

    $('#brewery').val("");
    $('#style').val("");
    $('#ABV').val("");
    $('#IBU').val("");
    $('#OG').val("");
    $('#FG').val("");
    $('#beerID').val("");

    $("#beer").autocomplete({
        source: "beers.php",
        minLength: 2,
        select: function (event, ui) {
            $('#beerID').val(ui.item.beerID);
            $('#brewery').val(ui.item.brewery);
            $('#style').val(ui.item.style);
            $('#ABV').val(ui.item.ABV);
            $('#IBU').val(ui.item.IBU);
            $('#OG').val(ui.item.OG);
            $('#FG').val(ui.item.FG);
        }
    });
});

function enableSubmit() {
    if (beerID.value.length > 0) {
        document.getElementById('newJournalEntry').disabled = false;
    } else {
        document.getElementById('newJournalEntry').disabled = true;
    }
}

Upvotes: 0

Related Questions