...

View Full Version : Ajax form submission is giving a headache



grumpy
03-22-2011, 03:08 PM
Hello,

I suck at ajax, so I am unable to see where I went wrong with ajax form submission. The procedure I have implemented: click a button, dhtml window opens up (its contents are a hidden <div> and the form), user either clicks a submit button or a cancel button and if submit is clicked the ajax code captures the variables and sends them by POST to a separate file for database insertion and also refreshes a certain other <div> on the original page at the same time.

The problem is that the ajax doesn't work - it is not sending the variables to the external file it seems, nor is it refreshing the <div> on the original page. I think the external page that inserts the data into the database is done correctly.

Could anyone please suggest where I went wrong.

Here's the js code (the relevant function is highlighted in RED):

$(function() {
$('.error').hide();
$(".button").click(function() {
// validate and process form here

$('.error').hide();
var domain = $("input#domain").val();
if (domain == "") {
$("label#domain_error").show();
$("input#domain").focus();
return false;
}
var com_domain = $("input#com_domain").val();
if (com_domain == "") {
$("label#com_domain_error").show();
$("input#com_domain").focus();
return false;
}
var cemail = $("input#cemail").val();
var port = $("select#port").val();
var active = $("input#active").val();
var uid = $("input#uid").val();
var main = $("select#main").val();

var dataString = 'cemail='+ cemail + '&domain=' + domain + '&com_domain=' + com_domain + '&active=' + active + '&main=' + main + '&port=' + port;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "user_add.php",
data: dataString,
success: function() {
$('#monitor_form').append("<div id='message'></div>");
$('#monitor_form form')[0].reset();
$('#message').html("<img id='checkmark' src='images/tick.png' /><b> Monitor sucessfully added!</b>")
.hide()
.fadeIn(500, function() {
$('#message').append("");
});

setTimeout("$('#message').hide().remove();", 6000);
var dataString2 = 'ajax=1&uid=' + uid;
$.ajax({
type: "GET",
url: "monpanel.php",
data: dataString2,
success: function(html_data){
$('#list_monitors').html(html_data);
}
});
//document.onkeydown = showDown;
}
});
return false;
});
});

function showDown(evt) {
event = (evt)? evt : ((event)? event : null);
if (evt) {
if (event.keyCode == 8 && (event.srcElement.type!= "text" && event.srcElement.type!= "textarea" && event.srcElement.type!= "password")) {
// When backspace is pressed but not in form element
cancelKey(evt);
}
else if (event.keyCode == 116) {
// When F5 is pressed
cancelKey(evt);
}
else if (event.keyCode == 122) {
// When F11 is pressed
cancelKey(evt);
}
else if (event.ctrlKey && (event.keyCode == 78 || event.keyCode == 82)) {
// When ctrl is pressed with R or N
cancelKey(evt);
}
else if (event.altKey && event.keyCode==37 ) {
// stop Alt left cursor
return false;
}
}
}

function cancelKey(evt) {
if (evt.preventDefault) {
evt.preventDefault();
return false;
}
else {
evt.keyCode = 0;
evt.returnValue = false;
}
}

/*function mycallbackfunc(v,m,f) {
if (v == 'Cancel') {
$.prompt('The action was ' + v + 'ed');
}
else {
$.prompt('Monitor ' + v + 'd successfully');
}
}*/

$(function() {
$(".button2").click(function() {
// process form here

var act = $("input#act").val();
var uid = $("input#uid").val();
var sid = $("input#sid").val();

var dataString3 = 'act='+ act + '&uid=' + uid + '&sid=' + sid;
alert (dataString3);return false;
$.ajax({
type: "POST",
url: "delpaures.php",
data: dataString3,
success: function() {
$('#mondel').append("<div id='message'></div>");
/*$('#mondel form')[0].reset();*/
$('#message').html("<img id='checkmark' src='images/tick.png' /><b> Monitor deleted sucessfully</b>")
.hide()
.fadeIn(500, function() {
$('#message').append("");
});

/*setTimeout("$('#message').hide().remove();", 6000);*/
var dataString4 = 'ajax=1&uid=' + uid;
$.ajax({
type: "GET",
url: "monpanel.php",
data: dataString4,
success: function(html_data){
$('#list_monitors').html(html_data);
}
});
//document.onkeydown = showDown;
}
});
return false;
});
});

$(function() {
$(".button3").click(function() {
// process form here

var act = $("input#act").val();
var uid = $("input#uid").val();
var sid = $("input#sid").val();

var dataString5 = 'act='+ act + '&uid=' + uid + '&sid=' + sid;
alert (dataString5);return false;
$.ajax({
type: "POST",
url: "delpaures.php",
data: dataString5,
success: function() {
$('#monpau').append("<div id='message'></div>");
/*$('#monpau form')[0].reset();*/
$('#message').html("<img id='checkmark' src='images/tick.png' /><b> Monitor paused sucessfully</b>")
.hide()
.fadeIn(500, function() {
$('#message').append("");
});

/*setTimeout("$('#message').hide().remove();", 6000);*/
var dataString6 = 'ajax=1&uid=' + uid;
$.ajax({
type: "GET",
url: "monpanel.php",
data: dataString6,
success: function(html_data){
$('#list_monitors').html(html_data);
}
});
//document.onkeydown = showDown;
}
});
return false;
});
});

$(function() {
$(".button4").click(function() {
// process form here

var act = $("input#act").val();
var uid = $("input#uid").val();
var sid = $("input#sid").val();

var dataString7 = 'act='+ act + '&uid=' + uid + '&sid=' + sid;
alert (dataString7);return false;
$.ajax({
type: "POST",
url: "delpaures.php",
data: dataString7,
success: function() {
$('#monres').append("<div id='message'></div>");
/*$('#monpau form')[0].reset();*/
$('#message').html("<img id='checkmark' src='images/tick.png' /><b> Monitor resumed sucessfully</b>")
.hide()
.fadeIn(500, function() {
$('#message').append("");
});

/*setTimeout("$('#message').hide().remove();", 6000);*/
var dataString8 = 'ajax=1&uid=' + uid;
$.ajax({
type: "GET",
url: "monpanel.php",
data: dataString8,
success: function(html_data){
$('#list_monitors').html(html_data);
}
});
//document.onkeydown = showDown;
}
});
return false;
});
});

The form code:

<!-- monitor delete -->
<div id="mondel" style="display:none">
<center>
<h4>This will delete the selected monitor.<br><br>ARE YOU SURE YOU WANT TO DELETE?</h4>
<br><br>
<form name="mondell" action="">
<input type="hidden" name="act" id="act" value="delete">
<input type="hidden" name="uid" id="uid" value="<?php echo $uid ?>">
<input type="hidden" name="sid" id="sid" value="<?php echo $sid ?>">
<input type="submit" name="submit" value="Delete" class="button2" id="button2">
<input type="button" name="cancel" id="cancel" value="Cancel">
</form>
</center>
</div>


and the external file code:

<?php

if($_POST)
{
$action = $_POST['act'];
$monitor_id = $_POST['sid'];
$user_id = $_POST['uid'];

if (($action != "") && ($monitor_id != "") && ($user_id != "")) # && (is_string($action)))
{
if ($action == "delete")
{
$del_items="DELETE FROM servers WHERE id=$monitor_id AND user_id=$user_id";
mysql_query($del_items) or die(mysql_error( ));
}
if ($action == "pause")
{
$pause_items="UPDATE servers SET active=0 WHERE id=$monitor_id AND user_id=$user_id";
mysql_query($pause_items) or die(mysql_error( ));
}
if ($action == "resume")
{
$resume_items="UPDATE servers SET active=1 WHERE id=$monitor_id AND user_id=$user_id";
mysql_query($resume_items) or die(mysql_error( ));
}
}
}
?>

grumpy
03-24-2011, 04:15 PM
Solved it myself, eventually.

norma19
10-24-2011, 12:57 PM
Could you please tell me how?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum