I'm looking for making a signup form with modals, the plan is when somebody enters the site web, there write her or his name and a password, after with a function get the data with ajax, and insert the dates in the DB but my question here is after that what I should do for put to the user the next modal with the next questions?
When ajax is send, prepare html at server side and send html In response. Once you get html append it in div and then close existing modal and show newly added modal which come on ajax response and appended on div
Related
I'm using ajax to create list of replies.
In the end of the list I added textarea form that allow user to add reply (also with ajax).
The problem is that i call to my JS in my main PHP page so when user want to submit reply the page doesn't "know" the js code. If i add the js to the ajax php file/page the code will work but then it will be duplicated many times and when user will submit form the text will be submitted many times...
In my console i see that the JS file duplicate every time i load the replies list
How can i prevent it?
Disable the submit button right after user presses it once. Using jQuery:
$("#button").attr('disabled','disabled');
Make sure to remove disabled attribute on AJAX error so user can re-submit the form with new data. You can remove disabled attribute like this:
$('#button').removeAttr('disabled');
[improved]
if you want to not repeat data when navigation or F5 press, simply free the $_POST vars after doing whatever you want, and check if isnt set (before clean, of course) redirect you wherever you want. example:
/* HERE do the job with ajax response. */
if(!isset($_post['foo'])) header('Location: wherever.php');
$_POST['foo']=NULL;
If you're using $_GET... don't do it, use $_POST... $_POST is your friend.
Finaly ensure that if you press F5, you don't re-send form vars by post (otherwise you will get the same). If it's happening, clear your inputs with jQuery on page load.
$('#inputID').val('');
I have a contact form on contactpage1.php (department, name, email, message). When it is submitted the form 'action' is contactpage2.php which validates the data and either return error messages or emails the message.
Rather than having to go to contactpage2.php, I would prefer to keep everything on one page and have contactpage2.php open in a modal.
How would I do that?
So far, I've seen lots of example of clicking a button to open a modal with the contact form but that's not what I am after. Can I do it as described above?
I'm using Bootstrap modals elsewhere on the site.
Answer taken from a comment by Shehary
Here are the steps according to your question
you have form on contactpage1.php.
Submit it with Ajax.
show modal in Ajax success function with $('#selector').modal('show');
You can also bind the element in modal to show the message in modal,
so what you need is the Ajax Method and all other steps can be taken
care inside Ajax call.
I am using Twitter Bootstrap's modal control to create a popup form where a user can enter some input.
How do I go about getting the information from the form? In the past when I am just using a form on a page, I have used the post variable to get user input - but would that apply in this case?
Use AJAX, that way you can submit the form, get a response and then decide whether or not to close the modal window.
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.
Basically I have a bunch of data I get from a database and put onto my page in a table. Right now I have the user type in the name, session, etc. in the table and that is sent as post data into the next PHP page, which I then use to lookup more stuff in the DB and so on and so forth.
Obviously that's not a great user experience; it would be much easier to simply CLICK the item in the table and everything gets sent automatically into the next page.
I'm not sure how I'd go about doing this.
My tables are first and last names for now, so if you click a certain row it should go to the next page sending each cell as data.
EDIT: Some examples:
Traditionally you do this with a form
<form method="post" action="pageDataIsGoingTo.php">
to send data to the next page. However, I don't want to do this with a form; but rather when they click a URL and/or button that sends the data. I can "hide" the data from view I suppose, but I still don't know the function to actually go ahead and do that.
Would I make a javascript button/function that sets something in an invisible form?
You can use invisible/hidden form fields.
That might be your best guess.
Javascript would be a good solution if you wanted an ajax POST call, but you want to load other page.
So hidden form fields are your solution.
Parallel with table data.
You need to embed hidden fields and your visible item row within a form
(so each item row contains also a form & hidden form fields and visible submit button,
which you can style with css)
This presuming that your table contains more items which you can choose to send.
Although I would do this with backbone & jquery and do it all in ajax.