I have a form to submit details to database, after processing the POST on the action page i have another form to upload a photo very closely related to the info provided on the previous form, in fact the image path is stored on the same record in the database, instead of having two pages / two steps process, is it possible to have them both on the same form?
i know that nesting forms is not possible, at the same time uploading the file requires a form.
Using anchors and GET method is not acceptable in my application for the info is too sensitive to be revealed in URL
is there a way to workaround this?
thanks in advance
You could use
either session variables (to temporarily store the first step of the form)
or javascript to cycle through steps without refreshing the page
How about using 2 fieldsets?
<form action="?">
<fieldset>
//input fields
<input type="button" value="Next" id="btnNext">
</fieldset>
<fieldset>
//foto input field
<input type="button" value="Submit">
</fieldset>
</form>
Then in JS (with jQuery):
$("fieldset").eq(1).hide();
$("#btnNext").click(function(e){
e.preventDefault();
$("fieldset").eq(0).hide();
$("fieldset").eq(1).show();
});
Related
I'm a bit confused of do I need to prefix form input variables with i.e. ('car_', or 'bike_' corresponding to 'car_make', 'bike_make') or can I use same template for both forms without prefixing variables. And if so, do I still need to prefix the 'submit' field, or having different form name is enough to avoid data collision.
I have these two HTML forms on the same page:
<form action="" name="car_search_form" method="POST">
<input type="hidden" name="make" value="Audi" />
<input type="submit" name="car_do_search" value="Search Car" />
</form>
<form action="" name="bike_search_form" method="POST">
<input type="hidden" name="make" value="Schwinn" />
<input type="submit" name="bike_do_search" value="Search Bike" />
</form>
So, in the end I want to get correct value for $validCarMake via this code:
if(isset($_POST['car_do_search']))
{
$paramCarMake = isset($_POST['make']) ? sanitize_text_field($_POST['make']) : '';
$validCarMake = esc_sql($paramCarMake); // For SQL queries only
// TODO: Add data saving to database
}
Also, I want to understand the decision process of PHP engine. How it does deside which variable to choose - how it know on which button I clicked, and why not it does just submit all forms on the page? Also, if there would be any difference if I'd use "GET" method instead of "POST" besides that the one does put the variable values to URL? And how does the GET case it would process attached image to form submit then (as the maximum URL lenght is 255 chars as I know, and i.e. JPEG 100 kiB image contains thousands of chars. I'm asking this, because I also want to allow not just have that search on site's home page, but also allow to make search from a separate website's some kind of widget.
And the last question - if the HTML form processing differs somehow in PHP 7.X compared to PHP 5.X (i.e. PHP 5.4). I means does it caches somewhere the data, does it sends over the internet the attached images of the both forms and consumes network and server data, or it submit's only the data of the form on which I clicked the button.
As long as you keep the 2 input requests separate having the post arg "make" is completely fine. If you send the args in the same request the 2nd will override the first since it was last set.
As for how php decides on what is first it uses what is called order of precedence. This means what it comes to first it executes first unless explicitly told not to.
I want to understand the decision process of PHP engine. How it does decide which variable to choose - how it know on which button I clicked, and why not it does just submit all forms on the page?
When you click on a button, php will take the <button name="value"> value assigned in the name property of the input field or button clicked. This is how it can decide what's the form to submit. Consider that if you have two forms with the same name assigned to the submit button, the first one will override the second and php will only submit one form. This is because php execute operations with a logical order.
What is the difference between HTML <input type='button' /> and <input type='submit' />?
<input type="button" /> buttons will not submit a form - they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.
<input type="submit"> buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript.
The first submit button of the form is also the one being clicked for implicit submission, f.e. by pressing enter in a text input.
A 'button' is just that, a button, to which you can add additional functionality using Javascript. A 'submit' input type has the default functionality of submitting the form it's placed in (though, of course, you can still add additional functionality using Javascript).
It should be also mentioned that a named input of type="submit" will be also submitted together with the other form's named fields while a named input type="button" won't.
With other words, in the example below, the named input name=button1 WON'T get submitted while the named input name=submit1 WILL get submitted.
Sample HTML form (index.html):
<form action="checkout.php" method="POST">
<!-- this won't get submitted despite being named -->
<input type="button" name="button1" value="a button">
<!-- this one does; so the input's TYPE is important! -->
<input type="submit" name="submit1" value="a submit button">
</form>
The PHP script (checkout.php) that process the above form's action:
<?php var_dump($_POST); ?>
Test the above on your local machine by creating the two files in a folder named /tmp/test/ then running the built-in PHP web server from shell:
php -S localhost:3000 -t /tmp/test/
Open your browser at http://localhost:3000 and see for yourself.
One would wonder why would we need to submit a named button? It depends on the back-end script. For instance the WooCommerce WordPress plugin won't process a Checkout page posted unless the Place Order named button is submitted too. If you alter its type from submit to button then this button won't get submitted and thus the Checkout form would never get processed.
This is probably a small detail but you know, the devil is in the details.
IE 8 actually uses the first button it encounters submit or button. Instead of easily indicating which is desired by making it a input type=submit the order on the page is actually significant.
I use Firefox add-on called "Session Manager" to save and restore sessions. I have simple php + html form:
<form id="form_id" enctype="multipart/form-data" method="post" action="upload.php">
<input id="name$key" type="text" placeholder="Name" name="name[]" value="$name">
<input type="file" name="fileToUpload[]" id="fileToUpload$key">
<input id="submit" name="submit" type="submit" value="Submit">
</form>
When I restore form inputs data with "Session Manager" I can see all data I need. When I click the "Submit" button, data have empty $_POST.
What can I do to not lose this data?
Maybe to use some JQuery or session_start(); $_SESSION?
Firefox add-on "Session Manager" seems to work incorrect if html <form> setted with attribute enctype="multipart/form-data". If you want to send some files through POST use <form> attribute enctype="application/x-www-form-urlencoded" in conjunction with php copy(). That's not clean solution. Maybe there could be other solutions with enctype="multipart/form-data", maybe some expirements with form accept-charset could give you better results.
The Session Manager plugin in Firefox is not at all related to PHP sessions. Same word, entirely different meanings.
A Firefox session is your browser tabs and the websites they are accessing. A PHP session relates to a user session on a specific website.
Most likely the data you are seeing "saved" in the forms is just field data that is saved in Firefox only, for the sole purpose of making data re-entry faster. It is not yet actually "in" the form fields, but saved in Firefox (only, not on the website) in order to make easier the re-entry of frequently typed data.
When you lose a connection to a website, you lose the data typed in the fields. Refreshing the page loses the data typed in the fields. There is no work-around for this, it's just how it is.
If you have further questions, please ask in comments below this answer.
Edit:
Re-thinking, it may be possible to achieve some kind of solution using a javascript/jQuery (please, jQuery) solution that involves detected when fields are exited (blur()) and subsequent grabbing of the data and saving in localStorage.
References:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
http://www.w3schools.com/html/html5_webstorage.asp
When is localStorage cleared?
What is the max size of localStorage values?
I have developed a search form that searches a large SQL database using PHP and shows the results to the final user.
There is a GET request going on and then the URL looks like this:
http://localhost/search.php?value1=x&value2=y
Now, aside from showing the search results to the user, I want to show some options that they can
apply to the shown results.
For example, I will have an export to excel button on top of the results, as well as a delete button in order to
delete the results from the database. In my server, those 2 actions will be managed by 2 different files, say
deleteEntries.php and excelExport.php.
So, in my html I will have 2 forms, one pointing at deleteEntries.php and one pointing at excelExport.php.
The problem is that each form needs to have its own inputs type=hidden repeated.
The code
<input name="value1" value="x" type="hidden">
<input name="value2" value="y" type="hidden">
, which is dynamically generated through PHP, must be repeated for each form (how else can each server-side file know what the
user needs to export or to delete?). The code is dynamically generated because the search criteria and their values will differ
between searches.
Then, if the user chooses to delete the data, the URL will become
http://localhost/deleteEntries.php?value1=x&value2=y
In my specific occassion I have 3 forms and up to 11 values. So this means that I repeat 11 lines of HTML 3 times and I really don't
like that for many reasons.
One obvious solution would be a combobox where I let the user choose the action (e.g. export data, delete data, option 3)
and to manage all the actions with a single form and with a single server-side file by determining the selected action.
But I don't want to do this because it is less user-friendly and less developer-friendly.
Edit: The reason why I don't make a link for Export to excel like
Export to excel
is because in reality user is given more options that have to be selected from a form.
You can define the form action on a submit button as follows:
<form method="post">
<input name="value1" value="x" type="hidden">
<input name="value2" value="y" type="hidden">
<button type="submit" formaction="deleteEntries.php">Delete Entries</button>
<button type="submit" formaction="excelExport.php">Excel Export</button>
</form>
Each submitbutton will post to a different php script
This does not work in IE9 and earlier but I do not know if that is a problem
You could move the list of hidden inputs to a separate file and include that file in each form template.
Or you could have a list of your parameter names in an array in php. Then generate the hidden inputs from that. That way you can just have a single function call in each form to add in the hidden inputs. You can also loop over the same array in the form handler to read and validate the values received before they are used.
You can define onclick function to the buttons rather than sending the form and on the onclick function, you define 2 or more hidden hidden fields to the form you like which means you dont have declare those input on the page load but define it when the onclick function.
var y = document.createElement('value1');
document.form1.appendChild(y);
<form name = "form1" id = "form1" action = "deleteEntries.php" method = "post">
<button type = "submit" name="submit1" onclick="addinput()">DELETE</button
</form>
This the hidden input need not be included in all 3 forms and these fields can be generated dynamically on the particular form button onclick.
I want to have a user select a file and then have php put the contents in db. Now the last part (processing the file in php) is easy. But is there a way I can process a user selected file whithout a new page load?
If I use the following:
<FORM ACTION="upload.php" METHOD="post" ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="somefile"><BR />
<INPUT TYPE="submit" NAME="submit" VALUE="Upload">
</FORM>
Page upload.php automaticaly loads after which I can insert the uploaded file in a database.
I would like to use a combination of javascript, php and xajax to process the file. I don't think something like this is possible:
<FORM ACTION="javascript:xajax_proces_file()" METHOD="post" ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="somefile"><BR />
<INPUT TYPE="submit" NAME="submit" VALUE="Upload">
</FORM>
Because the file is not uploaded when function xajax_process_file() is called. Or is it? I think I do not fully grasp the principle of uploads with javascript, html and php.
Any help and or clarification is much appreciated.
It may help to think of this as a two step process.
First, the user fills in the form and submits it - step one.
Second ( which is the default action ) the specified target file takes the input from the form and uses it to do whatever. You can almost think of a form "action" as a link - the default action of a link click is to display the result of the link. The same goes for a form action - display the result of a form action.
Now, it's possible via JavaScript to disable the default action of an element for a particular event. It is also possible via JavaScript to access a browsers HTTP mechanism to send/receive HTTP request (which is what every page request is - whether from your URL bar or a page link or a Google search result).
And that is what AJAX in simple terms is - using JavaScript to use a browsers HTTP mechanism to send requests to a web server and possible receive a response back without the use of a traditional click event. You then combine this with the use of JavaScript to "turn off" default actions and instead follow the action specified by you to get information from a server and add it to the page without ever having to refresh the page.
Many times to prevent the defualt action from taking place for a certain element, you return false in your code. The same goes for your form. Using javascript:
form.onSubmit = function() {
blah blah blah.....Use ajax to send the information to the form handler
return false; //Prevents the defualt action of the submit event
}
If you are really new to AJAX, I suggest you check out this tutorial and then this one. Lastly, I would recommend using a Javascript framework like jQuery to help you - it is awesome and does alot of great stuff, but also has easy and built in functionality for AJAX.
Here is another tutorial to do a form submit with no page refresh (uses jquery).
an alternative is to make the form directs the action to an iframe, after processing the query in the iframe, proceed by JS to clear the form of the father