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.
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.
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 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();
});
I have got a <input type="file" > field along with other text fields in a form, When i try to upload any files using browse button and then click submit button ,the value in the input type= "file" field disappears , I would like the browsed value to remain in the <input type="file" > field if errors are present in other fields , is there any way i can retain the value that is browsed and for it to remain in the <input type="file" > field when submit button is clicked ,
<form action="form.php" method="post" enctype= multipart/form-data>
<input type="file" value="$file" name="file"/>
<input type="text" value="$line" name="line">
<input type="submit" name="btnsubmit">
</form>
if($_POST['btnsubmit'])
{
$line =$_POST['line'];
$file =$_FILES['file'] ['name'];
if($line)
{
//do something
//conditions for file check here
}
else
//error
}
It is not possible to do this. Browser security prevents you from pre-populating the File input field, so that websites cannot steal private files of their will without the user authorizing it first (by clicking "Browse..." and choosing a file).
EDIT: It is not possible to do this natively - but you can attempt some CSS wizardry to display the previously chosen file name maybe beside the file input box to hint the user. If you want to try and be really cool, you can also attempt to overlay the browser's native file input text display area with another div that has the previous file name filled in it. But this will prevent clicking on the input area and so is user unfriendly. Too much work, little reward.
This not allowed to be set by any script for security purpose, implemented by browser vendors as file input as readonly.
There is one way to do this. Submit the form details for validation using an AJAX submission method so the user never really leaves the page or "submits" the form. That way you can validate the result server-side but the user still has all their values populated, including file inputs.
As mentioned, input[type=file] is readonly. By validating your input on the client side, you can prevent the submit to happen unless all fields are valid. ...and, in most cases, it provides a much better user experience!
Check out jquery.validation or some other validation plugin for your favourite framework, or write one yourself. Keep in mind that you should also validate on the server side.
By preventing the request, the file input will keep it's value until all fields are OK. If you need server side validation, you could also do this using ajax.
I have a form having login button and registeration button.
Registeration Button:
This button should deal two text boxes name and email:
<div id="regisbutton" class="regisbutton1">
<input type="submit" value="Register" class="regisbutton" name="registerSubmit"/>
</div>
Login Button:
This button should also consider only two textboxes username and password:
<div id="loginbutton" class="loginbuttonclass">
<input type="submit" value="Login" class="loginbutton" name="loginSubmit" />
</div>
Problem is I put validation JavaScript which runs automatically and before form action it checks if text boxes are empty or not. But I want to run this JavaScript for registeration textboxes only not for login textboxes.
I have used submit type for both buttons.
You are using two different actions, so you need to different forms!
Without the <form> tag, the input button is quite useless anyway! Also don't rely on javascript only, validate the form with php as well in case js is turned off by the client!
So just wrap each submit button in a different form with a different action/validation and you're done!
If you want validation to only run if you click register, you shouldnt link the validation function to the form submit event but to the register button onclick event.