Onsen UI - 提交表单问题
Onsen UI - Submit form issue
我在使用 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;
});
在添加事件侦听器之前,您需要等待 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 和 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;
});
在添加事件侦听器之前,您需要等待 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