asked on

Modify code to save to DB instead on JSON

Hi all,

I have some working code that currently saves data to a JSON file.

I wonder if anyone could modify the code so it save's to mysql DB instead?

The code currently uses 2 files but I don't mind hows it's translated as long as it works.

Here is the code below:

Thanks

//index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
	<title></title>
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>

	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
	
	<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" /> 
  <script src="jQuery.ui.datepicker.js"></script>
  <script src="jquery.ui.datepicker.mobile.js"></script>
  
  <script>
  //reset type=date inputs to text
  $( document ).bind( "mobileinit", function(){
    $.mobile.page.prototype.options.degradeInputs.date = true;
  });	
</script>

<script language="javascript">
	$(document).ready(function() {
		$("input[type='submit']").click(function(e) {
			e.preventDefault();
			$.post("save2json.php", { "jsonStr" : JSON.stringify( $("form").serializeArray() ) }, function(message) {
				alert(message);
			});
		});
	});
</script>
	
	
</head> 
<body> 
<div data-role="page" data-theme="b" id="jqm-home">
	<div id="jqm-homeheader">
		<h1>Some title here</h1>
	</div>
	
	<div data-role="content">
		
		<form action="#" method="POST">
    <div data-role="fieldcontain">
        <label for="date">Date Input:</label>
        <input type="date" name="date" id="date" value=""  /><br /><br />
        <label for="textarea">Event:</label>
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
        <input type="submit" value="save to json" />
    </div>		
</form>
		
	</div>
</div>
</body>
</html>


//save2json.php

<?php

if(isset($_POST["jsonStr"])) {
		$f = "form.json";
		$fh = fopen($f, 'a') or die("can't open file");
		fwrite($fh, $_POST["jsonStr"]);
		fclose($fh);
		echo "form saved successfully!";
	}
	else {
		echo "error occurred!";
	}

?>

Open in new window

leakim971

main page :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
	<title></title>
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>

	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
	
	<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" /> 
  <script src="jQuery.ui.datepicker.js"></script>
  <script src="jquery.ui.datepicker.mobile.js"></script>
  
  <script>
  //reset type=date inputs to text
  $( document ).bind( "mobileinit", function(){
    $.mobile.page.prototype.options.degradeInputs.date = true;
  });	
</script>

<script language="javascript">
	$(document).ready(function() {
		$("input[type='submit']").click(function(e) {
			e.preventDefault();
			$.post("save2json.php", $("form").serializeArray(), function(message) {
				alert(message);
			});
		});
	});
</script>
	
	
</head> 
<body> 
<div data-role="page" data-theme="b" id="jqm-home">
	<div id="jqm-homeheader">
		<h1>Some title here</h1>
	</div>
	
	<div data-role="content">
		
		<form action="#" method="POST">
    <div data-role="fieldcontain">
        <label for="date">Date Input:</label>
        <input type="date" name="date" id="date" value=""  /><br /><br />
        <label for="textarea">Event:</label>
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
        <input type="submit" value="save to json" />
    </div>		
</form>
		
	</div>
</div>
</body>
</html>

Open in new window

error77

ASKER

Sorry leakim971, but I don't understand...how would this code save to mysql db table?

THanks

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

error77

ASKER

OK, it says "form saved successfully!" but nothing was saved.

Could it be because I'm not specifying and database?

I the connection string I can't see where to speciy a DB name...Is that right?

thanks

error77

ASKER

This is the table I created for it to store the data:

CREATE TABLE IF NOT EXISTS `mytable` (
`id` int(11) NOT NULL auto_increment,
`date` text NOT NULL,
`textarea` mediumtext NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

leakim971

that's a good start

error77

ASKER

Any ideas why it might not be saving to the DB?

leakim971

you got it?

if you need to handle error from the query use :

<?php
$link = mysql_connect('localhost', 'mysql_user', 'mysql_password');
if (!$link) {
    die('Could not connect: ' . mysql_error());
}

$date = $_POST["date"];
$textarea = $_POST["textarea"];

$query = "INSERT INTO YOUR_TABLE (date,textarea) VALUES ('" . mysql_real_escape_string($date) . "','" . mysql_real_escape_string($textarea) . "')";

$result = mysql_query($query,$link);

		if(!$result) {
			echo mysql_errno($link) . "\n";
			die("bad query : " . mysql_error());
		}

echo "form saved successfully!";

?>

Open in new window

leakim971

Thanks for the points!