Question

当我使用jQuery来检查船舶城市是否为空时，如果它已空并且阻止提交，则工作完成但是当我填写输入时它也会阻止提交，因为它总是读取值= 0，即使它包含数据。

<div class="form-group col-md-6">
                        <div class="shipcountry">
                        <b> Select Country </b><?php
                        echo "<select required  name='shipcountry'  id='shipcountry' onchange='showCityship(this);'>";


                        if(isset($row['ship_country'])) {
                            echo " <option value='{$row["ship_country"]}' >";


                            echo $row["ship_country"];

                            "</option>";
                        } else {
                            echo "<option  value=''>Select</option>";}
                        $query = 'SELECT * FROM `country_dhl` ';
                        $res_qu = mysql_query($query);

                        while ($country = mysql_fetch_array($res_qu)) {


                            echo " <option value='{$country["country"]}'>";
                            echo $country["country"];


                            echo "</option>";
                        }
                        echo "</select>";
                        ?>
                    </div>

    <div class="form-group col-md-6" style="display: none;" id="othershipcountry">
 <b> City </b>
 <input type="text" name="shipcity" class="form-control"
        placeholder="Enter Your City"/>
   </div>

<div class="form-group col-md-6" style="display: none;" id="city_ship">
 <input type="text" name="shipcity" class="form-control"
        placeholder="Enter Your City"/>
   </div>

jquery显示和隐藏div

 $(document).ready(function() {
    $('#othershipcountry').show();
    $('#city_ship').hide();
    $('#othershipcity').hide();

    $('.shipcountry').click(function () {
        var selected = $(this).val();
        if(selected == 'Roma') {
            $('#othershipcountry').hide();
            $('#city_ship').show();
            $('#othershipcity').hide();
        } else {
            $('#othershipcountry').show();
            $('#city_ship').hide();

            $('#othershipcity').hide();
        }
    });
});



jquery  when submit

$(document).ready(function() {


    $('#submit').click(function(e) {

       if ($('#city_ship').css('display') != 'none') {

            var ship =  $('#city_ship').val();
            if (ship.length === 0) {
                console.log("city");
                alert("You must choose your Ship city ");
                e.preventDefault();
            }
        }
        if ($('#othershipcountry').css('display') == 'block') {
            var ship = $('#othershipcity').val();
            if (ship.length === 0) {
                console.log("othercity");
                alert("You must fill Ship city");

                e.preventDefault();
            }
            else{
                console.log("other");
            }
        }

    });
});

Answer 1

您可以将更改事件应用于输入字段，每次更改时检查输入的长度，如果它的长度等于0，那么没有输入，您禁用提交按钮，否则启用它：

$("#city_ship").bind("change paste keyup", function() {
{
    if (this.value.length == 0)
        $('#submit').attr("disabled", true);
    else
        $('#submit').attr("disabled", false);
});

Answer 2

我可以解决问题，因为div长度总是返回零，即使它包含数据，因为在jQuery中我尝试获取div的长度而不是输入的长度。

解决方案：

     <input type="text" name="shipcity" class="form-control"
        placeholder="Enter Your City"/>

选择

：

$('[ name = "shipcity"]')

city_ship只是一个div。

如果字段为空则使用jQuery来阻止提交，并且即使输入包含数据也返回零值

2 个答案: