Question

我在使用Onsen UI和phonegap处理表单提交时遇到了问题。

如果我有<ons-navigator>和<ons-page>代码，则表单不会提交。由于我删除了这个Onsen原生标签，因此表单突然有效。

HTML

<ons-navigator title="Login" var="loginPage">
    <section class="loading">
    <div class="vertical_align"> <i class="fa fa-spinner fa-pulse fa-5x"></i> </div>
  </section>
    <ons-page>
    <ons-row align="center">
        <ons-col>
        <div class="login-form"> <img class="logo" src="img/login/logo.svg" data-fallback="img/login/logo.png" alt="SVG Support Icon" />
            <form id="indexform" method="post">
            <input type="text" class="text-input--underbar info" placeholder="username" id="user" name="username">
            <input type="password" class="text-input--underbar info" placeholder="password" id="pass" name="password">
            <br>
            <br>
            <input class="login-button button--large button" id="submit" type="submit" name="submit" value="Login">
          </form>
            <br>
            <br>
            <ons-button modifier="quiet" class="forgot-password">Forgot paddssword?</ons-button>
            <ons-button modifier="quiet" class="register" onclick="loginPage.pushPage('register', { animation : 'slide' } )">Get an account</ons-button>
          </div>
      </ons-col>
      </ons-row>
  </ons-page>
  </ons-navigator>

JS

$("#indexform").submit(function(e) {
        e.preventDefault();
        // VERIFY USER LOGIN///////////     
        var datastring = $(this).serialize();
        $.ajax({
            type: "POST",
            url: ip + "php/index.php",
            data: datastring,
            cache: false,
            beforeSend: function() {
                $('.loading').show();
            },
            success: function(e) {
                e = JSON.parse(e);
                if (e.found) {
                    verify = true;
                    localStorage.setItem("user", e.user);
                } else {
                    $('.loading').hide();
                    $('#user, #pass').css('background-color', '#FF7E80');
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $('.loading').hide();
                alert(textStatus, errorThrown);
            },
            complete: function() {
                if (verify) {
                    $('#loading').hide();
                    window.location.href = "main.html";
                }

            }
        });

        return false;
    });

Answer 1

在添加事件侦听器之前，您需要等待Onsen UI完全加载。有一个名为ons.ready(cb)的方法可以做到这一点。

在纯JavaScript中：

ons.bootstrap();

ons.ready(function() {
  document.selectElementById('indexform')
    .addEventListener('submit', function(e) {
      e.preventDefault();
      alert('This works!');
    });
});

或在jQuery中：

ons.bootstrap();

ons.ready(function() {
  $('#indexform')
    .submit(function(e) {
      e.preventDefault();
      alert('This works!');
    });
});

以下是Codepen中的一个示例： http://codepen.io/argelius/pen/aOxJWx

Onsen UI - 提交表单问题

1 个答案: