Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2012
    Posts
    102
    Thanks
    2
    Thanked 5 Times in 4 Posts

    Javascript not sending info into my database?

    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

    Code:
    
    
    <!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

    Code:
    <?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

    Code:
    // 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);
    	});
    
    });
    Last edited by bigcasey123; 11-28-2012 at 04:41 PM.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    PHP Code:
    $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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Regular Coder
    Join Date
    Mar 2012
    Posts
    102
    Thanks
    2
    Thanked 5 Times in 4 Posts
    ok i did what you said but still doesn't work.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,649
    Thanks
    80
    Thanked 4,636 Times in 4,598 Posts
    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.
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Regular Coder
    Join Date
    Mar 2012
    Posts
    102
    Thanks
    2
    Thanked 5 Times in 4 Posts
    "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.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,649
    Thanks
    80
    Thanked 4,636 Times in 4,598 Posts
    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:
    Code:
    <!-- 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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •