without page reload how to insert the data using below javascript - javascript

Using e.preventDefault(); values not insert in to database,if comment e.preventDefault(); data inserted in to database, without page reload how to insert the data using below javascript code please suggest me
Insert form
<form class="form-horizontal msg_fixed_bottom send_message_form" method="POST" role="form" action="<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_communication">
<div class="panel-footer" id="myForm" >
<div class="input-group submit_group">
<input id="messagee" name="messagee" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="submit" name="submit">Send</button>
</span>
</div>
</div>
</form>
script
<script>
$(document).ready(function () {
scrollDown();
$("#submit").click(function (e) {
e.preventDefault();
var message = $("#messagee").val();
$('#chat_log').append('<div class="row msg_container base_sent active"><div class="col-md-10 col-xs-10"><div class="messages msg_receive"><p>' + message + '</p></div></div></div>');
$('#messagee').val('');
scrollDown();
});
});
function scrollDown() {
$('.msg_container_base').animate({scrollTop: $('.msg_container_base').prop("scrollHeight")}, 0);
}
</script>


HTML
<form id="data_form" class="form-horizontal msg_fixed_bottom send_message_form">
<div class="panel-footer" id="myForm" >
<div class="input-group submit_group">
<input id="messagee" name="messagee" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="submit" name="submit" type="submit">Send</button>
</span>
</div>
</div>
JavaScript
$(document).ready(function(){
$('#data_form').on('submit', function(e){
var form_data = $(this).serialize();
$.ajax({
type: "POST",
url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_communication',
data: form_data,
success:function(data)
{
alert('Success');
},
error:function()
{
alert('failed');
}
});
e.preventDefault();
});
});


insert form
<form class="form-horizontal msg_fixed_bottom send_message_form" id="data_form" method="POST" role="form" action="#">
<div class="panel-footer" id="myForm" >
<div class="input-group submit_group">
<input id="messagee" name="messagee" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="submit" name="submit">Send</button>
</span>
</div>
</div>
</form>
javascript
<script>
$(document).ready(function(){
$('#data_form').on('submit', function(e){
var form_data = $(this).serialize();
$.ajax({
type: "POST",
url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_communication',
data: form_data,
success:function(data)
{
var message = $("#messagee").val();
$('#chat_log').append('<div class="row msg_container base_sent active"><div class="col-md-10 col-xs-10"><div class="messages msg_receive"><p>' + message + '</p></div></div></div>');
scrollDown();
function scrollDown() {
$('.msg_container_base').animate({scrollTop: $('.msg_container_base').prop("scrollHeight")}, 0);
}
},
error:function()
{
alert('failed');
}
});
e.preventDefault();
});
});
</script>


You can use ajax for submitting the data without page reload.
<script type="text/javascript">
// Ajax post
$(document).ready(function() {
$(".submit").click(function(event) {
event.preventDefault();
var messagee= $("input#messagee").val();
jQuery.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "your_controller/your_function",
dataType: 'json',
data: {
messagee: messagee
},
success: function(res) {
if (res) {
// Show Entered Value
//sussess message here
}
}
});
});
});
Your Controller:
// This function call from AJAX
public function your_function() {
$data = array(
'messagee' => $this->input->post('messagee')
);
//Either you can print value or you can send value to database
echo json_encode($data);
}


your form:
<form class="form-horizontal msg_fixed_bottom send_message_form" method="POST" role="form" id="msg-form">
<div class="panel-footer" id="myForm" >
<div class="input-group submit_group">
<input id="messagee" name="messagee" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
<span class="input-group-btn">
<input type="submit" class="btn btn-primary btn-sm" id="submit" name="submit" value="Submit">
</span>
</div>
</div>
</form>
your ajax
<script>
$(document).ready(function(){
$("#msg-form").submit(function(e){
e.preventDefault();
var msg = $("#messagee").val();
$.ajax({
type: "POST",
url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_communication',
data: {msg:msg},
success:function(data)
{
alert('SUCCESS!!');
},
error:function()
{
alert('fail');
}
});
});
});
</script>
I think this will work fine. Now add your additional append functionality in the success area by yourself. thanks.

Related

How to validate login form on button click jquery/javascript?

How to validate login form on button click.When i click on button then its calling javascript function button click,i need to first validate form,required then click button work.required not working.I want to validate before button click.
<form id="loginform" class="form-vertical" method="post">
<div class="control-group normal_text"> <h3><img src="~/Content/img/logo.png" alt="Logo" /></h3></div>
<div class="control-group">
<div class="controls">
<div class="main_input_box">
<span class="add-on bg_lg"><i class="icon-user"> </i></span>
<input type="text" id="txtusername" class="form-control required" placeholder="Username" name="username" required />
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="main_input_box">
<span class="add-on bg_ly"><i class="icon-lock"></i></span>
<input type="password" id="txtpassword" class="form-control" name="password" placeholder="Password" required />
<br />
<label style="color:red;font-size:15px;display:none;" id="errormsg">Incorrect Username or Password</label>
</div>
</div>
</div>
<div class="form-actions">
<span class="pull-left">Lost password?</span>
<span class="pull-right"><input type="submit" value="Login" id="btnlogin" class="flip-link btn btn-success" /></span>
</div>
</form>
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-1.12.4.js" >
</script>
<script type = "text/javascript" >
$(document).ready(function() {
$("#btnlogin").click(function () {
var user = new Object();
user.Username = $('#txtusername').val();
user.Password = $('#txtpassword').val();
if (user != null) {
$.ajax({
type: "POST",
url: "/Admin/Login",
data: JSON.stringify(user),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (recordcount) {
if (recordcount != null) {
alert(recordcount);
if (recordcount <= 0) {
document.getElementById("errormsg").style.display = 'block';
}
else {
document.getElementById("errormsg").style.display = 'none';
}
}
else {
alert("Something went wrong");
}
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
}
});
});
</script>

<html>
<head>
<title>a</title>
</head>
<body>
<form id="loginform" class="form-vertical" method="post">
<div class="control-group normal_text">
<h3>
<!-- <img src="~/Content/img/logo.png" alt="Logo" /> -->
</h3>
</div>
<div class="control-group">
<div class="controls">
<div class="main_input_box">
<span class="add-on bg_lg">
<i class="icon-user"> </i>
</span>
<input type="text" id="txtusername" class="form-control required" placeholder="Username" name="username" required />
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="main_input_box">
<span class="add-on bg_ly">
<i class="icon-lock"></i>
</span>
<input type="password" id="txtpassword" class="form-control" name="password" placeholder="Password" required />
<br />
<label style="color:red;font-size:15px;display:none;" id="errormsg">Incorrect Username or Password</label>
</div>
</div>
</div>
<div class="form-actions">
<span class="pull-left">
Lost password?
</span>
<span class="pull-right">
<input type="submit" value="Login" id="btnlogin" class="flip-link btn btn-success" />
</span>
</div>
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#loginform").submit(function (e) {
var user = new Object();
user.Username = $('#txtusername').val();
user.Password = $('#txtpassword').val();
if (user != null) {
$.ajax({
type: "POST",
url: "/Admin/Login",
data: JSON.stringify(user),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (recordcount) {
if (recordcount != null) {
alert(recordcount);
if (recordcount <= 0) {
document.getElementById("errormsg").style.display = 'block';
}
else {
document.getElementById("errormsg").style.display = 'none';
}
}
else {
alert("Something went wrong");
}
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
}
debugger
return false;
//e.preventDefault();
});
});
</script>
</body>
</html>

You have to add onFocusOut() method in textbox, so when you entered the text in the textbox and goes to next textbox, focusout() method will call, and in the focusout() method, you have to write your validation logic.
For example, you can enable your login button, if text entered in the textbox is validated. Otherwise your button remain disabled.

How ajax work in dynamically generated div

I am doing sales of product in which I use AJAX to capture data based on a selection from a dropdown to another one. When I dynamically create a field it works only once i want it to work N number of time.
Here is my HTML & PHP Code:
<div class="row col-md-12 mrg-top-20">
<h4 class="card-title" style="color:#ff0033">Sales Details</h4><br>
<div class="col-md-12"></div>
<div class="row col-md-12" data-duplicate="add">
<div class="col-md-4">
<label>Select <strong>Installation Date</strong></label>
<div class="form-group">
<div class="timepicker-input input-icon form-group">
<i class="ti-time"></i>
<input type="text" name="ins_date" class="form-control datepicker-1" placeholder="Datepicker" data-provide="datepicker">
</div>
</div>
</div>
<div class="col-md-4" id="sel_dynamic">
<div class="form-group">
<label>Select <strong>Manufacturer</strong></label>
<select name="manu" id="manu" class="form-control" style="width:100%">
<option disabled="disabled" selected="selected">Select Manufacturer</option>
<?php
$data = mysqli_query($conn,"SELECT * FROM manufacturer_details");
while($itemcat = mysqli_fetch_array($data))
{
?>
<option value="<?php echo $itemcat['MANUFACTURER_ID']; ?>"><?php echo $itemcat['MANUFACTURER_NAME'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Select <strong>Modal</strong></label>
<select name="modal" id="modal" class="form-control" style="width:100%">
<option value="" selected disabled="disabled">Select Modal...</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Ser<strong>ial</strong></label>
<input type="text" name="serial" placeholder="Enter Serial No" class="form-control">
</div>
</div>
<div class="col-md-4">
<label>Select <strong>AMC Start Date</strong></label>
<div class="form-group">
<div class="timepicker-input input-icon form-group">
<i class="ti-time"></i>
<input type="text" name="amc_date" class="form-control datepicker-1" placeholder="Datepicker" data-provide="datepicker" data-date-format="mm/dd/yyyy">
</div>
</div>
</div>
<div class="col-md-4">
<label>Select <strong>AMC End Date</strong></label>
<div class="form-group">
<div class="timepicker-input input-icon form-group">
<i class="ti-time"></i>
<input type="text" name="amc_edate" class="form-control datepicker-1" placeholder="Datepicker" data-provide="datepicker" data-date-format="mm/dd/yyyy">
</div>
</div>
</div>
</div>
<div>
<input type="button" id="add" data-duplicate-add="add" class="btn btn-info" value="+"/>
</div>
<div >
<input type="button" data-duplicate-remove="add" class="btn btn-info" value="-"/>
</div>
</div>
Here is My Js Script to Call Ajax Each Time
<script type="text/javascript">
$(document).ready(function()
{
$("#sel_dynamic").on("change","#manu",(function() //just try to use on change
{
var id = $("#manu").val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "ajax_modal.php",
data: dataString,
cache: false,
success: function(html)
{
$("#modal").html(html);
}
});
});
});
</script>
Here is my Ajax File
<?php
include('script/db.php');
if($_POST['id'])
{
$id=$_POST['id'];
$sql=mysqli_query($conn,"select * from modal_details where MANUFACTURER_ID='".$id."'");
?>
<option selected disabled="disabled">Select Modal Name</option>
<?php
while($row = mysqli_fetch_assoc($sql))
{
$id = $row['MODAL_ID'];
$data = $row['MODAL_NAME'];
echo '<option value="'.$id.'">'.$data.'</option>';
}
}
?>
Whenever I create a new field dynamically my AJAX is not working.

Try this :
<script type="text/javascript">
$(document).ready(function()
{
$(document).on('change','#manu',function()
{
var id = $("#manu").val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "ajax_modal.php",
data: dataString,
cache: false,
success: function(html)
{
$("#modal").html(html);
}
});
});
});
</script>

The comments made it clear that you are duplicating your form. I think you have duplicate IDs on your page and your jQuery event will not work anymore. An ID may only occur once.
Take a look here:
Clone form and increment

Add the class to select as shown below:
<select name="manu" id="manu" class="form-control manuClass" style="width:100%">
And use the below script
<script type="text/javascript">
$(document).ready(function()
{
$(document).on('change','.manuClass',function()
{
var id = $(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "ajax_modal.php",
data: dataString,
cache: false,
success: function(html)
{
$(this).parent().parent().next().children().children("#modal").html(html);
}
});
});
});
</script>

Refresh captcha image jquery codeigniter

I have problem with my refresh captcha button, it just work once when I click the button after I reload the page. I dont know if i wrong or if I missed something else.
I try to refresh the captcha with jquery because more efficiently.
This is piece of my code :
controller
public function refresh_login(){
// Captcha configuration
$config = array(
'img_path' => 'captcha_images/',
'img_url' => base_url().'captcha_images/',
'img_width' => '100',
'img_height' => '30',
'word_length' => '4',
'font_size' => '16'
);
$captcha = create_captcha($config);
// Unset previous captcha and store new captcha word
$this->session->unset_userdata('captchaCode');
$this->session->set_userdata('captchaCode',$captcha['word']);
// Display captcha image
echo $captcha['image'];
}
jquery
$( document ).ready( function () {
var base_url = '<?php echo base_url(); ?>';
$('.reload-captcha').click(function(event){
event.preventDefault();
$.ajax({
url:base_url+'index.php/auth/refresh_login',
success:function(data){
$('.captcha-img').replaceWith(data);
}
});
});
view
<form action="<?php echo base_url(); ?>index.php/auth/login/" id="login-form" method="post">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Username" id="username" name="username" required>
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" id="password" name="password" required>
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group">
<p id="captImg" class="captcha-img"><?php echo $captchaImg; ?></p>
<input type="text" class="form-control" name="captcha" placeholder="Captcha" style="margin-bottom: 5px"/>
</i>
</div>
<div class="row">
<!-- /.col -->
<div class="col-xs-8">
<label><u>Forgot your password?</u></label>
</div>
<div class="col-xs-4 pull-right">
<button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>

what kind of problem is occurring ???
try :
$('.captcha-img').attr("src", data);
in place of :
$('.captcha-img').replaceWith(data);
and add
dataType: "text",
cache:false,
as follow :
$.ajax({
url:base_url+'index.php/auth/refresh_login',
dataType: "text",
cache:false,
success:function(data){
$('.captcha-img').attr("src", data);
}
});

Why sending data by Ajax jQuery fail

I'm trying to create a pop-up form login with Ajax jQuery, but It's always fail to send data. I've many ways on Internet that I can find but nothing change. Please take a look and help me. Thanks so much:
This is my form:
<form id="loginform" name="loginform" method="POST">
{{ csrf_field() }}
<div class='modal-body-left' >
<div class="form-group">
<input type="text" id="username" name="username" placeholder="Tên đăng nhập" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input type="password" id="password" name="password" placeholder="Mật khẩu" value="" class="form-control login-field">
<i class="fa fa-lock login-field-icon"></i>
</div>
<div class="checkbox">
<label>
<input type="checkbox" style="margin-top: -8px"> Nhớ mật khẩu
</label>
Quên mật khẩu?
</div>
<button class="btn btn-success modal-login-btn" id="loginbutton" name="loginbutton" style="background-color: #47a49a; background: #fec10f;" type="submit">Đăng nhập</button>
</div>
</form>
This is my js:
$("#loginbutton").click(function(event) {
event.preventDefault();
var username = $("#username").val();
var password = $("#password").val();
var data ={"email":username, "password":password};
alert(data.email);
// alert(data.password);
$.ajax(
{
url: '{{url('/')}}/loginHandling',
type: 'POST',
data: {'email': "ruoitrau95#gmail.com", 'password':"tuyen12345"},
dataType: 'json',
success: function(data)
{
alert(data);
alert("done");
}
}
)
.fail(function(data) {
alert("fail");
});
});
And this is controller:
public function loginHandling() {
$email = Input::get('email');
$password = Input::get('password');
$check $this->pages->checkLogin($email, $password);
echo "alert(In loginHandling)";
if ($check) {
$name = $this->pages->getNameFromMail($email);
Session::put('logined', true);
Session::put('email', $email);
Session::put('name', $name);
die json_encode(array("success"=>"true"));
} else {
die json_encode(array("success"=>"false"));
}
}
I'm working on Laravel framework so my url is defined:
Route::post('/loginHandling',['as'=>'loginHandling','uses'=>'LoginController#loginHandling']);
Thanks again for your time

You need to pass the CSRF token in order for Laravel to process the request. There are a few ways to do this - try this one:
Form:
<meta name="_token" content="{{ csrf_token() }}" />
<form id="loginform" name="loginform" method="POST">
<div class='modal-body-left' >
<div class="form-group">
<input type="text" id="username" name="username" placeholder="Tên đăng nhập" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input type="password" id="password" name="password" placeholder="Mật khẩu" value="" class="form-control login-field">
<i class="fa fa-lock login-field-icon"></i>
</div>
<div class="checkbox">
<label>
<input type="checkbox" style="margin-top: -8px"> Nhớ mật khẩu
</label>
Quên mật khẩu?
</div>
<button class="btn btn-success modal-login-btn" id="loginbutton" name="loginbutton" style="background-color: #47a49a; background: #fec10f;" type="submit">Đăng nhập</button>
</div>
</form>
Javascript:
$("#loginbutton").click(function(event) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
event.preventDefault();
var username = $("#username").val();
var password = $("#password").val();
$.ajax(
{
url: '{{url('/')}}/loginHandling',
type: 'POST',
data: {'email': username, 'password': password},
dataType: 'json',
success: function(data)
{
alert(data);
alert("done");
}
}
)
.fail(function(data) {
alert("fail");
});
});
You should now be able to access the submitted data in your controller with $request->all().

Get data with ajax from php and mysql

I have this code,when i input invoice code it will get data from MySQL and fill the others text with Ajax. but my ajax don't get return from my controller, any body help me? where I'm wrong?
My controller in PHP to get data.
<?php
public function getDetail_transaction($invoice_id){
$result = $this->db->get_where('tblTransaction', array('payment_trx_id' => $invoice_id))->first_row();
$data = json_encode($result);
return $data;
}
?>
My view:
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<h3>Confirm Your Payment</h3>
<div class="col-md-4">
<form name='ConfirmPayment' action="<?php echo base_url('Payment/ConfirmPayment');?>" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label>Invoice ID</label>
<div>
<input type="text" class="form-control" name='invoice_id' id='invoice_id' placeholder="Invoice ID" style='width:80%;'/>
<a type="submit" id='cek_invoice' class="btn cek_invoice">Cek</a>
</div>
</div>
<div class="form-group">
<label>Nama Rekening Pembayar</label>
<input type="text" class="form-control" name='user_account_name' id='user_account_name' placeholder="Nama Pembayar">
</div>
<div class="form-group">
<label>Bank Asal</label>
<input type="text" class="form-control" name='provider_bank' id='provider_bank' placeholder="Nama Pembayar">
</div>
<div class="form-group">
<label>Bank Tujuan</label>
<input type="text" class="form-control" name='payment_bank_user_name' id='payment_bank_user_name' placeholder="Bank Tujuan">
</div>
<div class="form-group">
<label>No Transafer</label>
<input type="text" class="form-control" name='no_transaction' id='no_transaction' placeholder="Jumlah di Transfer">
</div>
<div class="form-group">
<label>Transfer Date</label>
<input type="text" class="form-control" name='transfer_date' id='transfer_date' placeholder="Jumlah di Transfer">
</div>
<div class="form-group">
<label>Deskripsi</label>
<textarea class="form-control" name='description' id='description' placeholder="Jumlah di Transfer"></textarea>
</div>
<div class="form-group">
<label>Total Transfer</label>
<input type="text" class="form-control" name='total_transfer' placeholder="No total_transfer">
</div>
<div class="form-group">
<label>Bukti Transaksi (optional)</label>
<input type="file" name="scan">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
Ajax Script
$(document).ready(function(){
$("#cek_invoice").click(function(){
data_invoice = $('#invoice_id').val();
var url = "<?php echo base_url('Payment/getDetail_transaction/');?>"+'/'+data_invoice;
$.ajax({
url : url,
type: "POST",
success: function(data) {
alert(data);
$('#payment_bank_user_name').val(data.payment_bank_user_name);
},
failure: function() {
alert('fail');
}
});
});
});

you should 'echo' result after encode it! see this:
<?php
public function getDetail_transaction($invoice_id){
$result = $this->db->get_where('tblTransaction', array('payment_trx_id' => $invoice_id))->first_row();
$data = json_encode($result);
echo $data; //echo data
}
?>
in ajax you should parseJSON your data :
$(document).ready(function(){
$("#cek_invoice").click(function(){
data_invoice = $('#invoice_id').val();
var url = "<?php echo base_url('Payment/getDetail_transaction/');?>"+'/'+data_invoice;
$.ajax({
url : url,
type: "POST",
success: function(data) {
var dun = $.parseJSON(data);
$('#payment_bank_user_name').val(dun.payment_bank_user_name);
},
failure: function() {
alert('fail');
}
});
}); });

Use
echo $data;exit;
Instead of
return $data;
To display the data (after getting the response) -
var data = $.parseJSON(data);
$('#your_input_field').val(data.payment_bank_user_name);

public function getDetail_transaction($invoice_id){
$result = $this->db->get_where('tblTransaction', array('payment_trx_id' => $invoice_id))->first_row();
$data = json_encode($result);
echo $data;
}
and your javascript edit the below line
success: function(data) {
alert(data);
var obj = $.parseJSON(data);
$('#payment_bank_user_name').val(obj.payment_bank_user_name);
},

Categories