I have a form which I am using to AJAX to submit. I have several forms using the same script all with different names posting to response.php however this particular form will not send.
When I remove my form name it tries to post in the normal way but when it has the correct name as the AJAX file I receive no reponse whatsoever leading me to think it is an error within the AJAX file.
HTML
<tr><Td>
<div class="row box" id="login-box">
<div class="col-md-9 col-md-offset-1">
<div class="panel panel-login">
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div id="msg"></div>
<div class="alert alert-danger" role="alert" id="error" style="display: none;">...</div>
<form id="editMarshalTitleDetails-form" name="editMarshalTitleDetails_form" role="form" style="display: block;" method="post">
<div class="form-group">
<br><Br>
<input type="text" name="content" id="content" tabindex="2" class="form-control" value="<?php echo $content2 ?>">
<input type="hidden" name="marshalColumn" value="marshalPackFrontPageTitle">
<input type="hidden" name="userID" value="<?php echo "$userID"?>">
</div>
<div class="col-xs-12 form-group pull-right">
<button type="submit" name="editMarshalTitleDetails-submit" id="editMarshalTitleDetails-submit" tabindex="4" class="form-control btn btn-primary">
<span class="spinner"><i class="icon-spin icon-refresh" id="spinner"></i></span> Edit Title
</button>
</div>
</form>
</div>
</div>
</tr></td>
AJAX
$("#editMarshalTitleDetails-form").validate({
submitHandler: submitForm6
});
function submitForm6() {
var data = $("#editMarshalTitleDetails-form").serialize();
$.ajax({
type : 'POST',
url : 'response.php?action=editMarshalTitleDetails',
data : data,
beforeSend: function(){
$("#error").fadeOut();
$("#editMarshalTitleDetails_button").html('<span class="glyphicon glyphicon-transfer"></span> updating ...');
},
success : function(data){
$("#editMarshalTitleDetails_button").html('<span class="glyphicon glyphicon-transfer"></span> Template Updated');
var a = data.split('|***|');
if(a[1]=="update"){
$('#msg').html(a[0]);
}
}
});
return false;
}
Related
So the problem when I click on submit it gives me this + no data is inserted into the db :
Screen shot of modal
I don't see any errors in the console.
my ajax code :
<script type="text/javascript">
$(document).ready(function () {
$("#lmao").on("submit", function(e) {
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax({
url: formURL,
type: "POST",
data: postData,
success: function(data, textStatus, jqXHR) {
$('#add_data_Modal .modal-header .modal-title').html("Result");
$('#add_data_Modal .modal-body').html(data);
$("#submitForm").remove();
},
error: function(jqXHR, status, error) {
console.log(status + ": " + error);
}
});
e.preventDefault();
});
$("#submitForm").on('click', function() {
$("#lmao").submit();
});
});
</script>
my form + modal :
<div id="add_data_Modal"class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add mew course</h4>
</div>
<div class="modal-body">
<div class="block-content block-content-narrow">
<form id="lmao"class="js-validation-courses form-horizontal push-10-t" data-async data-target="#add_data_Modal" action="add_c.php" method="post">
<div class="form-group">
<div class="col-xs-12">
<div class="form-material">
<input class="form-control" type="text" id="course_title" name="course_title" >
<label for="material-email">course title</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="form-material">
<input class="form-control" type="text" id="course_cord"name="course_cord" >
<label for="material-email">Course cord</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="form-material">
<input class="form-control" type="text" id="course_hours"name="course_hours" >
<label for="material-email">hours </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="form-material">
<input class="form-control" type="text" id="course_price" name="course_price" >
<label for="material-email">price</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<button class="btn btn-sm btn-primary" name="add_course" id="submitForm" type="submit">Add course</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I have the add query in a separate file called add_c.PHP
so I have tried several answers from a lot of questions but I didn't manage to get something useful.
The PHP code in add_c.php :
Php code - pastebin
My knowledge is very small about ajax so I appreciate any help.
I tried your code, and the php file retrieves this post array
Array ( [course_title] => test [course_cord] => tet [course_hours] => tet [course_price] => tt )
your php code:
if(isset($_POST['add_course'])) {
add_course nevers gets posted, so it will never come into the if. Another issue is your form gets submitted twice the way you build it.
Change the button type into button, not submit. You already have a event listener on the button ;)
<button class="btn btn-sm btn-primary" name="add_course" id="submitForm" type="button">Add course</button>
Here is my index page where i can successfully login but wont redirect to any page? just new been trying to get it to working.
<?php include('header.php'); ?>
<body>
<div class="container">
<div style="height:50px;">
</div>
<div class="row" id="loginform">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-lock"></span> Login
<span class="pull-right"><span class="glyphicon glyphicon-pencil"></span> <a style="text-decoration:none; cursor:pointer; color:white;" id="signup">Sign up</a></span>
</h3>
</div>
<!-- Body For Login -->
<div class="panel-body">
<form role="form" id="logform">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Username" name="username" id="username" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" id="password" type="password">
</div>
<button type="button" id="loginbutton" class="btn btn-lg btn-primary btn-block"><span class="glyphicon glyphicon-log-in"></span> <span id="logtext">Login</span></button>
</fieldset>
</form>
<!-- Body For Login -->
</div>
</div>
</div>
</div>
<div class="row" id="signupform" style="display:none;">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-pencil"></span> Sign Up
<span class="pull-right"><span class="glyphicon glyphicon-log-in"></span> <a style="text-decoration:none; cursor:pointer; color:white;" id="login">Login</a></span>
</h3>
</div>
<div class="panel-body">
<!-- Body for Sign up -->
<form role="form" id="signform">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Full Name" name="name" id="name" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Email" name="email" id="email" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Username" name="susername" id="susername" type="text" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="spassword" id="spassword" type="password">
</div>
<button type="button" id="signupbutton" class="btn btn-lg btn-primary btn-block"><span class="glyphicon glyphicon-check"></span> <span id="signtext">Sign Up</span></button>
</fieldset>
</form>
<!-- Body for Sign up -->
</div>
</div>
</div>
</div>
<div id="myalert" style="display:none;">
<div class="col-md-4 col-md-offset-4">
<div class="alert alert-info">
<center><span id="alerttext"></span></center>
</div>
</div>
</div>
</div>
<script src="custom.js"></script>
</body>
</html>
i don't know why but just keep going back to index.page
<?php
include('conn.php');
session_start();
if(isset($_POST['logform'])){
$username=$_POST['username'];
$password=md5($_POST['password']);
$query=$conn->query("select * from users where username='$username' and password='$password'");
if ($query->num_rows>0) {
$row=$query->fetch_array();
if ($row['level']=="admin") {
$_SESSION['users']=$row['id'];
$_SESSION['level']=$row['level'];
header('location: admin/index.php');
}elseif ($row['level']=="agent") {
$_SESSION['users']=$row['id'];
$_SESSION['level']=$row['level'];
header('location: agent/index.php');
}elseif ($row['level']=="user") {
$_SESSION['users']=$row['id'];
$_SESSION['level']=$row['level'];
header('location: agent/index.php');
}else{
?>
<span>Login Failed. User not Found.</span>
<?php
}
}
}
Here is my login action form it working but will not redirect to any page that i set them i don't know why but im trying my best how to work around the problem
Here is my custom.js which tell the php what to do next
$(document).ready(function(){
//bind enter key to click button
$(document).keypress(function(e){
if (e.which == 13){
if($('#loginform').is(":visible")){
$("#loginbutton").click();
}
else if($('#signupform').is(":visible")){
$("#signupbutton").click();
}
}
});
$('#signup').click(function(){
$('#loginform').slideUp();
$('#signupform').slideDown();
$('#myalert').slideUp();
$('#signform')[0].reset();
});
$('#login').click(function(){
$('#loginform').slideDown();
$('#signupform').slideUp();
$('#myalert').slideUp();
$('#logform')[0].reset();
});
$(document).on('click', '#signupbutton', function(){
if($('#susername').val()!='' && $('#spassword').val()!=''){
$('#signtext').text('Signing up...');
$('#myalert').slideUp();
var signform = $('#signform').serialize();
$.ajax({
method: 'POST',
url: 'signup.php',
data: signform,
success:function(data){
setTimeout(function(){
$('#myalert').slideDown();
$('#alerttext').html(data);
$('#signtext').text('Sign up');
$('#signform')[0].reset();
}, 2000);
}
});
}
else{
alert('Please input both fields to Sign Up');
}
});
$(document).on('click', '#loginbutton', function(){
if($('#username').val()!='' && $('#password').val()!=''){
$('#logtext').text('Logging in...');
$('#myalert').slideUp();
var logform = $('#logform').serialize();
setTimeout(function(){
$.ajax({
method: 'POST',
url: 'login.php',
data: logform,
success:function(data){
if(data==''){
$('#myalert').slideDown();
$('#alerttext').text('Login Successful. User Verified!');
$('#logtext').text('Login');
$('#logform')[0].reset();
setTimeout(function(){
location.reload();
}, 2000);
}
else{
$('#myalert').slideDown();
$('#alerttext').html(data);
$('#logtext').text('Login');
$('#logform')[0].reset();
}
}
});
}, 2000);
}
else{
alert('Please input both fields to Login');
}
});
});
Try to use
<input type ="submit" id="loginbutton">
instead of
<button type="button" id="loginbutton">
to post your form.
Change
header('location: admin/index.php');
to
header('Location: agent/index.php');
it is an easy mistake to make
You forgot to define the methodand action in form tag. The method attribute specifies how to send form-data. When posting a form, it always good to have a method is post. As for action, a route or file location where action should perform.
So try this:
<form method="post" action="/{_action_filename_}.php">
I'm fairly new to Ajax. I am getting the correct values from the PHP url in my Ajax function. The problem is that my data parameter is causing it to duplicate values.
Here is what is displaying on the actual webpage:
Here is the console.log output:
[2000, 335.1032163829112]
[2000, 335.1032163829112]
[2000, 335.1032163829112]
[2000, 335.1032163829112]
[2000, 335.1032163829112]
The form has 5 input fields, so I'm assuming since the Ajax function says $('form').serialize(), it's returning the requested values as many times are there are input fields.
What is the correct data parameter to send what I need? I only need 2 values that are calculated in my php script.
Here is the initial form, then the hidden div and Ajax call:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Volume Calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container page-heading">
<h2>Volume Calculator</h2>
</div>
<!--<form class="form-horizontal" method="post" action="result.php">-->
<form id="form" class="form-horizontal" method="post" action="">
<div class="form-container">
<p class="calculate-heading">Calculate Volume of a Rectangle</p>
</div>
<div class="container form-container">
<div class="row">
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<label for="width" class="col-sm-3 col-form-label">Width: </label>
<div class="col-sm-9">
<input type="number" class="form-control pull-left" id="width" name="width" required>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<label for="length" class="col-sm-3 col-form-label">Length: </label>
<div class="col-sm-9">
<input type="number" class="form-control pull-left" id="length" name="length" required>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<label for="height" class="col-sm-3 col-form-label">Height: </label>
<div class="col-sm-9">
<input type="number" class="form-control pull-left" id="height" name="height" required>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 bs-linebreak">
<!-- NOTHING. JUST A LINE BREAK -->
</div>
</div>
<div class="form-container">
<p class="calculate-heading">Calculate Volume of a Cone</p>
</div>
<div class="container form-container">
<div class="row">
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<label for="radius" class="col-sm-3 col-form-label">Radius: </label>
<div class="col-sm-9">
<input type="number" class="form-control pull-left" id="radius" name="radius" required>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<label for="cone_height" class="col-sm-3 col-form-label">Height: </label>
<div class="col-sm-9">
<input type="number" class="form-control pull-left" id="cone_height" name="cone_height"
required>
</div>
</div>
</div>
</div>
</div>
<div class="container form-container">
<div class="row">
<!--<button type="submit" id="submit-btn" class="btn btn-primary">Calculate</button>-->
<button type="button" id="submit-btn" class="btn btn-primary">Calculate</button>
</div>
</div>
</form>
Hidden div that appears and Ajax function:
<!-- NEW DIV THAT APPEARS ON FORM SUBMIT. HIDDEN BY DEFAULT VIA JQUERY -->
<div id="result-form" class="form-horizontal">
<div class="form-container">
<p class="calculate-heading">Summary of Calculations</p>
</div>
<div class="row">
<div class="col-md-12 bs-linebreak">
<!-- NOTHING. JUST A LINE BREAK -->
</div>
</div>
<div class="form-container">
<p class="calculate-heading calculate-heading-bold">Volume of Rectangle</p>
<p id="length-p" class="calculate-heading">Length: </p>
<p id="width-p" class="calculate-heading">Width: </p>
<p id="height-p" class="calculate-heading">Height: </p>
<br>
<p id=rec_volume-p" class="calculate-heading">The Volume of the Rectangle is <strong></strong></p>
</div>
<div class="form-container">
<p class="calculate-heading calculate-heading-bold">Volume of a Cone</p>
<p id="radius-p" class="calculate-heading">Radius: </p>
<p id="cone_height-p" class="calculate-heading">Height: </p>
<br>
<p id="cone_volume-p" class="calculate-heading">The Volume of the Cone is <strong></strong></p>
</div>
</div>
</body>
<script>
//HIDE THE DIV WHEN DOCUMENT IS LOADED
$(document).ready(function() {
$('#result-form').hide();
});
//GET RID OF DEFAULT HTML INVALID WARNING
$('input').on("invalid", function (e) {
e.preventDefault();
});
//HANDLE BUTTON SUBMIT
//LOOP THROUGH ALL INPUT ELEMENTS AND CHECK FOR INVALID FIELDS
$('#submit-btn').click(function () {
$('form input[type!=submit]').each(function () {
if ($(this).val() == '') {
alert("All fields are required");
return false;
}
else {
//AJAX CALL HERE
$.ajax({
type:'post',
url:'calculate.php',
data: $('form').serialize(), //<-- THIS IS THE PROBLEM, BUT I DON'T KNOW WHAT TO DO
success: function(output) {
var result = $.parseJSON(output);
console.log(result);
$('#result-form').show();
$('#length-p').append($('#length').val());
//REST OF THE VALUES UNDER THIS
}
});
}
});
});
</script>
The calculate.php script:
<?php
//Rectangle dims
$width = $_POST['width'];
$length = $_POST['length'];
$height = $_POST['height'];
//Cone dims
$radius = $_POST['radius'];
$cone_height = $_POST['cone_height'];
//Rectangle volume
$rec_volume = $width * $length * $height;
//Cone volume
$cone_volume = 1/3 * (M_PI * pow($radius, 2) * $cone_height);
echo json_encode(array($rec_volume, $cone_volume));
I would really like to do this asynchronously instead of going to a completely new page. It just seems redundant. What is the correct data parameter?
Thanks.
Your code loops over every variable in the form and issues an ajax call. Each ajax call returns and appends the results to the #length-p element.
The solution is to only call the ajax once, after you've verified all the elements are filled out. This should do it.
$('#submit-btn').click(function () {
// validate, failures issue alert and exist the call.
$('form input[type!=submit]').each(function () {
if ($(this).val() == '') {
alert("All fields are required");
return false;
}
});
// no failure, so issue the request.
//AJAX CALL HERE
$.ajax({
type:'post',
url:'calculate.php',
data: $('form').serialize(), //<-- THIS IS THE PROBLEM, BUT I DON'T KNOW WHAT TO DO
success: function(output) {
var result = $.parseJSON(output);
console.log(result);
$('#result-form').show();
$('#length-p').append($('#length').val());
//REST OF THE VALUES UNDER THIS
}
});
});
I am trying to get select menus show hide by using ajax and serialised hashes. I had this system working last night but I changed the #selector from a form to a div and suddenly its stopped running. I had to broaden the form for additional data on post and did not want to serialise all the data at once for this as it would be additional strain on the system.
The page somewhat works as expected. It shows the first select, allows me to select an option, I can see the AJAX posting but the hash value is empty which I believe is breaking the PHP above. I cant figure out why the hash is posting empty. I assume its not getting the value from the select but I cant work out why..
If possible can you please point out where I am going wrong?
<section id="add">
<div class="container">
<form method="post">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 1: Instance Select</strong></h3>
</div>
<div id="selector">
<div class="panel-body">
<div class="col-md-6">
<select class="form-control box1" name="box1"></select>
<input name="box1hash" class="box1hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box2" name="box2"></select>
<input name="box2hash" class="box2hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box3" name="box3"></select>
<input name="box3hash" class="box3hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box4" name="box4"></select>
<input name="box4hash" class="box4hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box5" name="box5"></select>
<input name="box5hash" class="box5hash" type="hidden" />
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 2: Event Details</strong></h3>
</div>
<div class="panel-body">
<input name="event_name" type="text" class="form-control" />
</div>
</div>
<input type="submit"/>
</form>
</div>
$(document).on('change', '#selector', function(e) {
ajax_post(this);
});
ajax_post();
})(jQuery);
function show_hide_select(select){
if ($(select).find('option').length < 1) {
$(select).hide();
} else {
$(select).show();
}
}
function ajax_post(element=null) {
var frm = $('#selector');
if (element != null) {
// Reset selections
var found=false;
frm.find('select').each(function(e){
if (found==true) {
$(this).hide().find('option:selected').prop("selected", false)
}
if (element==this) found=true;
});
}
$.ajax({
url: '?ajax=1',
type: "POST",
data: frm.serialize(),
dataType: 'json',
success: function (data) {
if (data.box1hash != frm.find('.box1hash').val()) {
frm.find('.box1').html(data.box1?data.box1:'');
frm.find('.box1hash').val(data.box1hash);
show_hide_select(frm.find('.box1'));
}
if (data.box2hash != frm.find('.box2hash').val()) {
frm.find('.box2').html(data.box2?data.box2:'');
frm.find('.box2hash').val(data.box2hash);
show_hide_select(frm.find('.box2'));
}
if (data.box3hash != frm.find('.box3hash').val()) {
frm.find('.box3').html(data.box3?data.box3:'');
frm.find('.box3hash').val(data.box3hash);
show_hide_select(frm.find('.box3'));
}
if (data.box4hash != frm.find('.box4hash').val()) {
frm.find('.box4').html(data.box4?data.box4:'');
frm.find('.box4hash').val(data.box4hash);
show_hide_select(frm.find('.box4'));
}
if (data.box5hash != frm.find('.box5hash').val()) {
frm.find('.box5').html(data.box5?data.box5:'');
frm.find('.box5hash').val(data.box5hash);
show_hide_select(frm.find('.box5'));
}
}
});
}
</script>
Contrary to my earlier comments, a form tag cannot be nested within another form tag. jquery serialize() only works on forms, so unfortunately it's not possible to focus it on a div component of the form. Instead however you can serialize the whole form as a string, and then extract the subsection of that string for reduced ajax posting. Snippet below with inline comments...
$('form').on({
'change':function(e){
e.preventDefault();
var dats = $(this).serialize(); // serialize the whole form into a string
var pico = dats.indexOf('&event_name='); // get the index of the end point of the desired data
var newDats = dats.slice(0 , pico); // get the edited section for ajax submission
$('#results').text(dats+' '+newDats);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="add">
<div class="container">
<form method="post" id='bob'>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 1: Instance Select</strong></h3>
</div>
<div id="selector">
<div class="panel-body">
<div class="col-md-6">
<select class="form-control box1" name="box1">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<input name="box1hash" class="box1hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box2" name="box2"></select>
<input name="box2hash" class="box2hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box3" name="box3"></select>
<input name="box3hash" class="box3hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box4" name="box4"></select>
<input name="box4hash" class="box4hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box5" name="box5"></select>
<input name="box5hash" class="box5hash" type="hidden" />
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 2: Event Details</strong></h3>
</div>
<div class="panel-body">
<input name="event_name" type="text" class="form-control" />
</div>
</div>
<input type="submit"/>
</form>
</div>
<p><tt id="results"></tt></p>
I am using onclick jquery event to append ajax response in modal box.My purpose is to display a form with auto Filled Data in modal box that comes from ajax Response according to id from mysql database.But it is not dispaying form for some users.
my code for above explained is here
Jquery code:
$(document).on("click",".edit_recent_member_form",function(e){
e.preventDefault();
$("#overlay").addClass("load_show");
$("#formModal .modal-body").html("");
var edit_recent_member_form="edit_recent_member_form";
var mem_id=$(this).attr("mem_id");
var datastring="edit_members_form="+edit_recent_member_form+"&mem_id="+mem_id;
//alert(datastring);
$.ajax({
url:"modules/my_members/edit_member_form.php",
type:"post",
dataType:"json",
data:datastring,
}).done(function(data){
var html=data["html"];
//alert(html);
$("#formModal .modal-body").append(html);
$('#formModal').modal({
show:true
//backdrop:'static'
});
/////
$(".mi-multiup").dropzone({ url: "modules/my_members/ajax.php?var=edit_profile_pic" ,acceptedFiles : ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF" });
var sendingHandler = function(file, xhr, formData) {
formData.append('mem_id',mem_id);
//formData.append('img_name', $(".img_name").val());
//formData.append('img_desc', $(".img_desc").val());
};
$('.mi-multiup').each(function() {
Dropzone.forElement(this).on('sending', sendingHandler);
});
//////
$("#overlay").removeClass("load_show");
});
});
Ajax code:
if(isset($_REQUEST['edit_members_form']))
{
$mem_id=$_REQUEST['mem_id'];
$html='<div class="panel panel-default">
<form class="form-horizontal form-border">
<div class="alert alert-success successbox">
Selected Record is Saved Successfully.
</div>
<div class="alert alert-danger dangerbox"></div>
<div class="panel-heading">
Edit Member
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label col-md-2">Login</label>
<div class="col-md-10">
<input type="text" class="form-control user_login" placeholder="" value="'.get_edit_member_detail($mem_id,"user_login",$page).'">
</div><!-- /.col -->
</div><!-- /form-group -->
<div class="form-group">
<label class="col-lg-2 control-label">Category</label>
<div class="col-lg-10">
<select class="form-control chzn-select category">
<option>None selected or enter new category</option>
'.get_category_detail($mem_id,$page,"none").'
</select>
<input type="text" class="form-control" name="newcategory" value="" placeholder="Enter a new category" size="28" />
</div><!-- /.col -->
</div><!-- /form-group -->
<div>Upload Image</div>
<div class="form-horizontal form-border" style="display:none;">
<h3>Click on area to upload new image</h3>
<div class="dropzone mi-multiup"></div>
</div>
</div>
<div class="panel-footer">
<div class="text-right">
<button class="btn btn-sm btn-success update_member_info" mem_id='.$mem_id.'>Update Member Information</button>
</div>
</div>
</form>
</div><!-- /panel -->';
$list = array('html' =>$html);
echo json_encode($list);
}
and it is the code whose onclick all work should be done
<td>
<i class="fa fa-user-md fa-lg"></i></td>
please any solution.
May be this solution. Add this code in ajax calling
url:"modules/my_members/edit_member_form.php",
type:"post",
dataType:"json",
data:datastring,
async: false