- Super useful bits of PHP, Form and JavaScript code
- Send variables between Javascript, Form and PHP on the same page:
- PHP variable to Javascript variable:
- Form variable to Javascript variable:
- PHP variable to Form variable:
- Javascript variable to Form variable:
- Javascript variable to PHP variable:
- Form variable to PHP variable:
- Allow sending different variables via the URL string to the new page (readable through PHP or Javascript).
- INSIDE «page1.php» or «page1.html»
- INSIDE «page2c.php»
- Maintain a session by sending PHP variables (including multiple full blown multi-dimensional arrays if you so wish) to a page with PHP in.
- INSIDE «page1.php»
- INSIDE «page2.php»
- Allow sending hidden form variables to a PHP page. This allows the user to select options on the page, and for these to be carried across to the new page.
- INSIDE «page1.php» or «page1.html»
- INSIDE «page2.php»
- Allow sending hidden form variables (using tick boxes) to a PHP page. This allows the user to select options on the page, and for these to be carried across to the new page.
- INSIDE «page1.html»
- INSIDE «page1.html»
- INSIDE «page2b.php»
- Allow different bits of HTML to dynamically execute according to which radio button is pressed
- Allow different bits of HTML to dynamically execute according to which dropdown menu is selected
- Add/remove bits of HTML according to multiple checkboxes
- Test your PHP pages offline easily, without installing your own web server.
- Form Submission Using Ajax, PHP and Javascript
- Related Posts:
- 29 Replies to “Form Submission Using Ajax, PHP and Javascript”
Super useful bits of PHP, Form and JavaScript code
All code on this page is considered by us to contain the most basic and important aspects of form sending. This page basically shows in the shortest possible way how you can:
* URL variables to PHP/JavaScript page — Allow sending different variables via the URL string to the new page (readable through PHP or Javascript). This is more appropriate than the below if there are few pieces of small info you wish to send.
* PHP variables to PHP page — Alternatively, maintain a session by sending PHP variables to another page with PHP in (allows super large arrays).
* Form variables to PHP page — Alternatively, allow sending hidden form variables to a PHP page. This allows the user to (more easily than the above methods) select options on the page (via URL, radio buttons, or dropdown menu), and for these to be sent to the new page.
* Form variables (tick boxes) to PHP page — As above but with tick boxes.
Send variables between Javascript, Form and PHP on the same page:
PHP variable to Javascript variable:
Form variable to Javascript variable:
PHP variable to Form variable:
Javascript variable to Form variable:
Javascript variable to PHP variable:
This is impossible (unless you reload the page, or call another page), since all PHP code is rendered first (on the server side), and then Javascript is dealt with afterwards (on the client side).
Form variable to PHP variable:
Without refreshing, this is impossible like above for similar reasons. If you don’t mind a refresh, then either a page reload or calling another web page would work if you used something like $_POST[‘FormVar’]; in the php file.
Allow sending different variables via the URL string to the new page (readable through PHP or Javascript).
INSIDE «page1.php» or «page1.html»
INSIDE «page2c.php»
// Retrieve the URL variables (using PHP). $num = $_GET['myNumber']; $fruit = $_GET['myFruit']; echo "Number: ".$num." Fruit: ".$fruit; ?>
Maintain a session by sending PHP variables (including multiple full blown multi-dimensional arrays if you so wish) to a page with PHP in.
INSIDE «page1.php»
// "session_register()" and "session_start();" both prepare the session ready for use, and "$myPHPvar=5" // is the variable we want to carry over to the new page. Just before we visit the new page, we need to // store the variable in PHP's special session area by using "$_SESSION['myPHPvar'] = $myPHPvar;" session_register(); session_start(); $myPHPvar=5; $_SESSION['myPHPvar'] = $myPHPvar; ?> Click this link, and the "$myPHPvar" variable should carry through.
INSIDE «page2.php»
// Retrieve the PHP variable (using PHP). session_start(); $myPHPvar = $_SESSION['myPHPvar']; echo "myPHPvar: ".$myPHPvar." . (should say \"myPHPvar: 5\")
"; ?>
Allow sending hidden form variables to a PHP page. This allows the user to select options on the page, and for these to be carried across to the new page.
INSIDE «page1.php» or «page1.html»
Click 1st
Click 2nd
Click 3rd
Click 1st
Click 2nd
Click 3rd
Also notice how the destination page is given here, rather than in anything above —>
INSIDE «page2.php»
// Retrieve the hidden form variable (using PHP). $myvar = $_POST['formVar']; echo "myvar: ".$myvar; ?>
Allow sending hidden form variables (using tick boxes) to a PHP page. This allows the user to select options on the page, and for these to be carried across to the new page.
INSIDE «page1.html»
INSIDE «page1.html»
INSIDE «page2b.php»
"; echo "myvarB: ".$myvarB."
"; echo "myvarC: ".$myvarC; ?>
Allow different bits of HTML to dynamically execute according to which radio button is pressed
This is useful for many purposes including using buttons to change the picture (as part of a gallery), or for different sub forms to appear accordingly.
Click 1st
Click 2nd
Click 3rd
Anything can go here . like an image.
. or a link. . [I am the footer]
Allow different bits of HTML to dynamically execute according to which dropdown menu is selected
Anything can go here . like an image.
. or a link. . [I am the footer]
Add/remove bits of HTML according to multiple checkboxes
EXAMPLE: Anything can go here . like an image. . or a link
Test your PHP pages offline easily, without installing your own web server.
This was something recently that doubled my productivity in a snap. Simply use EasyPHP. It’s only 8 megabyte, and a million times quicker and simpler to install/configure than a fully blown Apache (or equivalent) server. In fact, it’s small GUI window will make it instant — just make sure you put PHP pages inside its special www folder, and point your browser to the «http://127.0.0.1/mywebpage.php».
Apart from this amazing time saver, always «View source» to see what PHP outputs to the HTML/Javascript page (remember, PHP is read by the server, but is not potentially visible to the visitor in the same way that Javascript or HTML is).
The last amazing tip is to insert «exit();» when an annoying bug creeps into the code to see where the code goes wrong (try «exit()» at different points throughout the code).
Feedback is welcome, whether it’s a chat, improvement I can make, or just a quick thanks.
If the info on this site has been of sufficient interest, a small contribution would be appreciated:
Form Submission Using Ajax, PHP and Javascript
AJAX (Asynchronous JavaScript and XML) is the art of exchanging data with a server, and updating parts of a web page – without reloading the whole page.
Our earlier blog post already explained about form submission without page refresh, but it was done by using ajax, PHP and jQuery.
Now you will learn same functionality using ajax, PHP and Javascript through this blog post . Just follow our post or download it to use.
For this you must have a database in MY-SQL . Here, we have database named “mydba” which consists of table named “form_element” with 5 fields.
next we create a php page named “ajaxsubmit.php” where following steps were performed:
- We first establish connection with server .
- Selects database.
- Executes query.
- Closing connection with server.
HTML File: ajaxjs.html
Submit Form Using AJAX,PHP and javascript
Fill Your Information!
PHP File: ajaxjs.php
mysql_close($connection); // Connection Closed ?>
JAVASCRIPT File: script.js
javascript file consist of ajax functionality.
function myFunction() < var name = document.getElementById("name").value; var email = document.getElementById("email").value; var password = document.getElementById("password").value; var contact = document.getElementById("contact").value; // Returns successful data submission message when the entered information is stored in database. var dataString = 'name1=' + name + '&email1=' + email + '&password1=' + password + '&contact1=' + contact; if (name == '' || email == '' || password == '' || contact == '') < alert("Please Fill All Fields"); >else < // AJAX code to submit form. $.ajax(< type: "POST", url: "ajaxjs.php", data: dataString, cache: false, success: function(html) < alert(html); >>); > return false; >
MY-SQL Code Segment:
Here is the My-SQL code for creating database and table.
CREATE DATABASE mydba; CREATE TABLE form_element( student_id int(10) NOT NULL AUTO_INCREMENT, student_name varchar(255) NOT NULL, student_email varchar(255) NOT NULL, student_contact varchar(255) NOT NULL, student_address varchar(255) NOT NULL, PRIMARY KEY (student_id) );
CSS File: style.css
@import url(http://fonts.googleapis.com/css?family=Fauna+One|Muli); /*//to load google fonts in our page.*/ #form < background-color:white; color:#123456; box-shadow:0px 1px 1px 1px gray; font-Weight:400; width:350px; margin:50px 250px 0 50px; float:left; height:500px; >#form div < padding:10px 0 0 30px; >h3 < margin-top:0px; color:white; background-color:forestgreen; text-align:center; width:100%; height:50px; padding-top:30px; >#mainform < width:960px; margin:20px auto; padding-top:20px; font-family: 'Fauna One', serif; >#mainform h2 < width:100%; float:left; >input < width:90%; height:30px; margin-top:10px; border-radius:3px; padding:2px; box-shadow:0px 1px 1px 0px darkgray; >.innerdiv < width:65%; float:left; >input[type=button] < background-color:forestgreen; border:1px solid white; font-family: 'Fauna One', serif; font-Weight:bold; font-size:18px; color:white; >#clear /*CSS for right side advertizement*/ #formget
We showed you Ajax implementation with PHP and javascript, Keep following us to learn more.
You may also like to read:
Related Posts:
29 Replies to “Form Submission Using Ajax, PHP and Javascript”
Nice tutorial, I tried but had no success, thought ajaxjs.php on $db had to be “company”, but no matter what I’ll do… not a single tutorial makes Insert on my database 🙁
Hello Jayesh, Pleased with your response…! Keep reading our blog posts for getting more coding tricks…
Hello Gokul, That sounds really great ! Keep reading our other blog posts for getting more coding tricks. Regards,
FormGet Team
Please forgive a stupid newbie question. My office organization cannot afford a full time developer and I’m more of a database guy but I’ve been tasked to upgrade a primitive Access database to a real web-based application so users can have a more familiar and efficient experience. So I am learning html, php, javascript. ajax, etc “on the fly” and all “by the seat of my pants”. Without sites like this I’d totally lost. So I’m very grateful for the generosity of you guys for allowing free access to these tutorials. I am on a closed network and cannot access the ajax.googleapis.com link at the top of the html file. So my question is do I have to include that link for the the ajax script to work? If it’s required can I download the file directly from the jquery website then transfer to my closed network and just have the file refer to it by using whatever directory pathway I have on my server….for example under the title tax something like …..does it matter what I name the jquery file as long as it’s consistent and has the .js extension? Thank you guys so much for this tutorial and for considering a poor newbie’s question.
Hello Jay, Thank you so much for your wonderful words. As per your question you can download the file and save it into the same the folder where the rest files are there and call the file using in ajaxjs.html page under head section.
I am also attaching the file here for you, download it from here if you wish. Regards,
FormGet Team.
Guys: Thanks for getting back to me so quickly. Yesterday i googled jquery 1.11.1 and went to their website to get a copy. When I clicked on the link the whole jquery code appeared as code in my browser. I was expecting it to download as a file. Not knowing what to do next I clicked File/Save in my browser’s menu bar and in the dialog box it was pre-named jquery-1.11.1.js so I just saved it using the pre-designated name. I am assuming I can use the script code you supplied above, except change the name of the file in the link from ajax.js to jquery-1.11.1.js so it will reference the file I downloaded from the jquery site directly? Again thank you guys so much for your help!
Hello, I am new to javascript. I tried this ajax code and its working fine. But not in Internet Explorer. Please help me out. Thank you.
Something heppening with my submit button I can make it work.
My div form is inside another page and i call with require
this is not the matter that you are calling function on button or div … its work on class and id so pass a id or class with div and call the ajax function
form should be submitted without clicking anywhere in form page. It should be submitted only by any event call…….
That’s not Javascript, that’s a mix between JavaScript and JQuery. JavaScript implementation is completed with the use of the ‘XMLHttpRequest’ object.