Combining PHP hosted on a web server and jQuery to submit a form using a POST function?

Question

I've created a PHP function which is hosted on a web server. The code here is designed to allow the user to create a user account which requires their forename, surname, email and password. I can use Apigee to submit the data, so I know that everything works. A snapshot of my code is below:

function student2_post() {
    $this->load->database();
    $StudentID = $_POST['StudentID'];
    $StudentForename = $_POST['StudentForename'];
    $StudentSurname = $_POST['StudentSurname'];
    $StudentEmail = $_POST['StudentEmail'];
    $StudentPassword = $_POST['StudentPassword'];
    $info = array('StudentID'=>null, 'StudentForename'=>$StudentForename, 'StudentSurname'=>$StudentSurname, 'StudentEmail'=>$StudentEmail, 'StudentPassword'=>$StudentPassword);
    $this->db->insert('StudentLogin', $info);
    $data->StudentID = $StudentID;
    $data->StudentForename = $StudentForename;
    $data->StudentSurname = $StudentSurname;
    $data->StudentEmail = $StudentEmail;
    $data->StudentPassword = $StudentPassword;
    $this->response($data, 200);
    }

My next step of development is to try and develop an "app" or a mobile service which allows me to use my own GUI. My code for this is below:

<!-- Home -->
<div id="page2" class="ui-bar-a" data-role="page">
    <div data-role="header" data-theme="320CT_Coursework.min">
        <h3>
            320CT
        </h3>
    </div>


    <div data-role="content">


    <div data-role="fieldcontain" id="StudentID">
            <fieldset data-role="controlgroup">
                <label for="StudentID">
                    Name
                </label>

                <input name="" id="StudentID" placeholder="" value="" type="text">
            </fieldset>
        </div>


        <div data-role="fieldcontain" id="StudentForename">
            <fieldset data-role="controlgroup">
                <label for="StudentForename">
                    Surname
                </label>
                <input name="" id="StudentForename" placeholder="" value="" type="text">
            </fieldset>
        </div>


        <div data-role="fieldcontain" id="StudentSurname">
            <fieldset data-role="controlgroup">
                <label for="StudentSurname">
                    Email
                </label>

                <input name="" id="StudentSurname" placeholder="" value="" type="text">
            </fieldset>
        </div>


        <div data-role="fieldcontain" id="StudentPassword">
            <fieldset data-role="controlgroup">
                <label for="StudentPassword">
                    Password
                </label>
                <input name="" id="StudentPassword" placeholder="" value="" type="text">
            </fieldset>
        </div>


        <input type="submit" value="Submit">


    </div>
    <div data-role="footer" data-theme="a" data-position="fixed">
        <h3>
        </h3>
    </div>
</div>

This works and brings up a GUI for me to enter data in, however obviously it doesn't link up. I've got all the form elements there I need, with IDs which is kosher to the PHP function.

I've been unable to find any resources which allow me to use the PHP function *student2_POST* in my jQuery code. Everything I find seems to be related to non-PHP functions.

TLDR: I have a function hosted on a web service which submits a form and I need a way to implement this function in jQuery. Thank you in advance for your help!

Jaffa · Accepted Answer · 2013-03-12 16:43:34Z

2

In order to communicate between client (html / js) and server (php), you need to execute an HTTP request.

This may tipycally be done using an HTML form, or dynamically using AJAX methods such as (for JQuery) :

$.ajax( url [, settings ] )

Perform an asynchronous HTTP (Ajax) request.
$.post( url \[, data \] \[, success(data, textStatus, jqXHR) \] \[, dataType \] )

Load data from the server using a HTTP POST request.

answered Mar 12, 2013 at 16:43

Jaffa

12.7k5 gold badges54 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jonny Bird Over a year ago

Thank you Geoffroy, I'm assuming that I'd have to use this example $.post("test.php", $("#testform").serialize()); Question 1: How would I give an ID to my form? Currently it's just on a page Question 2: How would I then connect up the POST to the submit button?

Jaffa Over a year ago

@JonnyBird And ID to your form? What for ? And add a onclick listener on your button to call the $.post method :)

Jonny Bird Over a year ago

Well the example has "#testform" which I assumed was some sort of ID? And I'm completely lost with the onclick listener..the examples there don't seem to link up with a button, just with text??

Jaffa Over a year ago

I think you should study html first, it will be better for you. Sorry but I can't do everything for you. You should know at least a bare minimum about HTML / DOM / Javascript and events before using JQuery and making HTML web pages.

Matt · Accepted Answer · 2013-03-12 16:40:49Z

0

You are looking for: $.ajax or $.post

answered Mar 12, 2013 at 16:40

Matt

5,4381 gold badge34 silver badges59 bronze badges

Collectives™ on Stack Overflow

Combining PHP hosted on a web server and jQuery to submit a form using a POST function?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related