Have a php form with an image for the submit button. Am trying to determine whether the submit button has been clicked when the page posts back. Have tried
$testForm = 'fail';
if (isset($_POST['btnSubmit'])) {
$testForm = 'Submit clicked';
}
button code:
<input name="btnSubmit" value="Submit" style="float: right;" type="image" src="images/submit.gif" width="181" height="43" alt="Submit Form" />
However it doesn't seem to be working. Have tried getting values of other input elements on the page and they work fine. Is there some special method for dealing with image buttons?
a image-button submits the clicked coordinates as [name]_x and [name]_y on submit instead of its value as [name] (some browsers also do this, but not all, while the coordinates are set from every browser). that said, you could simply check:
if (isset($_POST['btnSubmit_x'])) {
Related
I'd like some help, because I am trying to learn AJAX and I'm stuck. So I have this code here and everything is right, when i press the buttons the information from the PHP file are displayed perfectly.
`<form>
<input type="button" value="req" onclick="fetch('hotels.php?select=1')">
<input type="button" value="req2" onclick="fetch2('hotels.php?select=2')">
<input type="button" value="req3" onclick="fetch3('hotels.php?select=3')">
</form>`
So what I needed to ask is the following: Can I replace the plain classic onclick button with a custom one that I've made in Da Button Factory? I have tried to change the input type to an image, but the problem is that the page is refreshing, when I click it (On the other hand when I just have the classic button onclick it doesn't refresh and the infos are displayed). My programming teacher told me that it must not refresh, as we are working on AJAX right now. Here is what I've tried to do
<input type="image" src="button_london.png" alt="randomtext" value="req2" onclick="fetch2('hotels.php?select=2')">
Any tips?
Input image by default acts as a submit button. If the input type image does the job for you, simply add return false after your onclick function to prevent refreshing.
<input type="image" value="req" onclick="fetch('hotels.php?select=1');return false;">
Currently I am working on a HTML page where I can upload an Excel and also get data from database between a specified date range. One submit button would bring out data from excel and database and compare value from both list and shows up the conflicting values. I need to add another submit button where the user can set how the mapping must be done for the conflicting values in the same form.
How to use two submit buttons simultaneously with data posted in first submit button accessed in second submit button in PHP?
As long as the submit buttons are placed inside the same form element, clicking on any of them will submit the form they are placed in.
With that, all fields in the same form will be submitted.
However, you probably want to know which submit button was clicked to do things differently.
You can add name property to specify which submit button was clicked.
<input type="submit" name="submit1">
<input type="submit" name="submit2">
Assuming this form is submitted with POST method, you can check which submit button was clicked using the example below.
$importData = isset($_POST["submit1"]);
$mapSettings = isset($_POST["submit2"]);
So, you can achieve this by placing all the fields in different forms into the same form element. All fields within the form element will be submitted despite of which submit button was clicked.
You can then use the boolean result above to determine what to do.
The best answer I have seen so far for this situation is:
<input type="submit" name="action" value="Update" />
<input type="submit" name="action" value="Delete" />
Then in the code check to see which was triggered:
if ($_POST['action'] == 'Update') {
//action for update here
} else if ($_POST['action'] == 'Delete') {
//action for delete
} else {
//invalid action!
}
The only problem with that is you tie your logic to the text within the input. You could also give each one a unique name and just check the $_POST for the existence of that input:
<input type="submit" name="update_button" value="Update" />
<input type="submit" name="delete_button" value="Delete" />
And in the code:
if (isset($_POST['update_button'])) {
//update action
} else if (isset($_POST['delete_button'])) {
//delete action
} else {
//no button pressed
}
There is a nice post about this here: Two submit buttons in one form
What's the best practice to create an image button that sends a value and runs a php script (that executes a mySQL query) when clicked. The button has to be an image and not a default submit type of button. I've been googling this for a few days and I still can't find a sutable answer. I could use GET and make a few image buttons (images with links that contain values) on the page that redirect to itself which then I can collect with
if (isset($_GET['variable']))
but I don't really want the user to see the values. I tried creating a form which has only one button in it that when clicked will reload the page and I could capture and use the value with
if (isset($_POST['submit_value'])) {$var = $_POST['submit_value']; }
but I can't seem to make this work, at least not when the button is an image. So if anyone knows a decent way to do this, please share. It doesn't have to be AJAX e.g. page reload is perfectly fine. I'm guessing that I need JavaScript to do this but I don't really know JavaScript so a working example would be nice.
SELF-ANSWER
Thank you for all of your answers. I found that the simplest working way to go with is to create a form with an input type of image that makes the submit and an input type of hidden that carries that value.
<form action="some_page.php" method="POST">
<input type="hidden" name="variable" value="50" />
<input type="image" src="image.png" name="submit" />
</form>
And on the PHP side I use this to catch the value.
if (isset($_POST['variable'])) { $var = $_POST['variable']; }
This is the most suitable solution for my problem. Thank you all again for your speedy responses.
Image buttons are pretty much a mess! :(
I would suggest using CSS to put background-image to ordinary <input type="submit">. This way value will always be visible (eg. sent in request) when user submits the form.
For example:
.myImageSubmitButton{
width: 100px;
height: 22px;
background: url(images/submit.png) no-repeat;
border: none;
/** other CSS **/
}
the bad thing here is that you must set width and height according to image used...
if it must be a <button> you can redirect the form to another script like this:
<form action="somescript.php" method="POST" name="myform">
<input type="submit" name="submit" value="normal submit">
<button name="foo" type="button" value="bar"
onclick="document.myform.action = 'someotherscript.php';
document.myform.submit()">
<img src="someimage.png">
</button>
</form>
or change a hidden field and post the form to the same page like this:
<form action="somescript.php" method="POST" name="myform">
<input type="submit" name="submit" value="normal submit">
<input type="hidden" name="action" id="hidden_action" value="normal_action">
<button name="foo" type="button" value="bar"
onclick="document.getElementById('hidden_action').value = 'special_action';
document.myform.submit()">
<img src="someimage.png">
</button>
</form>
Just a note: if the user wants to, they CAN retrieve the values, for example with Firebug. This cannot be changed.
Also, HTML buttons can be images. See this.
Or use XMLhttprequest on an image wih onclick. There are many tutorials for XMLHTTPRequest. For example this.
You can make a POST form and use the image as a submit button without javascript:
<input type="image" src="myimage.gif" name="submit">
invoke a submit using onclick event on the image
<img src="image.jpg" onclick="document.formname.submit();" />
make submit button with image like that
<input type="submit" style="background-image:url(image); border:none;
width:10px;height:10px; color:transparent;" value=" " name="submit_value"/>
I think the only two ways of doing this are with gets (like you've stated) or with a form where the image button is an input with type submit.
I'm pretty sure you can change the styling of a submit button so that it has a background image, if not then ignore my ignorance.
I have a form that has Submit button in form of an Image. When user clicks the image button, the image button should play the role of submit button.
Code Sample:
<form action="page.php" method="POST">
<input type="image" name="btn_opentextbox" src="image.png" value="Submit" />
</form>
Handle Submission:
if($_POST['btn_opentextbox'])
{
//do something
}
Surprisingly, the above code used to work perfectly fine in Firefox. However, once i updated my Firefox yesterday, it didn't work at all. I click the button, page gets refreshed and nothing happens. The code also doesn't work in IE.
Note: it works in Chrome.
I want it to work in Firefox, IE, etc.
Any suggestions?
you can add a hidden field
<input type="hidden" name="action" value="Submit Form">
and in php you can do this
if($_POST['action'] == "Submit Form"){
do something
}
hope this help.
You should use a normal submit-button and use CSS to replace the button's look with an image. This should work in all browsers.
for image submit button
php code is
if(isset($_POST['btn_opentextbox_X']) || isset($_POST['btn_opentextbox_Y']))
{
//do something
}
The good php code is :
<input type='image' src='../images/blanc.gif' width='596' height='35' onFocus='form.submit' name='btn_opentextbox'/>
if ($_POST["btn_opentextbox_x"]) && ($_POST["btn_opentextbox_y"])
{
......
}
Check for btn_opentextbox_x or btn_opentextbox_y instead. (It is actually . not _ but PHP mangles it).
Some browsers fail to send the value for server side image maps, just the co-ordinates.
And you seem to have forgotten the alt attribute.
Alternatively, use an actual submit button instead of an image map:
<button type="submit" name="btn_opentextbox" value="submit"><img src="image.png" alt="Submit"></button>
… but note that some versions of IE will send the HTML content instead of the value when it is submitted.
Do you have multiple buttons in that form and need to know that the form was submitted?
If there is just a single submit button I suggest using following code:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// process form submission
header('Location: page.php?result=success');
}
This way you'll be sure if form was submitted and also avoid double submission if user hits reload button after form was submitted.
I try to create an upload progress bar with PHP and jQuery. However, I have a problem when I bring it to the form data. The code is similar like this:
<form method="post" action="upload.php" enctype="multipart/form-data" id="upload-form" target="upload-frame">
Suburb:<input type="text" name="txtSuburb" id="txtSuburb">
Picture:
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
<input type="file" name="file">
<input type="button" name="submit" value="Upload!">
<iframe id="upload-frame" name="upload-frame">
</iframe>
<input type="submit" name="DataSubmit" value="Submit Data"/>
</form>
As you can see, I got 2 submit buttons. If I keep the form like this then the form can't submit data to server. It just submits the file to iFrame. If I change the action and target of the form then the upload progress function will not work.
Could anyone please help me to find the solution for this?
I want the user can click on upload button to upload their file. Then they can take the rest to fill the form. When everything is done, they can click on another submit data button to submit their data (included the file) to the server.
Make sure that you have only one input element of type submit within your form.
If you want the first button to trigger some Javascript, use a regular input element or even a styled link and attach a Javascript event to it's onclick event, then prevent it's default behavior, e.g. by returning false.
Like this only the second button will actually submit your form which should do what you're describing.
In general I'd second #Treffynnon's suggestion to use a existing library for this purpose. These hacks have a tendency to get pretty nasty, especially when it comes to crossbrowser compatibility.