javascript - 提交表单后如何在同一页面中获取成功消息?
问题描述
我正在尝试在同一页面中显示成功和错误消息。我需要改变什么?
表单是将数据发送到数据库,然后在同一页面显示成功消息,然后重定向到另一个页面。我尝试更改表单和java脚本中的ID值,我仍然得到相同的结果,数据被发送到数据库,它重定向到另一个页面,但在重定向之前它没有显示成功消息。
控制器:
public function register_ajax() {
//form validation rules
$this->form_validation->set_rules('org_name', 'Organisation Name',
'trim|required');
$this->form_validation->set_rules('email', 'Email',
'trim|required|valid_email|is_unique[new_church.email]',
array('is_unique' => "This email address is already registered
with this application.")
);
$this->form_validation->set_rules('password', 'Your Password',
'trim');
$this->form_validation->set_rules('c_password', 'Confirm Password',
'trim|required|matches[password]',
array(
'matches' => 'Password does not match'
)
);
if ($this->form_validation->run()) {
$this->registration_model->update_church(); //insert the data
into db
echo 1;
redirect(site_url('registration/payment'));
} else {
echo validation_errors();
}
}
模型:
public function update_church() {
$org_name = ucwords($this->input->post('org_name', TRUE));
$email = $this->input->post('email', TRUE);
$password = ucfirst($this->input->post('password', TRUE));
$c_password = ucfirst($this->input->post('c_password', TRUE));
$data = array (
'org_name' => $org_name,
'email' => $email,
'password' => $password,
'c_password' => $c_password,
);
$this->db->insert('new_church', $data);
//email admins
//$this->notify_admins($name, $email, $subject, $message);
}
JavaScript:
//Registration
$('#registration_form').submit(function(e) {
e.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url: base_url + 'registration',
type: 'POST',
data: form_data,
success: function(msg) {
if (msg == 1) {
$('#status_msg').html('<div class="alert alert-success
text-center"> Success.</div>').fadeIn( 'fast' );
$('#registration_form')[0].reset(); //reset form fields
} else {
$('#status_msg').html('<div class="alert alert-danger
text-center">' + msg + '</div>').fadeIn( 'fast' ).delay(
30000 ).fadeOut( 'slow' );
}
}
});
});
看法:
<?php
$form_attributes = array("id" => "registration_form");
echo form_open('registration/register_ajax', $form_attributes); ?>
<div class="login100-form validate-form">
<div class="wrap-input100 validate-input" data-validate = "First
name is required">
<label class="form_header">Organisation Name</label>
<input class="input100" type="text" name="org_name" value="<?php
echo set_value('org_name'); ?>" required/>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Valid
email is required: ex@abc.xyz">
<label class="form_header">Your Work Email Address</label>
<input class="input100" type="email" name="email" value="<?php
echo set_value('email'); ?>" required/>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Password
is required">
<label class="form_header">Your Password</label>
<input class="input100" type="password" name="password" value="<?
php echo set_value('password'); ?>" required/>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Confirm Password">
<label class="form_header">Confirm Password</label>
<input class="input100" type="password" name="c_password" value="<?php echo set_value('c_password'); ?>" required/>
<span class="focus-input100"></span>
</div>
<div class="text-center p-t-12">
<p>By clicking the button below, you agree to StreamApp's terms of acceptable use</p>
</div>
<div class="m-t-20">
<div id="status_msg"></div>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn"> NEXT </button>
</div>
</div>
<?php echo form_close(); ?>
我希望在重定向到另一个页面之前出现一条成功消息
解决方案
删除这一行:
redirect(site_url('registration/payment'));
并在您的 ajax 成功函数中添加以下内容:
if (response == "1") {
// todo set timeout maybe and show a success message then redirect.
window.location.href = siteUrl+"registration/payment";
}
只需确保siteUrl
在您的 js 文件中定义:
const siteUrl = "http://localhost/";
推荐阅读
- c# - C1 True DBGrid 2 复选框选中/取消选中 + 键
- python - 选择数据框中的行,而不是在具有不同形状数组的不同数据框中,并且对象不可迭代
- c# - 将 linq2db 与 .net 核心一起使用时出现“无法加载文件或程序集‘System.EnterpriseServices’”
- javascript - setSelectionRange 适用于输入字段,但如何将光标放在 contenteditable 字段的末尾?
- javascript - 寻找做这个动画的 DRY 方法
- java - Block unknown json properties on certain classes
- xcode10 - 如何在 Xcode 10 beta 中安装 iOS 12 模拟器?
- java - 分隔数字
- javascript - 在渲染之前确实需要一些帮助来弄清楚 componentWillMount() 的逻辑
- javascript - 如何在javascript中从内部承诺中获取数据