3 Replies - 16006 Views - Last Post: 19 July 2012 - 11:38 PM

#1 CameronSon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 19-July 12

Submitting and processing form in jQuery with PHP?

Posted 19 July 2012 - 10:58 PM

Hi, all,

I am absolutely baffled by this one, and while I don't expect people to do my homework for me, I am definitely having trouble understanding how to do this! So, with that said, any help would be appreciated...

To start, I have an html form on my website that takes in registrations right now. I process this form with a PHP script. The only real important part of this code is one line:

<form name="create_account" action="https://www.x-aviation.com/catalog/create_account.php" method="post" onsubmit="return check_form(create_account);"><input type="hidden" name="action" value="process">


If you don't want to read further, I'll give you my straight up question...how do I get the above into jQuery form? I am currently re-doing the ENTIRE form in jQuery/HTML5! So far, I've been led to understand that ajax is the answer, but I am more or less getting very stuck on the onsubmit side of things. I do not care that the jquery forum goes away from its page, by the way...

Now, the longer side to all of this...a segment of the jQuery code in the last remaining steps looks like this:

$('#submit_third').click(function(){
        //update progress bar
        $('#progress_text').html('100% Complete');
        $('#progress').css('width','339px');

        //prepare the fourth step
        var fields = new Array(
            $('#username').val(),
            $('#password').val(),
            $('#email').val(),
            $('#firstname').val() + ' ' + $('#lastname').val(),
            $('#age').val(),
            $('#gender').val(),
            $('#country').val()                       
        );
        var tr = $('#fourth_step tr');
        tr.each(function(){
            //alert( fields[$(this).index()] )
            $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
        });
                
        //slide steps
        $('#third_step').slideUp();
        $('#fourth_step').slideDown();            
    });


    $('#submit_fourth').click(function(){
        //send information to server
        alert('Data sent');
    });


I would assume the real area to focus on will be the #submit_fourth function and getting it to process the information to the PHP file.

Thanks for ANY help here, guys/gals!

Is This A Good Question/Topic? 0
  • +

Replies To: Submitting and processing form in jQuery with PHP?

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,413
  • Joined: 08-June 10

Re: Submitting and processing form in jQuery with PHP?

Posted 19 July 2012 - 11:17 PM

View PostCameronSon, on 20 July 2012 - 07:58 AM, said:

how do I get the above into jQuery form? I am currently re-doing the ENTIRE form in jQuery/HTML5! So far, I've been led to understand that ajax is the answer, but I am more or less getting very stuck on the onsubmit side of things. I do not care that the jquery forum goes away from its page, by the way...

I have to admit that I am a bit unsure what you mean exactly (its partly due to the ambiguity of the language).

jQuery form - form as in HTML form element (<form>) or as in jQuery Form Plugin (and if, which plugin)?

what do you mean by re-doing it in jQuery/HTML5? normally you would do it in HTML5 or in jQuery (though that has the disadvantage of being useless with JS disabled) or enhance your HTML form code with jQuery.

AJAX itself does not have anything to do with forms or form submissions (except that it is used for that). AJAX is a means to modify the current page without doing a page (re-)load and issuing a HTTP request in the background. not more, not less.



View PostCameronSon, on 20 July 2012 - 07:58 AM, said:

I would assume the real area to focus on will be the #submit_fourth function and getting it to process the information to the PHP file.

in case you want to submit your form via jQuery, you have to collect the form data and pass it as object to the jQuery AJAX call (there are several jQuery form plugins that ease the work of data collection). the collected form data do somewhat resemble your fields array from the submit_third part (only that it needs to be an object because you need the key-value relation). and if you submit your form via AJAX, of course you have to disable the HTML form submit.
Was This Post Helpful? 0
  • +
  • -

#3 CameronSon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 19-July 12

Re: Submitting and processing form in jQuery with PHP?

Posted 19 July 2012 - 11:31 PM

Hi, Dormilich,

I apologize if I left some fog in what I was trying to achieve.

The data is being collected by jQuery. To make life simpler, I'll have you know I am using a customized version of this form:

http://webexpedition...ss3-and-jquery/

When it comes to passing the data onto PHP for the check (see if user already exists, etc) which is normally done in an html form like so:

<form name="create_account" action="https://www.example.com/process.php" method="post" onsubmit="return check_form(create_account);"><input type="hidden" name="action" value="process">


I am at a loss for how to achieve this.

I assume it should look somewhat like this, but even still some guidance would be MUCH appreciated!

$('#submit_fourth').submit(function(){
        $.ajax({
			type: "POST",
			url: "ajax.php",
			data: "fname="+ fname +"&amp; lname="+ lname,
        
        //send information to server
        alert('Data sent');
    });

This post has been edited by Dormilich: 19 July 2012 - 11:33 PM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,413
  • Joined: 08-June 10

Re: Submitting and processing form in jQuery with PHP?

Posted 19 July 2012 - 11:38 PM

View PostCameronSon, on 20 July 2012 - 08:31 AM, said:

I assume it should look somewhat like this, but even still some guidance would be MUCH appreciated!

$('#submit_fourth').submit(function(){
        $.ajax({
			type: "POST",
			url: "ajax.php",
			data: "fname="+ fname +"&amp; lname="+ lname,
        
        //send information to server
        alert('Data sent');
    });

almost ... but the data have to be in object form
$('#submit_fourth').submit(function(){
	$.ajax({
		type: "POST",
		url: "ajax.php",
		data: {
			fname: $('#firstname').val(), 
			lname: $('#lastname').val()
		},
        // ...
    });

jQuery owns quite an extensive documentation. you can find the jQuery AJAX docs here.

This post has been edited by Dormilich: 19 July 2012 - 11:41 PM

Was This Post Helpful? 2
  • +
  • -

Page 1 of 1