...

View Full Version : Javascript not sending info into my database?



bigcasey123
11-28-2012, 03:38 PM
I paid someone to make me a simple popup box that sends input information into my database. I edited the php to work with my database but when i click "submit" nothing happens!

This is my html






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>your website</title>

<!-- INCLUDE THESE JAVASCRIPT AND CSS FILES INTO YOUR WEBSITE -->
<!-- CSS FILE -->
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
<!-- JAVASCRIPT FILES -->
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<!-- END INCLUDE FILES -->

</head>

<body>

<div align="center">

<img src="logo.png" title="Searchforfans.com" alt="logo" id="logo"/>

<form action='search.php' method='GET'>
<p><font size='5' face='arial'>
<input type='text' name='search' class='textbox' title='Search'><br>
<input type='submit' name='submit' id='classname' value='Search'></font></p>
</form>




<div class="box-overlay"></div>
<div class="box-container">
<h2>Please add your data in the form below!</h2>
<!-- USER INPUT FORM -->
<form method="post" action="store-user-input.php" class="ajax-post">
<table cellpadding="1" cellspacing="0" border="0">
<tr>
<td width="80"><label for="title">Title:</label></td>
<td><input type="text" id="title" name="title" /></td>
</tr>
<tr>
<td><label for="description">Description:</label></td>
<td><input type="text" id="description" name="description" ></td>
</tr>
<tr>
<td><label for="url">URL:</label></td>
<td><input type="text" id="url" name="url" /></td>
</tr>
<tr>
<td><label for="keywords">Keywords:</label></td>
<td><input type="text" id="keywords" name="keywords" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" name="Submit" style="cursor:pointer" /></td>
</tr>
</table>
</form>
<!-- END FORM -->
<div class="clear"></div>
<!-- THIS WILL CLOSE THE BOX -->
<a href="#" class="close-box">Close box</a>
<div class="clear"></div>
</div>



<input type="button" class="open-box" id="classname"value="ADDWEBSITE" />
<!-- OR YOU CAN PUT A HYPERLINK LIKE: <a href="#" class="open-box">ADDWEBSITE</a> -->




</body>
</html>


This is my php



<?php
// WE HAVE TO CONNECT TO MYSQL

$host = 'localhost';
$user = 'root';
$password = '';
$dbname = 'search-engine';
$dbtable = "search"; // leave this as is

$mysqli = new MySQLi($host, $user, $password, $dbname, $dbtable);
// IF THE MYSQL CONNECTION CANNOT BE MADE THE USER SHOULD KNOW THAT HIS DATA HAS NOT BEEN STORED
if($mysqli->error) {
echo json_encode(array("success" => false));
} else {


// id -> INT OR BIGING - PRIMARY - AUTOINCREMENT
// title -> VARCHAR(255)
// DESCRIPTION -> LONGTEXT
// url -> VARCHAR(255)
// keywords -> VARCHAR(255)
// date -> BIGINT - TIMESTAMP WILL BE STORED
$mysqli->query("INSERT INTO $dbtable (id, title, description, url, keywords,)
values ('".mysql_real_escape_string(stripslashes($_REQUEST['title']))."','".mysql_real_escape_string(stripslashes($_REQUEST['description']))."','".mysql_real_escape_string(stripslashes($_REQUEST['url']))."','".mysql_real_escape_string(stripslashes($_REQUEST['keywords']))."')";
if($mysqli->insert_id) {
// IF DATA HAS BEEN INSERTED
echo json_encode(array("success" => true));
} else {
echo json_encode(array("success" => false));
}

}

?>


and this is my function.js



// JavaScript Document

// WHEN DOM IS READY
$(document).ready(function(){

// ADD AN SUBMIT EVENT LISTENER ON EACH FORM WHICH HAS ASSIGNED A CLASS NAMED AJAX-POST
$('form.ajax-post').submit(function(){
var $our_form = $(this);

// FOR DOING OUR JOB WITH AJAX WE WILL USE $.POST METHOD OF jQuery
$.post(
// OUR ACTION FILE
$our_form.attr('action'),
// OUR SENT DATA
$our_form.serialize(),
// OUR RETURNED VALUES
function(data) {
if(data.success === true) {
// WE ADD A MESSAGE TO USER TO KNOW THAT HIS THAT HAS BEEN STORED SUCCESSFULLY
$('<p class="success">Your data has been stored successfully!</p>').insertAfter($our_form.parent().find('h2:first'));
// WE HAVE TO CLOSE THE BOX AFTER 3 SECONDS
setTimeout(function(){
$our_form.parent().find('.close-box').trigger('click');
}, 3000);

// WE HAVE TO EMPTY THE INPUT FIELDS
$our_form.find('input[type!=\'submit\'], textarea').each(function(){
$(this).val('');
});

} else {
// THE USER SHOULD KNOW THAT HIS DATA IS NOT STORED
$('<p class="error">Sorry but the data couldn\'t be stored! Please try again!</p>').insertAfter($our_form.parent().find('h2:first'));
}
},
// OUR POST TYPE
'json'

);

// IF WE RETURN FALSE THEN THE PAGE WILL NOT BE REDIRECTING TO THE ACTION FILE
return false;
});

// NOW WE HAVE TO OPEN THE BOX WHEN THE ADDWEBSITE BUTTON OR LINK IS PRESSED
// FOR THAT WE SHOULD GIVE TO EACH BUTTON WE WANT TO OPEN THE BOX THE CLASS OPEN-BOX

$('.open-box').click(function(e){
// IF THE BUTTON IS A HYPERLINK WE SHOULD PREVENT THE BROWSER FOR REDIRECTING OR OTHER ACTIONS
e.preventDefault();

var height = $(window).height();
var width = $(window).width();

// WE HAVE TO SET THE HEIGHT THE SAME AS WINDOW HEIGHT AND THE OPACITY TO 0.9
$('.box-overlay').css({
height: $(document).height() + 'px',
opacity: .9
}).fadeIn(300);

// WE HAVE TO POSITION THE BOX IN THE MIDDLE OF THE SCREEN
$('.box-container').css({
top: ((height - $('.box-container').outerHeight()) / 2) + 'px',
left: ((width - $('.box-container').outerWidth()) / 2) + 'px'
}).fadeIn(300);

});

$('.close-box').click(function(e) {

e.preventDefault();

// WE CLOSE THE BOX CONTAINER
$(this).parent().fadeOut(300);
// WE ALSO CLOSE THE OVERLAY DIV
$('.box-overlay').fadeOut(300);
});

});

AndrewGSW
11-28-2012, 06:25 PM
$mysqli->query("INSERT INTO $dbtable (id, title, description, url, keywords,)

You should omit id from this statement, and remove the hanging comma at the end.

bigcasey123
11-28-2012, 06:38 PM
ok i did what you said but still doesn't work.

Old Pedant
11-28-2012, 08:47 PM
Dare I ask why this is in the JAVASCRIPT forum when it seems to have nothing to do with JavaScript?

But anyway, it's time to learn how to DEBUG.

As a first step, stop trying to do everything in one line of code.


$title = mysql_real_escape_string(stripslashes($_REQUEST['title']));
$desc = mysql_real_escape_string(stripslashes($_REQUEST['description']));
$url = mysql_real_escape_string(stripslashes($_REQUEST['url']));
$kw = mysql_real_escape_string(stripslashes($_REQUEST['keywords']));

$sql = "INSERT INTO $dbtable ( title, description, url, keywords) "
. " VALUES('$title','$desc','$url','$kw')";

echo "<hr/>DEBUG SQL: " . $sql . "<hr/>\n";

$mysqli->query( $sql );
... etc. ...


And then start by invoking your PHP page WITHOUT using AJAX. So that you can more easily see what is happening and whether you are getting any errors in the PHP code.

Fact of life: If you can't debug, you can't program. Sorry, but too true.

bigcasey123
11-28-2012, 10:25 PM
"Sorry but the data couldn't be stored! Please try again!" i don't think it's a php problem. It has to be a javascript problem because my php has no errors.

Old Pedant
11-28-2012, 11:01 PM
You didn't do as I suggested.

First of all, clearly the PHP *did* have errors, as Andrew pointed out.

How can you be 100% sure it does not *STILL* have errors?

If you would do as I suggested, you could find out.

*TEMPORARILY* remove or comment out the line
<script type="text/javascript" src="js/functions.js"></script>
in your code. You can comment it out thus:


<!-- script type="text/javascript" src="js/functions.js"></script -->

Now change your PHP code as I suggested, so you get debug output.

THEN submit the <form>. It won't use AJAX. It will just do a standard form submit to the PHP page. And that, combined with the DEBUG code, will help you isolate the problem.

If, indeed, the PHP code works *THEN* it is time to look for the error in the AJAX code.

But the AJAX code will never work if the PHP has a bug.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum