Need to show success message in pop up after data is submitting but the problem is once i click on submit button it is displaying the alert message and later it is submitting the data.
<form name="applynow" id="applynow" enctype="multipart/form-data" method="post" action="<?php echo base_url();?>apply/applynow">
<div class ="applyus">
<div class="applyfullname contactname">
<input type="text" class="form-control names namesss" name="fullname" value="<?php echo set_value('fullname');?>" placeholder="Full Name" required><span class="required">*</span>
<?php echo form_error('fullname', '<div class="error">', '</div>'); ?>
</div>
<div class="applynowemail contactemail">
<input type="email" class="form-control emails" id="email" name="email" value="<?php echo set_value('email');?>" placeholder="Email" required > <span class="requireds">*</span>
<?php echo form_error('email', '<div class="error">', '</div>'); ?>
</div>
<button type="submit" class="btn btn-success successss" id="submits" >Submit</button>
Script:
<script>
$('form').on('submit',function(){
alert('submitted');
});
Once the data is submitted it should display the popup and the page should redirect to another page.
Tried with Ajax:
<span class="success">Thank's for submitting the form</span>
$(document).ready(function() {
$("form[name='applynow']").submit(function() {
$.ajax({
type: "POST",
url: "career.php",
data: $(this).serialize(),
success: function() {
$('.sucess').fadeIn(100).show();
}
})
})
})
Apply Now Controller:
public function applynow($job_id)
{
if ($this->input->post('email'))
{
$this->form_validation->set_error_delimiters('<br /><span class="error"> ', '</span>');
$this->form_validation->set_rules('fullname', 'First Name', 'required');
$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
$this->form_validation->set_rules('captcha', 'Captcha', 'required');
if ($this->form_validation->run() == FALSE)
{
$data['records2']= $this->career_model->getcareerdatas($job_id);
$data['mainpage']='apply';
$this->load->view('templates/template',$data);
}
else
{
$inputCaptcha = $this->input->post('captcha');
$sessCaptcha = $this->session->userdata('captchaCode');
if ($inputCaptcha === $sessCaptcha)
{
$result = $this->apply_model->apply($this->input->post('email'));
$data['records2']= $this->career_model->getcareerdatas($job_id);
return true;
if ($result)
{
$this->flash->success('<h2 style="color:green">Thank You applying to this post!will get back you soon once shortlisted..</h2>');
redirect('apply');
} else
{
$this->flash->success('<h2 style="color:red">Sorry ! Message sending failed</h2>');
redirect('apply');
}
} else {
$this->flash->success('<h2 style="color:red">Captcha code was not match, please try again.</h2>');
redirect('apply');
}
}
}
$config = array(
'img_path' => 'captcha_images/',
'img_url' => base_url() . 'captcha_images/',
'img_width' => '150',
'img_height' => 40,
'word_length' => 6,
'font_size' => 30
);
$captcha = create_captcha($config);
$word = $captcha['word'];
$this->session->unset_userdata('captchaCode');
$this->session->set_userdata('captchaCode', $word);
$data['captchaImg'] = $captcha['image'];
$data['mainpage'] = "apply";
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class ="applyus">
<div class="applyfullname contactname">
<input type="text" class="form-control names namesss" name="fullname" value="" placeholder="Full Name" >
</div>
<div class="applynowemail contactemail">
<input type="email" class="form-control emails" id="email" name="email" value="" placeholder="Email" >
</div>
<button class="btn btn-success successss" id="sub" >Submit</button>
<script>
$("#sub").click(function() {
var url = 'applynow.php';
var data = {
'namesss' : $(".namesss").val(),
'emails' : $(".emails").val()
}
alert('Data before send is:');
alert(JSON.stringify(data));
$.ajax({
type: "POST",
url: url,
data: data
}).done(function(str) {
alert('Data from php is:');
alert(JSON.stringify(str));
var result = JSON.parse(str);
alert(result['variable1']);
alert(result['variable2']);
});
});
</script>
</body>
</html>
applynow.php :
<?php
class test() {
public function applynow($job_id)
{
$result = [];
$result['variable1'] = 'name is: ' . $_POST['namesss'];
$result['variable2'] = 'email is: ' . $_POST['emails'];
echo json_encode($result);
}
}
$test = new test();
$test->applynow('1');
And you see alert "aaa"; all works
in your real code you need replace $this->flash->success('test'); to echo 'test'; and delete redirect('apply'); from php
in this js you need change path to php script
Please make some changes in your code like give below.
<form name="applynow" id="applynow" enctype="multipart/form-data" method="post">
<div class ="applyus">
<div class="applyfullname contactname">
<input type="text" class="form-control names namesss" name="fullname" value="<?php echo set_value('fullname');?>" placeholder="Full Name" required><span class="required">*</span>
<?php echo form_error('fullname', '<div class="error">', '</div>'); ?>
</div>
<div class="applynowemail contactemail">
<input type="email" class="form-control emails" id="email" name="email" value="<?php echo set_value('email');?>" placeholder="Email" required > <span class="requireds">*</span>
<?php echo form_error('email', '<div class="error">', '</div>'); ?>
</div>
<button type="submit" class="btn btn-success successss" id="submits" >Submit</button>
You must use async: false
that will instruct to the browser first complete this request, then go for other codes
<script>
$(document).ready(function() {
$('#applynow').validate({
rules: {
},
messages: {
},
submitHandler: function (form) {
var url ="<?php echo base_url();?>apply/applynow";
var reDirectUrl = "<?php echo base_url();?>career.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
async : false,
success: function(data){
// console.log('data', data);
if(data == 1){
$('.sucess').fadeIn(100).show(); // Need to set the success msg in the popup " Thank You applying to this post!will get back you soon once shortlisted.. "
}else if(data == 0){
// Do Something like this>> $('.failed').fadeIn(100).show(); // Sorry ! Message sending failed
}
}
})
})
});
</script>
Changes in apply now controller:
public function applynow($job_id)
{
if ($this->input->post('email'))
{
$this->form_validation->set_error_delimiters('<br /><span class="error"> ', '</span>');
$this->form_validation->set_rules('fullname', 'First Name', 'required');
$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
$this->form_validation->set_rules('captcha', 'Captcha', 'required');
if ($this->form_validation->run() == FALSE)
{
$data['records2']= $this->career_model->getcareerdatas($job_id);
$data['mainpage']='apply';
$this->load->view('templates/template',$data);
}
else
{
$inputCaptcha = $this->input->post('captcha');
$sessCaptcha = $this->session->userdata('captchaCode');
if ($inputCaptcha === $sessCaptcha)
{
$result = $this->apply_model->apply($this->input->post('email'));
$data['records2']= $this->career_model->getcareerdatas($job_id);
return true;
if ($result)
{
echo '1'; exit;
// $this->flash->success('<h2 style="color:green">Thank You applying to this post!will get back you soon once shortlisted..</h2>');
// redirect('apply');
} else
{
echo '0'; exit;
// $this->flash->success('<h2 style="color:red">Sorry ! Message sending failed</h2>');
// redirect('apply');
}
} else {
$this->flash->success('<h2 style="color:red">Captcha code was not match, please try again.</h2>');
redirect('apply');
}
}
}
$config = array(
'img_path' => 'captcha_images/',
'img_url' => base_url() . 'captcha_images/',
'img_width' => '150',
'img_height' => 40,
'word_length' => 6,
'font_size' => 30
);
$captcha = create_captcha($config);
$word = $captcha['word'];
$this->session->unset_userdata('captchaCode');
$this->session->set_userdata('captchaCode', $word);
$data['captchaImg'] = $captcha['image'];
$data['mainpage'] = "apply";
}
I hope this may helps you. Thanks!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.