This is what I want to do:
When a HTML form is submitted, the form data is passed to JavaScript to do some calculations, then the form data along with the results (of JavaScript calculations) are passed to PHP to save data to the database.
Now, I know how to pass form data to JavaScript (or) PHP alone. But how to pass the data to both of them at the same time? And how to pass JavaScript data to PHP?
Also, am I going about it the wrong way?
1. Make calculations in Server Side:
"I wish to use client side for the maximum possible effect to reduce server costs" is not the best reason for doing so, if the calculations are not O(4^n), you should go ahead with doing this in the server side.
$myvariable = $_POST['numbers']; //I will skip sanitize
SomeCalculations($myvariable); //Making the calculations
2. If you really want to use Javascript:
If you really want to use javascript (I will use Jquery for simplicity) for learning or because you really think that is necessary in this case, then you can get the form data before submit and doing the calculations:
2.1 Submit the form like a normal form after make the calculations:
$('form').submit(function(e){
e.preventDefault()
var $this = $(this)
var formData = $this.serialize()
// do some calculations
var yourData = makeCalculations(formData);
$(this).submit();
});
2.2 Submit the form via Ajax (recommended since you are already using Javascript)
$('form').submit(function(e){
e.preventDefault()
var $this = $(this)
var formData = $this.serialize()
// do some calculations
$.ajax({
type: "POST",
url: "http://nakolesah.ru/",
data: makeCalculations(formData),
success: function(msg){
//This is returned in the server side
alert('wow'+msg);
}
});
});
Why not just do the needed calculations on PHP end? It's much easier and saves you headache making sure the data isn't tampered with, etc. The data is being passed there already.
Anyway - You'd either need to have javascript monitor the form and run the calculations as the user completes it. You can:
store those values in other (hidden?) form fields, which then get passed to php
use php to do the same calcs (not recommended)
cancel the form send action and send the data via ajax
You can use AJAX method for your stuff. $.ajax() or $.post() and etc. you can use any one of the method for your use.
Ref: http://api.jquery.com/jQuery.ajax/
Ref - POST: http://api.jquery.com/jQuery.post/
Since you wish to pass data to both PHP and JavaScript at the same time, I can think of only one method. It's not really simultaneous but it's very close to it.
So, let us say that you have this form #myAwesomeForm.
Write a JavaScript like this (assuming you are using jQuery $.post):
$( '#myAwesomeForm' ).submit( function( e ) {
var result = someAwesomeFunction() // this will do your calculation and return it
$.post(
'someAwesomePHPScript.php',
{
formData: $( this ).serialize(),
calculatedData: result
}, function( data ) {
// some more awesome stuff happens here
}
);
});
If you want to pass the data without changing the page, then use AJAX.
http://www.w3schools.com/ajax/
Otherwise use window.location("someFile.php?var1=xyz&...");
Related
This post by #BenjaminRH (How to change/edit the text of a paragraph/div using jQuery?) provides exactly the sort of functionality I'm trying to build on.
By clicking on a button, a new paragraph is created on the page, which can be edited and saved to the page.
I want to save it to a database. When I look at the page source after editing, I don't see the changes there, which doesn't surprise me... but I don't know where to "capture" the changed text so that I can validate and post to mySQL.
JQuery is a javascript library - which runs client side. If you wanted to save that data into the database - you would have to send it to the server (php/asp/mvc etc) using ajax and then insert the data into the database.
See the jquery Ajax function for details on how to accomplish sending data asynchronously.
Create the data in javascript that you want to show and save in database.
Wrap the data in JSON and use ajax to POST the data to the server side code
Server-side retrieve the posted data and parse it into something usable
Server-side write a script to insert the data into the database.
Handle any errors that may occur.
Pseudo-code:
// step 1
var someData = 'this is my data';
$("#myDiv").html(someData);
// step 2
$.ajax({
type: "POST",
dataType: 'json', // <-- if the data is complex and needs to be object-oriented
url: "some.php", // <-- that is the file that will handle the post server-side.
data: JSON.stringify({ someData }) // <-- just pass someData if your data is not complex
})
.always(function(jqXHR, textStatus) {
if (textStatus != "success") {
// step 5: handle error.
alert("Error: " + jqXHR.statusText); //error is always called .statusText
} else {
alert("Success: " + jqXHR.response); //might not always be named .response
}});
OK, I've managed to solve it for myself, without using ajax. I took the example from (How to change/edit the text of a paragraph/div using jQuery?) and modified it by placing the elements in an (html) form.
The second modification was to use <textarea> elements, not <p> elements, as <p> elements cannot be posted.
As #caspian pointed out (in the comments) those two steps do populate the $_POST array and away we go.
I have a fairly complex PHP script in place, and I need to embed a very small JavaScript prompt inside of this code.
This is my criteria / requirement:
I want this JavaScript code to execute when a certain set of criteria is met.
I do NOT want to execute this code with any kind of submit button.
I currently have the PHP code calling the JavaScript prompt correctly.
The JavaScript comment / variable is being initialized, and stored properly, within the JavaScript code itself.
The parent PHP code is waiting for the JavaScript input, and does not continue until the prompt text has been entered.
But, I have not been able to figure out how to pass the JavaScript variable back to the parent PHP code.
What I have so far is very simple, but it is working exactly as I intended:
function getReprNotes() {
?>
<script>
var REPRNOTES = prompt('Please enter any appropriate reprocessing request notes');
alert(REPRNOTES);
</script>
<?php
}
getReprNotes()
Note that I want to pass the REPRNOTES text / variable back to the parent script.
Can anyone tell me how I need to do this, using the above code?
Keep in mind javascript is client side scripting, and php is server side. The only way for you to send information to PHP is by making a call to the server, the best way to do this from the client using javascript without submitting a form is by is using AJAX.
Take a look at these tutorials: 5 Ways to make AJAX calls with jquery and 24 best practices for AJAX implementations.
This is what AJAX calls are for. Split your PHP into two and have the javascript issue an ajax call which triggers the second. If you can use jQuery then you want to make a $.ajax() call: https://api.jquery.com/jQuery.ajax/
If you can't or don't want to use jQuery you can still make ajax calls through XMLHttpRequest objects: http://www.w3schools.com/Ajax/default.asp
$.ajax({
url: '/to-some-url',
data: 'data=' + value,
type: 'POST',
success: function (response, textStatus, jqXHR) {
if (jqXHR.status > 0) {
// do something here
}
}
});
You can use jquery ajax method to pass javascript variable value to php by post(or get). But I don't understand what you really want to achieve
What is a good way of saving data form without submit button?
I have one idea. Below exemplary source code.
var delay = 1000,
timeId,
ajax,
//fw is some framework
form = fw.get('myform');
form.getFields().on('change', changeEventHandler);
function changeEventHandler() {
clearTimeout(timeId);
timeId = setTimeout(this.ajaxRequest, delay);
}
function ajaxRequest() {
//What do with old ajax request? Abort it?
ajax = fw.ajax({
url: 'ololo',
params: {
data: form.getValues()
}
});
}
What do with old ajax request? Abort it?
Have somebody other ideas?
I had a similar problem when designed an interactive form without save button.
First of all, its not a good idea to save the data on every change. I used on blur event, so when the input loses focus, I check if the value was changed (i.e. not just focus-blur on the input), if it was changed, I disabled the input and send an ajax request. When the request returned, I enabled the input once again (possibly displaying an error if the ajax failed and etc, depends on your needs).
Its the easiest way to do interactive form. This avoids the headache of multiple request trying to modify the same value on server side and the headache of monitoring all ajax requests.
How can I fix the script below so that it will work EVERY TIME! Sometimes it works and sometimes it doesn't. Pro JQuery explains what causes this, but it doesn't talk about how to fix it. I am almost positive it has to do with the ajax ready state but I have no clue how to write it. The web shows about 99 different ways to write ajax and JQuery, its a bit overwhelming.
My goal is to create an HTML shell that can be filled with text from server based text files. For example: Let's say there is a text file on the server named AG and its contents is PF: PF-01, PF-02, PF-03, etc.. I want to pull this information and populate the HTML DOM before it is seen by the user. A was ##!#$*& golden with PHP, then found out my host has fopen() shut off. So here I am.
Thanks for you help.
JS - plantSeed.js
var pageExecute = {
fileContents:"Null",
pagePrefix:"Null",
slides:"Null",
init:function () {
$.ajax({
url: "./seeds/Ag.txt",
success: function (data){
pageExecute.fileContents = data;
}
});
}
};
HTML - HEAD
<script type="text/javascript">
pageExecute.init();
</script>
HTML - BODY
<script type="text/javascript"> alert(pageExecute.fileContents); </script>
Try this:
var pageExecute = {
fileContents:"Null",
pagePrefix:"Null",
slides:"Null",
init: function () {
$.ajax({
url: "./seeds/Ag.txt",
async: false,
success: function (data){
pageExecute.fileContents = data;
}
});
}
};
Try this:
HTML:
<div id="target"></div>
JavaScript:
$(function(){
$( "#target" ).load( "pathToYourFile" );
});
In my example, the div will be filled with the file contents. Take a look at jQuery .load() function.
The "pathToYourFile" cand be any resource that contains the data you want to be loaded. Take a look at the load method documentation for more information about how to use it.
Edit: Other examples to get the value to be manipulated
Using $.get() function:
$(function(){
$.get( "pathToYourFile", function( data ) {
var resourceContent = data; // can be a global variable too...
// process the content...
});
});
Using $.ajax() function:
$(function(){
$.ajax({
url: "pathToYourFile",
async: false, // asynchronous request? (synchronous requests are discouraged...)
cache: false, // with this, you can force the browser to not make cache of the retrieved data
dataType: "text", // jQuery will infer this, but you can set explicitly
success: function( data, textStatus, jqXHR ) {
var resourceContent = data; // can be a global variable too...
// process the content...
}
});
});
It is important to note that:
$(function(){
// code...
});
Is the same as:
$(document).ready(function(){
// code
});
And normally you need to use this syntax, since you would want that the DOM is ready to execute your JavaScript code.
Here's your issue:
You've got a script tag in the body, which is asking for the AJAX data.
Even if you were asking it to write the data to your shell, and not just spout it...
...that's your #1 issue.
Here's why:
AJAX is asynchronous.
Okay, we know that already, but what does that mean?
Well, it means that it's going to go to the server and ask for the file.
The server is going to go looking, and send it back. Then your computer is going to download the contents. When the contents are 100% downloaded, they'll be available to use.
...thing is...
Your program isn't waiting for that to happen.
It's telling the server to take its time, and in the meantime it's going to keep doing what it's doing, and it's not going to think about the contents again, until it gets a call from the server.
Well, browsers are really freakin' fast when it comes to rendering HTML.
Servers are really freakin' fast at serving static (plain-text/img/css/js) files, too.
So now you're in a race.
Which will happen first?
Will the server call back with the text, or will the browser hit the script tag that asks for the file contents?
Whichever one wins on that refresh is the one that will happen.
So how do you get around that?
Callbacks.
Callbacks are a different way of thinking.
In JavaScript, you perform a callback by giving the AJAX call a function to use, when the download is complete.
It'd be like calling somebody from a work-line, and saying: dial THIS extension to reach me, when you have an answer for me.
In jQuery, you'll use a parameter called "success" in the AJAX call.
Make success : function (data) { doSomething(data); } a part of that object that you're passing into the AJAX call.
When the file downloads, as soon as it downloads, jQuery will pass the results into the success function you gave it, which will do whatever it's made to do, or call whatever functions it was made to call.
Give it a try. It sure beats racing to see which downloads first.
I recommend not to use url: "./seeds/Ag.txt",, to target a file directly. Instead, use a server side script llike PHP to open the file and return the data, either in plane format or in JSON format.
You may find a tutorial to open files here: http://www.tizag.com/phpT/fileread.php
.ajax() can send a post request and get data in return where as .load() can get any element in the rendered page. How to create a form when submitted(asynchromously) instead of getting back some data should get the page element of the rendered page that would be generated had there been normal submission instead of ajax submission?
I dont want to write views(Django) for xhr, normal requests separately. So, When I submit a form by ajax I dont want to hijack default action but only want to get some element of the rendered post submission page instead of actually being redirected to that post submission page which would have happened hadn't it been an xhr request.
Update:
load will do a POST rather than a GET if you supply the data to send as an object rather than a string. From the docs:
Request Method
The POST method is used if data is provided as an object; otherwise, GET is assumed.
So:
$("#target").load("/path/to/resource selector_for_relevant_elements", {});
..should convert the load from GET to POST. Of course, you'd replace {} with the arguments you want to send.
Original answer:
You can do the POST directly with ajax and then process the returned HTML yourself. For instance, to turn this load:
$("#target").load("/path/to/resource selector_for_relevant_elements");
..into a POST:
$.ajax({
url: "/path/to/resource",
method: "POST",
dataType: "html",
success: function(html) {
// Build the elemnts of the result in a disconnected document
var page = $("<div>").append(html); // See note below
// Find the relevant elements and put them in target
$("#target").html(page.find("selector_for_relevant_elements"));
}
});
I've done the wrapper div because that's what jQuery's load function does. You may want to look at the source for load (that line number will rot, of course, but the filename is unlikely to change) to see if there are other tricks you need to replicate.