Enable Button After Form Auto Populates

Question

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>

Just commenting for now, cause BEER! – beercodebeer Apr 11 '14 at 18:01 — beercodebeer, Apr 11 '14 at 18:01
There's no reason `.change()` shouldn't work. – keeehlan Apr 11 '14 at 18:01 — keeehlan, Apr 11 '14 at 18:01

score 1 · Answer 1 · answered Apr 11 '14 at 18:15

1

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');
    }
});

answered Apr 11 '14 at 18:15

beercodebeer

990
6
5

The button still wouldn't enable. I'm not sure I put this code in the correct place, though. And would I remove all other code regarding enabling the button? I assume so. I can post a link to my implementation of your solution if you'd like, so you can actually interact with the page. – TheAleMaster Apr 11 '14 at 20:12
Here's a simple [js fiddle proof of concept](http://jsfiddle.net/taE9d/). If you go this route, you should remove the `enableSubmit()` function and the `onChange="enableSubmit()"` declaration on the #beerID input (which is incorrectly on the label in your code sample). – beercodebeer Apr 11 '14 at 20:25
Also, I thought I was looking at your code sample when I saw this line, but it's critical, too (otherwise the `change` event is only triggered by user action): `$('#beerID').val(ui.item.beerID).change();` – beercodebeer Apr 11 '14 at 20:37
Okay. I removed all the `enableSubmit()` function and `onChange="enableSubmit()"` code and also added `$('#beerID').val(ui.item.beerID).change();`. I tried moving your code all around, but it still didn't work. Here's how I have it at present: http://invictusaleworks.com/test/3.php. Type "wander" in the search box and select either of the two results. – TheAleMaster Apr 11 '14 at 20:58
Move the `change` handler outside of your `autocomplete` function. It's not pretty, but here's a [working demo](http://jsfiddle.net/GjRMH/) – beercodebeer Apr 11 '14 at 21:09
Okay. I made some progress. It still wasn't working for me. Since the only discernible difference (to me anyways) was that your example was not calling several libraries. I started commenting out libraries and discovered that without the JQuery Mobile library, it works perfectly, but obviously doesn't look the prettiest. With JQuery Mobile library, it doesn't work. This has JQuery Mobile and does NOT work: http://www.invictusaleworks.com/test/3.1.php This has NO JQuery Mobile and DOES work: http://www.invictusaleworks.com/test/3.php Any ideas? – TheAleMaster Apr 11 '14 at 21:50
It works without JQuery Mobile. As Fillip Peyton indicated, I have to remove that class. – TheAleMaster Apr 14 '14 at 16:15

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

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>

The button still wouldn't enable. It seemed straightforward, so I'm not sure what's going on. I can post a link to my implementation of your solution if you'd like, so you can actually interact with the page. — TheAleMaster, Apr 11 '14 at 20:13
Are there any JS errors in your console? The implementation link would be great, thanks! — Fillip Peyton, Apr 11 '14 at 20:17
I'm really new to JS, so I'm not sure how to view errors. My browser does not display any. http://invictusaleworks.com/test/1.php Type "wander" in the search box and select either of the two results. — TheAleMaster, Apr 11 '14 at 20:47
So this code is technically working. If you view the source, you can see the "#newJournalEntry" element getting rid of the `disabled` attribute, but it is still disabled. If you look at the parent element of `#newJournalEntry` (.ui-button.) you'll see that it has a `ui-state-disabled` class, which is likely keeping this button disabled. The fastest way would be to remove that class. But if there's a method in jquery mobile to enable this button, that would be the way to go. I'll take a look in the docs. — Fillip Peyton, Apr 11 '14 at 22:08
I'm not sure why the normal `.button('enable')` option isn't disabling the button (see [docs](http://api.jquerymobile.com/button/#method-disable)), so I'm reverting to removing the class. Try my edits to this answer and let me know if this works for you. — Fillip Peyton, Apr 11 '14 at 22:23
Removing the class worked. Thanks! For the actual code, I got rid of my `enableSubmit()` function and its related code and just went with what beercodebeer suggested, the pure `.change` handler method. — TheAleMaster, Apr 14 '14 at 16:28
Good call! When coding, its always good practice to keep a consistent way of doing things (jquery, vanilla js, etc) — Fillip Peyton, Apr 14 '14 at 16:29

score 0 · Answer 3 · answered Apr 11 '14 at 18:03

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;
    }
}

The button still wouldn't enable. I also updated beerID and value as suggested. I can post a link to my implementation of your solution if you'd like, so you can actually interact with the page. — TheAleMaster, Apr 11 '14 at 20:11

score 0 · Answer 4 · answered Apr 11 '14 at 18:04

0

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.

answered Apr 11 '14 at 18:04

Brad Faircloth

337
1
7

Good catch, but that's still not the best way to accomplish what OP is asking. See my answer and let me know what you think. – keeehlan Apr 11 '14 at 18:05
I agree with your statement... was just modifying my answer with a possible solution to the .change. Thanks! – Brad Faircloth Apr 11 '14 at 18:06
You would also need to change the `value` property to `val()`, since The jquery object produced from `$('#beerID')` doesn't have a property of `value`. – Fillip Peyton Apr 11 '14 at 18:30
Thanks! I updated those things along with implementing the other solutions given here. Still no dice. – TheAleMaster Apr 11 '14 at 20:08

score 0 · Answer 5 · answered Apr 11 '14 at 18:09

0

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);
        }

    }

answered Apr 11 '14 at 18:09

Jai

74,255
12
74
103

The button still wouldn't enable. I removed all other javascript as it pertained to the enabling of the button. I can post a link to my implementation of your solution if you'd like, so you can actually interact with the page. – TheAleMaster Apr 11 '14 at 20:08

Enable Button After Form Auto Populates

5 Answers5

Issue 1:

Issue 2:

Solution: