I will try to explain the situation as it is a little bit more complicated.
I have created a multiple picture upload form. It works like this:
In the form there are 2 submit buttons. 1 normal HTML submit button and another one is generated by jQuery. It is a "Browse" button which allows you to browse pictures on your HDD and add them to a collection. This is all happening without you actually submitting the form. Pictures are saved via ajax to a temporary table. I am using this plugin for this: http://www.uploadify.com/
I use jQuery to fetch the temporary pictures and display them above the normal submit button so users can see a complete set of pictures they are going to upload before actually submitting the form.
The way I do it is that I have a page which displays temporary pictures and I am useing jQuery get() method to fetch this page and display it in the form.
Now the important part, under every temporary picture there is a text input field so users can enter titles for all pictures they are going to submit.
However, when users hit the form submit button, the text input fields are not submitted because they are just fetched with ajax from a different page.
How can I get to these text fields?
EDIT:
Inside the form I have an empty div:
<div id="temporaryPhotos"></div>
And this is where I am putting all pictures (img tags) and text fields generated with jQuery (which are from a different page on the same website);
If the form's HTML isn't borked, this should work. One solution though is to create a hidden input field in your original form, collect all generated text input fields's values in an array, and put that array in the hidden input field on submit.
Check out serializing with JSON for more info on this.
If your form tag is before the body tag it will not post,
It needs to be:
<html>
<body>
<form>
...my dynamic form content...
</form>
</body>
</html>
Related
I have a form our guests use to submit a post to a very simple 'message board'.
Now we want to allow the users to upload 1-10 files, but the concern or requirement is to do this outside of the MAIN form submit.
MAIN FORM consists of:
input field 1
input field 2
text area 1
Submit button
I currently have it so there is an initial browse button.. ( below the text are and to the left of the main submit button) and once a file is picked.. and display a link for the user to add another 'browse' field..
What I would like to do is have an UPLOAD button below all these dynamically created browse/file upload fields... that will send all the file data to an external .php script to upload the files in question, and then just return the file path/name back to the main form (maybe in hidden fields? I dont care).. so that these file path/name string values are submitted when the MAIN FORM is submitted..
hope that make sense.
Is this possible? And if so how do I go about this? The concern is to handle the asset uploading/file handling outside of the main form submission so the users details are not lost if something goes wrong with the file upload portion of things.
You can do this with JQuery and Ajax. There are various plugins are available for this. You can try this - http://plugins.jquery.com/uploadfile/
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.
I'm just trying to understand the submit button within php.
I know that it performs that action stated within the form tag. So basically what I have is an form tag that only defines it's ID, i.e. no method attribute nor action. And within this form is a submit button. This input element only defines the type as submit, i.e. no name attribute nor id nor value.
Quickly describing the file: It has two input text elements which are required and a submit button. When i view this file in chrome, and i've clicked the submit button, a pop up shows below the required fields which i have not entered text in stating "required field".
I love this function however, it doesn't check for spaces, i.e. " ".
So back to my question, could someone possibly tell me what the submit button actually does or possibly what methods does it call when i click on it even though the form it is in has no action defined.
When the button is clicked, the browser detects this and submits the form back to the server. This has nothing to do with PHP, it's simply the browser implementing what the HTML specification stipulates.
Since your form does not have an action attribute, what happens is that the browser gathers the values of all eligible input controls in the form, turns that into a query string and makes an HTTP GET request to the current URL using that query string. The HTML5 spec covers this in detail.
The submit button offers one possible interface for the submission of the form. It's like the send button for a text message. While there are alternatives to submit the form, the submit button is the HTML option.
When a form's action is empty, the form submits the GET data to the page that form is on. (Basically, it reloads itself, with the new form data attached.) So you could write your PHP code at the top of the same page to manipulate the data.
In your PHP code at the top of the page, you can test whether or not your form sent data in those two required fields. If one or both are empty, you can echo a message to the user telling them the fields are required.
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.
I have a page with two forms that is generated with PHP.
The first part contains text boxes, a submit button and a clear button.
The second form is just a button called "Add more text boxes" so the user can add more to his form if he needs to.
The problem is when I click the "Add more rows" which loads another page which changes a value.
This value then affects the original page when it reloads causing more text boxes to get created.
The problem is that I lose all the data that was entered.
Is there any way to preserve the data when the user clicks "Add more rows"?.
Here's a screenshot of my page.
Thanks
If you want to do it without js than you put all in one form. When you click button to add row all entered data will be available in $_POST or $_GET so you can fill form with existing data and add a row when generating new page.
Ideally you should use javascript to dynamically add new rows w/out making new requests to the server and loading new pages. But if you want to keep it javascript free. If it's all the same php script just controlled by conditions, just use the $_POST['variable'] values as the value="$_POST['variable']" in your fields. If it's handled through multiple scripts, you can use a session variable to pass the data from one page to the next.