javascript - jQuery 仅当设置或更新 2 个输入和 1 个选择时如何调用函数？

Question

仅当 3 个输入(2 个输入、1 个选择下拉菜单)设置为特定值时，我才尝试调用函数。该表单包含多个输入、选择和复选框。此调用在发送表单之前执行。

• 第一个输入是选择/下拉菜单。

• 第二个是标准输入，仅当它至少包含 1 位数字(最多没有限制)、一个点和 1 位数字时才应检查。示例:19212.6

• 第三个是隐藏输入，其值应大于1。

我知道 jQuery 中的 .change 函数会对我有所帮助，但我不知道如何根据我的设置正确调整它。最重要的是，如果输入与上面提到的过滤器匹配，它应该随后运行 MsSQL 查询 (PHP)。

$('input').change(function(){
}

代码与 PHP 混合。
目前，我已经创建了 3 个更改(每个输入/选择 1 个)，它们调用函数并检查所有值是否符合要求。这是一个更好、更好、更干净的方法吗？

部分代码:

<SCRIPT language="javascript">
$(document).ready(function () 
    $( ".gdctype" ).change(function() {
        var gdc = $(this).find('option:selected').text();
        if (gdc == "UK"){
            $('.ilsel').css({ 'display': 'none'});
            $('.casel').css({ 'display': 'none'});
            $('.bslsel').css({ 'display': 'none'});
            $('.rusel').css({ 'display': 'none'});
            $('.uspsel').css({ 'display': 'none'});
            $('.uksel').removeAttr('style');
        }
        if (gdc == "IL"){
            $('.uksel').css({ 'display': 'none'});
            $('.casel').css({ 'display': 'none'});
            $('.bslsel').css({ 'display': 'none'});
            $('.rusel').css({ 'display': 'none'});
            $('.uspsel').css({ 'display': 'none'});
            $('.ilsel').removeAttr('style');
        }
        if (gdc == "CA"){
            $('.uksel').css({ 'display': 'none'});
            $('.ilsel').css({ 'display': 'none'});
            $('.bslsel').css({ 'display': 'none'});
            $('.rusel').css({ 'display': 'none'});
            $('.uspsel').css({ 'display': 'none'});
            $('.casel').removeAttr('style');
        }
        if (gdc == "BSL"){
            $('.uksel').css({ 'display': 'none'});
            $('.ilsel').css({ 'display': 'none'});
            $('.casel').css({ 'display': 'none'});
            $('.rusel').css({ 'display': 'none'});
            $('.uspsel').css({ 'display': 'none'});
            $('.bslsel').removeAttr('style');
        }
        if (gdc == "RU"){
            $('.uksel').css({ 'display': 'none'});
            $('.ilsel').css({ 'display': 'none'});
            $('.casel').css({ 'display': 'none'});
            $('.bslsel').css({ 'display': 'none'});
            $('.uspsel').css({ 'display': 'none'});
            $('.rusel').removeAttr('style');
        }
        if (gdc == "US"){
            $('.uksel').css({ 'display': 'none'});
            $('.ilsel').css({ 'display': 'none'});
            $('.casel').css({ 'display': 'none'});
            $('.bslsel').css({ 'display': 'none'});
            $('.rusel').css({ 'display': 'none'});
            $('.uspsel').removeAttr('style');
        }
    });

        var uniquePUS = <?php if($uniquePUS!=NULL) echo $uniquePUS;?> <?php if($uniquePUS==NULL) echo "1";?>;
      $('.addPUS').click(function() {
        var copy = $('#PUS').clone(true,true);
        var formId = 'PUS' + window.uniquePUS;
        copy.attr('id', formId );
        copy.removeAttr('style');

        copy.find(':input#PUSAddress').each(function() {
            $(this).replaceWith("<input type='text' id='" + $(this).attr("id") + window.uniquePUS+"' id='" + $(this).attr("name") + window.uniquePUS+"' >");
        });

        copy.find(':input#PUSCity').each(function() {
            $(this).replaceWith("<input type='" + $(this).attr("type") + "' id='" + $(this).attr("id") + window.uniquePUS+"' name='" + $(this).attr("name") + window.uniquePUS + "' />");
        });

        copy.find(':input#PUSState').each(function() {
            $(this).replaceWith("<input type='" + $(this).attr("type") + "' id='" + $(this).attr("id") + window.uniquePUS+"' name='" + $(this).attr("name") + window.uniquePUS + "' size=2 />");
        });

        copy.find(':input#PUSZip').each(function() {
            $(this).replaceWith("<input type='" + $(this).attr("type") + "' id='" + $(this).attr("id") + window.uniquePUS+"' name='" + $(this).attr("name") + window.uniquePUS + "' size=4 />");
        });
        $('#uspselin').append(copy);
        window.uniquePUS++;  
        $('#main').find(':input#uniquePUS').each(function() {
            $(this).replaceWith("<input type='" + $(this).attr("type") + "' id='uniquePUS' name='" + $(this).attr("name") + "' value='"+window.uniquePUS+"' />");
        });

      });
    $('.delPUS').click(function() {
        $(this).closest("ul").remove();
    });  
        function chktrp(nr){
        if(nr != null && nr != undefined){
            var pattern = new RegExp(/^[0-9]+\.[0-9]+$/);
            return pattern.test(nr);    
        }
        else{
            return false;
        }

    }
    function chkfields(){
        if (
            $('select[name="gdctype"]').val() == 'US'
            &&
            $('input[name="uniquePUS"]').val() > '0'
            &&
            chktrp($('input[name="Trip"]').val())
        ) {
            return true;

      }else{
        return false;}
    }
    $('input[name="Trip"]').change(function(){
        if (chkfields()){
            alert('Works1');
        }
    });
    $('input[name="uniquePUS"]').change(function(){
        if (chkfields()){
            alert('Works2');
        }
    });
    $('select[name="gdctype"]').change(function(){
        if (chkfields()){
            alert('Works3');
        }
    });
});

如果相关，我可以添加 HTML 代码。

Answer 1

您可以像这样获取表单字段的值:

$('input[name="inputName"]').val()

您知道可以测试您的领域:

if (
    $('input[name="inputName"]').val() != ''
    &&
    $('input[name="inputName2"]').val() > 2
) {
    .... call your function
}