表单自动填充后启用按钮

时间：2014-04-11 17:59:32

标签： javascript jquery html

我有一个基于MySQL数据库返回的记录自动填充的表单。我有所有字段，但搜索字段只读，因为用户不能编辑它们。我希望我的提交按钮被禁用，直到字段＆＃34; beerID＆＃34;已经填充，但我似乎无法让它工作。 Onkeyup无法正常工作，因为用户实际上并没有在该字段中输入内容。我似乎无法继续改变工作。有什么想法吗？

这是我的JavaScript（enableSubmit是提交按钮的代码）：

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

这是我的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>

5 个答案:

答案 0 :(得分：1)

正如kehrk所说，.change事件处理程序非常合适。像我这样的东西是我使用的东西：

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

答案 1 :(得分：1)

change无法正常工作的原因是因为change仅在用户与字段的互动时触发。由于jQuery正在更改beerID的值，因此change事件未被触发。

从SO question开始，建议您自己手动触发change事件：

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

另外两个问题：

问题1：

您正在将onchange处理程序附加到label而非beerID元素本身。

问题2：

在enableSubmit()函数中，您引用的是一个不存在的变量beerID。

解决方案：

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

答案 2 :(得分：0)

.change事件处理程序没有理由不起作用。

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

答案 3 :(得分：0)

我没看到你在哪里设置beerID尝试添加

beerID= $('#beerID');
if语句之前的

然后在完成字段的自动填充后调用enableubmit函数。

答案 4 :(得分：0)

你可以把它放在这里启用它：

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

    }
相关问题
最新问题