Question

我想合并两个JavaScripts。第一个是使用ajax发送消息，第二个是用来提醒用户联系表单中的必填字段。

我想合并这两个，可能是IF语句，所以首先检查所有字段，然后发送消息。

1使用ajax JavaScript：

    $('document').ready(function () {
    $('form#contact-form').submit(function () {
        var form = $(this);
        var post_data = form.serialize(); //Serialized the form data for process.php
        $('#loader').html('<img src="../spinner.gif" /> Please Wait...');

        form.fadeOut(500, function () {
            form.html("<h3>Thank you.").fadeIn();
            $('#loader').html('');
        });

        // Normally would use this
        $.ajax({
            type: 'POST',
            url: 'process.php', // Your form script
            data: post_data,
            success: function(msg) {
                form.fadeOut(500, function(){
                    form.html(msg).fadeIn();
                });
            }
        });

        return false;
    });
});

2提醒JavaScript：

 $('document').ready(function () {
    $('form#contact-form').submit(function(e) {

        var ref = $(this).find("[required]");

        $(ref).each(function(){
            if ( $(this).val() == '' )
            {
                alert("Required field should not be blank.");

                $(this).focus();

                e.preventDefault();
                return false;
            }
        });  return true;
    });
});

从下面的答案中我创建了以下代码。

如果有人想帮忙，我就建立了这个链接。警报工作正常，但代码不会停止。它继续加载其余代码。

https://jsfiddle.net/L8huq1t1/

Answer 1

您可以通过以下代码执行此操作。

function checkValidation() {
        var ref = $(this).find("[required]");
        $(ref).each(function(){
            if ( $(this).val() == '' )
            {
                alert("Required field should not be blank.");
                $(this).focus();
                //e.preventDefault();
                return false;
            }
        });
        return true;
    }
$('document').ready(function () {
    $('form#contact-form').submit(function () {
        if(!checkValidation()) {
            return false;
        }

        var form = $(this);
        var post_data = form.serialize(); //Serialized the form data for process.php
        $('#loader').html('<img src="../spinner.gif" /> Please Wait...');

        form.fadeOut(500, function () {
            form.html("<h3>Thank you.").fadeIn();
            $('#loader').html('');
        });

        // Normally would use this
        $.ajax({
            type: 'POST',
            url: 'process.php', // Your form script
            data: post_data,
            success: function(msg) {
                form.fadeOut(500, function(){
                    form.html(msg).fadeIn();
                });
            }
        });
        return false;
    });
});

但我给你一个使用jquery.validate插件的建议，这是更好的选择。但是如果你仍然想这样做，那么继续这也可以。

Answer 2

您可以使用具有表单提交处理程序的jQuery Validation插件，您可以在其中放置AJAX。 Link to the plugin

您的代码应如下所示：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>

  <script src="//maps.google.com/maps/api/js?libraries=visualization,drawing,geometry,places"></script>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <script src="//rawgit.com/wpalahnuk/ngAutocomplete/master/src/ngAutocomplete.js"></script>
    <link href="style.css" rel="stylesheet">
  
  <script src="app.js"></script>
</head>

<body ng-app="app" ng-controller="MapCtrl">
  <ion-pane>
    <ion-header-bar class="bar-positive">
      <h1 class="title">Ionic map</h1>
    </ion-header-bar>
    <ion-content class="has-header">
      <input type="text" id="Autocomplete" class="form-control" ng-autocomplete ng-model="result1" />
      <div>result: {{result1}}</div>
      <ng-map zoom="6" class="map">
        <marker position="{{data.lat}}, {{data.lng}}"></marker>
      </ng-map>
    </ion-content>
  </ion-pane>
</body>

</html>

＆＃13;

Ios设备，＆＃34;必需＆＃34;字段和谢谢你的消息

2 个答案: