我遇到了FormData
的问题,它在几天前工作,但现在它不起作用,它提交除提交按钮之外的所有输入。这是我的登录表单。
<form action="" method="post" name="login_user">
<label for="username">Username/e-mail <span class="error" id="user-error"></span></label>
<input type="text" name="username" id="username" required>
<br>
<label for="passwd">Password <span class="error" id="passwd-error"></span></label>
<input type="password" name="passwd" id="passwd" required>
<br>
<p><input type="checkbox" checked name="remember"> Remember me <span class="forgot"><a href="<?php echo SITE_URL; ?>/reset">Forgotten password</a></span> </p>
<input type="submit" id="login" value="Login" name="login">
<p>Don't have an account? <a href="<?php echo SITE_URL; ?>/register/">Sign up</a></p>
</form>
JS for login,使用MVC。
//ajax login
var login = document.forms.namedItem('login_user');
if (login) {
login.addEventListener('submit', function (e) {
if (validatePassword('passwd', 'passwd-error')) {
var data = new FormData(login);
var userlogin = new XMLHttpRequest();
var btn = document.getElementById('login');
btn.value = 'Login, Please wait...';
userlogin.open('POST', url + 'login/login_user_ajax', true);
userlogin.onload = function (event) {
if (userlogin.status == 200) {
var result = JSON.parse(userlogin.responseText);
if (result.results == 'success.') {
alert('logged in'); //change this later
} else {
document.getElementById('cred-error').innerHTML = result.results;
}
btn.value = 'Login';
}
};
userlogin.send(data);
}
e.preventDefault();
}, false);
我的控制器中的登录方法,未检测到该按钮。
public function login_user_ajax() {
$this->login_user(1);
}
private function login_user($ajax = '')
{
if (filter_has_var(INPUT_POST, 'login')) {
$new_user = $this->model('User');
$new_user->setDb(Controller::getDb());
$new_user->set_site(SITE_URL);
$user = trim(filter_input(INPUT_POST, 'username', FILTER_SANITIZE_STRING));
$passwd = trim(filter_input(INPUT_POST, 'passwd', FILTER_SANITIZE_STRING));
if ($new_user->login($user, $passwd)) {
if ($ajax) {
$site_data['results'] = 'success.';
echo json_encode($site_data);
return true;
}else {
$this->redirect(SITE_URL . '/edit');
}
} else {
if (!$ajax){
return 'The username or password is incorrect.';
}else {
$site_data['results'] = 'The username or password is incorrect.';
echo json_encode($site_data);
return false;
}
}
}else {
print_r($_POST);
}
}
我在print_r
$_POST
时收到此消息,没有按钮。
答案 0 :(得分:1)
由于您实际上并未使用默认提交(而是您正在执行ajax),因此您需要自行添加点击按钮。一种简单的方法是使用您希望按钮具有的名称向表单添加隐藏输入,然后让表单中的所有按钮使用此单击处理程序:
function clickHandler() {
this.form.theHiddenInput.value = this.value;
}
这样,如果使用了一个按钮来提交表单,那么按钮的处理程序会在submit
之前设置隐藏输入的值。
答案 1 :(得分:0)
我使用<button>
元素构建的SwitchToggle组件遇到类似的问题。即使元素具有name
,但在提交表单时也没有包含在我的FormData
中。
我最终在标记中添加了一个视觉上隐藏的<input type="checkbox">
,该属性具有与SwitchToggle组件相同的name
和value
属性。除了显示在FormData
中之外,此输入无任何作用(不可单击且不可见)。此示例在React中,但是该方法适用于所有框架或原始JavaScript。
const SwitchToggle = (props) => {
const { id, name, className } = props;
const [enabled, setIsEnabled] = React.useState(props.enabled);
return (
<>
<input
style={{opacity: 0.05}}
name={name}
checked={enabled}
type={"checkbox"}
/>
<button
className={`switch-toggle ${enabled ? 'on' : 'off'}`}
onClick={(e) => {
e.preventDefault();
setIsEnabled(!enabled);
}}
/>
</>
);
};
由于我的组件处于打开/关闭状态,因此我使用了复选框输入,但您也可以使用带有字符串值的文本输入。