Question

当我按下提交时，我试图捕获当前的lat-long，然后我运行一些验证并返回true或false，具体取决于是否满足。我的问题是位置功能是异步的，我无法使用我的功能。我已经尝试了很多方法让它发挥作用，并且还没有成功。我希望你们能够阐明我能做些什么来让它像我想要的那样工作。我想要的是捕获那些坐标，然后执行我的保存功能。

$("#save").click(function(){
    navigator.geolocation.getCurrentPosition(function(position){
        $('#lat-location-end').attr('value', position.coords.latitude);
        $('#lon-location-end').attr('value',position.coords.longitude);
        saveData();
    } function() {
        saveData();
    });
});

function saveData(){
    var odleave = $('#odometer-leave').val();
    var odarrival = $('#odometer-arrival').val();
    var miles = $('#mil').data('mile');

    if (odarrival < odleave){
        alert("Odometer: Arrival must not be less than Odometer: Leave");
        return false;
    }

    if (odleave != miles){
        if (odleave > miles){
            var mile_diff = odleave - miles;
            if (mile_diff > 25){
                if (!confirm("Your leaving mileage exceeds by " + mile_diff + " miles from your last mileage. Do you want to continue?"))
                    return false;
            }
        } else {
            if(!confirm("Mileage entered is less than your last mileage. Are you using a new car?"))
                return false;
        }

        //Return the image
        var sig = signaturePad.toDataURL("image/png");
        sig = sig.split(',')[1];
        $('#sig-data').attr('value', sig);
        return true;
    }

拜托，我整天都遇到了麻烦，我无法找到解决这个问题的方法。今天早上我问了类似的东西，但我注意到我问的问题是错误的。我希望这不会让我陷入困境。任何帮助将不胜感激。

Answer 1

这是我提出的解决方案。要实现这一点，您将需要两个文件，因为必须使一切正常。

semantic.css

semantic.js

要么是从semantic-ui本地下载，要么是在cdnjs semantic-ui on cdnjs上获取。希望它有所帮助。

这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Get geolocation on Javascript then submit form if validations are met</title>
    <link rel="stylesheet" href="http://keith-santiago.com/css/semantic.css">
    <style type="text/css">
        div#this-form {

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    </style>
</head>
<body>
    <div id="this-form" class="ui raised very padded text container segment">
        <div class="ui form">
        <form class="ui form">
          <div class="field">
            <label>Odometer Arrival</label>
            <input name="odometer-arrival" placeholder="Arrival" type="number">
          </div>
          <div class="field">
            <label>Odometer Leave</label>
            <input name="odometer-leave" placeholder="Leave" type="number">
          </div>
          <div class="field">
            <div class="ui checkbox">
              <input name="toc"  type="checkbox">
              <label>I agree to the Terms and Conditions</label>
            </div>
          </div>
          <button class="ui button" type="submit">Submit</button>
        </form>
        </div>
    </div>
    <script
              src="http://code.jquery.com/jquery-3.2.1.min.js"
              integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
              crossorigin="anonymous"></script>
    <script src="http://keith-santiago.com/js/semantic.js"></script>
    <script type="text/javascript">
    $(document).ready( function() { 
        $('.ui.button').click(function() {
        var $form = $('.ui.form');
        var odarrival = parseInt($form.form('get value', 'odometer-arrival'));
        var odleave = parseInt($form.form('get value', 'odometer-leave'));
            $('.ui.form').form({
                fields : {
                        arrival : {
                        identifier : 'odometer-arrival',
                        rules : [{
                            type: 'empty',
                            prompt : "please enter a valid number"
                        }]

                        },
                        leave : {
                        identifier : 'odometer-leave',
                        rules: [ {
                            type : 'empty' 
                            }
                        ]

                    },
                    toc : {
                        identifier : 'toc',
                        rules : [{
                            type : 'checked'
                        }]
                    }   
                }
            });

            if ( $('.ui.form').form('is valid')) {

                if ( odarrival < odleave ) {
                             // this block handles everything before submitting. if the condition are not met it will prevent the form from submitting.
                    return false;
                }
            }   
        });
    });
    </script>
</body>
</html>

在Javascript上获取地理位置，如果符合验证，则提交表单

1 个答案: