Submit Form with AJAX - php

I would like to submit a very simple form with an XMLHttpRequest. (I don't want to bother with jQuery). All this form does is insert a full name, a username, and a password into our db. I would like for the row to be inserted into the db without refreshing the page, and have the php file send a message back on whether it inserted the row or not. I have experience with creating a live search with AJAX, but have limited experience with submitting forms.
Code samples of an ajax call, along with a sample form would be greatly appreciated.

There seems to be a good example of this here: http://www.captain.at/howto-ajax-form-post-get.php

Related

format and resend form data from PHP script as if it came from an HTML form

Is there a way that I can have a form that submits (via POST) a form element to a PHP script on my server... then have the PHP script re-encode the data and send to another server, as if it came from an HTML form?
I basically need to intercept one of my forms that users will use, so that I can record data (which are lists, nothing confidential or personal information) that the user selects in the first form, then it will be processed by my PHP script, but then I want it to be re-encoded as if it was coming directly from the original HTML form (as I have to submit some hidden fields to the final destination server after my PHP script works with the POSTed form data.
How can this be done? and if someone could give a simple example, I'd appreciate it. Thanks

dynamically filled forms with Jquery & Ajax

I have a bit of a problem achieving what I'm trying to do.
I'm doing a mailbox like page and I'd like to add a "Respond" button which will fill a form with some values.
I'm generating my page message by message in php. For each message I generate an input button with its own id and when I click on the button, I'd like to open a form in a new window, with the recipient and title prefilled and not changeable by the user, with another textarea that the user can fill with his message.
For that, I have a general template for a form containing 3 values (recipient, title and message). All are (for the moment) text or textarea values.
Is it possible to use one form to send a message to anyone, or do I have to generate a form for each message with pre filled values ? The last solution seems quite horrible to do.
I tried to find something that I could do with only javascript, since I want the form to be submitted asynchronously by Ajax.
I can make an onClick event and pass the values to that function, but in that case I won't have the values of the textarea the user will have entered.
Is there a way to do, for example, an entire form in Javascript with the values I'll pass through the onClick event, get the value of the textarea from the form that would have been populated with these values, and then send everything through Ajax ?
Well, here is what I did.
For each Respond button generated, I set an onClick event passing the fields I wanted to be pre-filled in my form to a JS function RespondMessage()
I also made a form at the bottom of my page that I hid with css.
This form contains as much hidden fields as I want pre-filled datas, and as much spans as I want to show infos.
When I call the RespondMessage function, I manually set the hidden fields in my form with the arguments I called the function with.
After that I fill my spans with the infos I want to show (for example, I set the recipient's name for my message like that).
Once all of that is done, your form is ready to be displayed. So after setting the fields in the form, I just pass the form from display:none to display:block, and do a lot of css tricks to make that smooth and beautiful.
So now you have your pre-filled form, you just need another function that will make an Ajax call to avoid reloading the page after each response, and you'll call it with the onClick event of your form's submission button.
I hope that this process will help someone.
I'm not quite sure that it's the best way to do it and I find it quite dirty and exploitable so you need a bit more server side checking than usual, but it does the job.
I don't provide code because it's mostly all really specific to the application you're setting up.

Preserve form data when using history.go(-1)

I have
insert.php
verify.php
in Insert.php I have a form with some fields and some other fields which are generated by ajax calls based on selections. I also have an image uploader where the image is uploaded to the server as soon as the user chooses the image. The preview of the image is then showed when upload is done. When the form is submitted, it sends form.serialize to verify.php.
In verify.php the user sees and verifies the data from insert.php form.
If user thinks that everything is correct then he can submit it. or click on the "Edit" button to go back. When going back some of the info are not available. fields that are generated through ajax are not available.
Anyway to fix it ?
I add element to insert.php using
$('#subcategoryPlaceHolder').html(result);
I'm not sure I understand your app completely, but when working with data like this it's generally a bad idea to go use the back function in the browser.
A better solution would be to save the data that needs to be remembered into the session, and when a user clicks Edit it reloads the form using the data stored in the session, without submitting the form. When a user thinks everything is correct they can submit the form, saving the data, and then you can delete the session data.
I ended up using two divs.
#editDiv and #verifyDiv
using jquery I hid the one I didnt need and the form data was there all the time.

How do I create a form without refreshing the page at the same time the data goes into a mysql data base?

Ok, I know there have been a few questions posted on this but a lot of the information are dotted around and not necessarily connected in one form that I need for my site.
Basically I want to create the style/functionality of the twitter form on their home page.
Where inside the input fields are the labels, and when you click on the input the fields the labels don NOT disappear but fade into a different colour. Its only when you type, is when it disappears.
If they don't type and press submit I want the verification signs come up ( I know how to do this but it seems to be conflicting when I put the jQuery code in)
When all fields are inputted I would like the form to fade and represent a thank you message whilst
the data gets placed into a mysql ( specifically a MAMP/PHP My Admin) database.
Very similar to this form on hbuddy.com
Would massively appreciate if this was responded in a step by step format, simply because i am at the beginning stages of learning pretty complex programming language.
Thanks!
you can try jquery ajax for form submission..
These links will help you for getting started..
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html
http://www.ryancoughlin.com/2008/11/04/use-jquery-to-submit-form/

view data from html form before submitting

i am really stuck here i have been trying and i am posting here hope some one will help me.
i have a html form where i enter my data and before submitting i need to view my data in the html form and if i need changes change it rt there and submit .
i am able to enter data and how do i display the data without submitting.
To preview your form data before posting you have two options basically: the first is to preview it by using JavaScript to dynamically open a new window and then show your data formatted as you want, the second is to post your data to your server and return a new page containing the data you posted but not yet being integrate to your database, this is a kind of confirmation page, whatever is the option there should be a confirmation button to accept or reject the submission and integration of the data in your database.
The second option requires you to create a new page on the server side for confirmation (preview), having all the power of your web server language.
In general, you have a Preview button and a Save (or Post) one.
The Preview button submits the data which is processed by the server-side script (interpreting markup language, or filtering HTML or other stuff) and converted to HTML, then sent back to the user along with the text field with the raw data.
Then the Save/Post button does the same, but saves the data to the database, and similarly output the HTML, without the text field.
A quite generic answer to a quite generic question...
The question that comes to my mind is how this preview would look different from the data entry page. I mean, if the user is supposed to enter, say, name, address, and favorite color, presumably that data is visible on the screen as they type it. What would a preview do? If you're talking about some sort of validation, like color must be on your list of approved colors or some such, then you have two basic choices: You could do the vaildation with JavaScript before sending to the server, or you could send to the server and let it do validation. I would point out that if you do client-side validation, you really should still validate on the server, esecially if there are security or hacking issues. You have no assurance that the data stream sent to your server really came from the page that you sent to the user. The user could create his own page to send data to your server.
The only other thing I can think of is a formatting preview, like here on Stack Overflow where what you type in may include codes that control format. In that case you might want to use Javascript to give immediate feedback, again, like is done here.
perhaps you can have two buttons one as a preview and one as submit so when u preview it sends the form value in a different page and displays it in a format you want.
The submit button will just do the submitting etc. what u plan to do .
hope that helps

Categories