asked on Save data of form to database with jquery, ajax and php
Hello everyone!
I am working on a website which needs to collect some type of data from the visitors and then send it to a database/file.
I did an example to illustrate:
![form_img]()
So, on the left I have a form so the users can submit their company's name and annual income. Then I have a counter that after processing the data will update the values.
What I need here is instead of the form data goes to an email, I need the data to be sent to a database or file and then the same data will update the values of the number of companies that submited the form and the accumulated annual income of all companies.
What I have so far
-the hmtl page with form and counter:
-Using jquery/ajax to send the submitted data to a php file:
-the php file(save.php):
So, I have a simple setup (with my limited knowledge of jquery/php), that sends the data from the form to a php file that writes the data to a simple .txt file(data.txt).
I would like to ask if this aproach is relaiable and secure and how would I send the data for a database and then grab the values and update the counters with no manual editing.
Also, I would need the submitted data rendered in an html page so the admin of the site can see the submited companies and have that reference. This page needs to be secure, so only the admin can see it.
This is my first question, not sure if I am following the protocol, and if I am asking too much. Thank you and sorry for my bad english
I am working on a website which needs to collect some type of data from the visitors and then send it to a database/file.
I did an example to illustrate:
So, on the left I have a form so the users can submit their company's name and annual income. Then I have a counter that after processing the data will update the values.
What I need here is instead of the form data goes to an email, I need the data to be sent to a database or file and then the same data will update the values of the number of companies that submited the form and the accumulated annual income of all companies.
What I have so far
-the hmtl page with form and counter:
<div id="container">
<div id="form-submit">
<form action="#" method="get">
<label for="name-of-company">Company Name: </label>
<input type="text" name="name-of-company" value="" id="name-of-company" /><br>
<label for="annual-income">Annual Income : </label>
<input type="text" name="annual-income" value="" id="annual-income" /><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
</div>
<div id="counter">
<ul>
<li><h4>Number of companies</h4></li>
<li>0</li>
<li><h4>Accumulated Annual Income</h4></li>
<li>0</li>
</ul>
</div>
</div><!--end container-->
-Using jquery/ajax to send the submitted data to a php file:
<script>
$('form').on('submit', function() {
$.post('save.php', $(this).serialize(), function() {
console.log('completed!');
});
return false;
})
</script>
-the php file(save.php):
<?php
$f = fopen('data.txt', 'w');
fwrite( $f, $_POST['name-of-company']);
fwrite( $f, $_POST['annual-income']);
fclose($f);
So, I have a simple setup (with my limited knowledge of jquery/php), that sends the data from the form to a php file that writes the data to a simple .txt file(data.txt).
I would like to ask if this aproach is relaiable and secure and how would I send the data for a database and then grab the values and update the counters with no manual editing.
Also, I would need the submitted data rendered in an html page so the admin of the site can see the submited companies and have that reference. This page needs to be secure, so only the admin can see it.
This is my first question, not sure if I am following the protocol, and if I am asking too much. Thank you and sorry for my bad english
HTMLjQueryPHP
Last Comment
joao_c
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
So, let me post my progress:
Jquery
db.php
save.php
My follow-up questions:
-The code I have so far is working, but should/can I improve it or it's ok like this?
-Also, see the image again:
![myform]()
I need the values of "Number of companies" to be updated with the number of entries in the Database.
And the "Accumulated annual income" to be also updated, adding up all the anual incomes, if I have 2 entries in the database with the annual incomes being 5 in one and 4 in other, the value should be added up and rendered in html as "9", where is 0 now.
Thank you so much.
Jquery
<script>
function clearInput() {
$("#myForm :input").each( function() {
$(this).val('');
});
};
$("#submitBtn").click( function() {
var result = $('#result');
var company = $('#myForm > #name-of-company');
var ai = $('#myForm > #annual-income');
var characterReg = /^([a-zA-Z0-9]{2,50})$/; //only letters and numbers
var aiReg = /^([0-9]{3,15})$/; //only numbers
var inputVal = ai.val();
var inputValName = company.val();
if ( !characterReg.test(inputValName) ){
result.text('that\'s not a valid name!');
company.addClass('wrong');
} else if ( !aiReg.test(inputVal) ) {
result.text('only numbers!');
ai.addClass('wrong');
company.removeClass('wrong');
} else {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ result.html(info);
});
clearInput();
company.removeClass('wrong');
ai.removeClass('wrong');
};
});
$("#myForm").submit( function() {
return false;
});
</script>
db.php
<?php
$conn = mysql_connect('localhost', 'root', '');
$db = mysql_select_db('dados_db');
?>
save.php
<?php
include_once('db.php');
$name = $_POST['name-of-company'];
$ai = $_POST['annual-income'];
if(mysql_query("INSERT INTO empresas VALUES('$name', '$ai')"))
echo "Data sent!";
else
echo "Data not sent!";
?>
My follow-up questions:
-The code I have so far is working, but should/can I improve it or it's ok like this?
-Also, see the image again:
I need the values of "Number of companies" to be updated with the number of entries in the Database.
And the "Accumulated annual income" to be also updated, adding up all the anual incomes, if I have 2 entries in the database with the annual incomes being 5 in one and 4 in other, the value should be added up and rendered in html as "9", where is 0 now.
Thank you so much.
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Ray_Paseur, thanks for the reply. That is what I needed.
Just to finish this question, consider the following exampe:
-My html and css renders like so:
![html]()
-Html:
How would I replace these "dummy" numbers with the number returned from the MySQL SUM() function?
-Let's say in the beggining the number returned from the mysql sum is "1256"; I need to keep the zeros on the left and only affect the 4 numbers on the right. How would I do that?
Thanks a lot
Just to finish this question, consider the following exampe:
-My html and css renders like so:
-Html:
<span id="euro">€</span>
<span id="number">0</span>
<span id="separador">.</span>
<span id="number">0</span>
<span id="number">0</span>
<span id="number">0</span>
<span id="separador">.</span>
<span id="number">3</span>
<span id="number">6</span>
<span id="number">9</span>
<span id="separador">.</span>
<span id="number">9</span>
<span id="number">9</span>
<span id="number">9</span>
<li id="text_vendas">accumulated annual income</li>
How would I replace these "dummy" numbers with the number returned from the MySQL SUM() function?
-Let's say in the beggining the number returned from the mysql sum is "1256"; I need to keep the zeros on the left and only affect the 4 numbers on the right. How would I do that?
Thanks a lot
ASKER
Thanks everyone for the help.
http://www.jstiles.com/Blog/How-To-Submit-a-Form-with-jQuery-and-AJAX
http://stackoverflow.com/questions/10584370/how-can-i-pass-data-from-jquery-to-php-for-saving-into-a-database