Image Submit Button within a Form - php

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.

Related

Echoing a var from a sendmail.php form in a div inside the form page or in a popup window

The idea is to preview (this part works fine) the form somewhere so, if corrections are needed we can go back to the unrefreshed form to make corrections.
I have this form:
<form action="../../../../sendmail.php" id="Formulaire" method="post" name="Formulaire" onsubmit="return checkform()" target="_self">
I have a submit button to preview:
<input id="captcha" name="_Preview" type="submit" value="Preview" />
And here is my php code (from sendmail.php)
if(isset($_POST['_Preview'])) { echo $text; ?>
As stated above the preview (content of array $text) works well although it is presented on a blank page.
I like it to be presented either in a div on the form page or in a popup Window so when I close the popup I am back on the non-refreshed form.
I tryed different ways, my problem is everytime, after submitting the preview button I endup having the sendmail.php form in the background (blank of course or with the preview data). I don't know what approach to take. Thank you for your help.

Why does my form submit to my php as a url instead of the actions in the php file

Ok I have a form with multiple submit buttons.
The coding on my php file has a header with a url depending on which form was entered. My issue is when I submit the form( no matter which button I use) the window that pops up is not the url action assigned to that button but the php file itself. What am I doing wrong?
the form starts of like this so that you can see if I directed it correctly
<form method="post" action="http://gamerzacademy.com/foodCYO.php" target="_blank">
<input type="text" name="uid">
<input type="submit" name="Dish1" value="Dish1" onclick="
this.disabled=true;
this.value='Gift Opened';
document.FreeFoodForm.submit();">
<input type="submit" name="Dish2" value="Dish2" onclick="
this.disabled=true;
this.value='Gift Opened';
document.FreeFoodForm.submit();">
etc......
now the php file starts like this
<?php
if ($_REQUEST['Dish1'] == "Dish1") {
header("Location: url1".urlencode($_POST['uid']));
}
else if ($_REQUEST['Dish2'] == "Dish2") {
header("Location: url2".urlencode($_POST['uid']));
}
else if ($_REQUEST['Dish3'] == "Dish3") {
header("Location: url3".urlencode($_POST['uid']));
}
.....etc
?>
You are posting the form through Javascript. The code doesn't know which button was clicked, so the value of that button isn't posted to the form. Therefor, your form cannot see which button was clicked. If you change the method to get, you will see which value do or do not get posted.
I think you don't need to post from Javascript at all. Just let the button do the posting. Only the name and value of the button that was clicked will be posted.
B.t.w., you disable the button, presumably because you don't want people to press the button twice, but in your setup they still can press any other button. I think it is wise to disable all of them.
Two things:
First, make sure the URLs you are sending in header are valid URLs.
Second, it looks like you have some whitespace before the <?php opening tag. Make sure there is no whitespace before the PHP opening tag. If there is, header won't work.
By doing the following in JavaScript:
this.disabled = true;
You effectively don't send its value to PHP.
A better idea might be an on submit handler in the form that prevents double submit.

How to disable a form after the first submission?

<form method="POST" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" onsubmit="document.getElementById('submit-button').disabled=true;">
I use that line to disable the button after the first click, but it doesnt work..
Here is the line of the button:
<input type="submit" value="Register" id="submit-button"/>
I'd guess that what is happening is your code is firing but then page will refresh after the form has been submitted and the button will no longer be disabled.
If this is the case then the you could insert the disabled property in to the button's HTML from the server side when you know that the page is being rendered as the result of the form being submitted.
If you are posting to the same page and wish for the button to be disabled after the form has been submitted once, what you can do is use PHP to check if the data that was submitted by the form has been posted to the page. If it has, disable the button. It might look like this:
<form method="POST" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" <? if (isset($_POST['your_form_data'])) echo "disabled='disabled'" ?> >
You may want to save a boolean flag in database for example isRegistered, so if the user is already registered, the form will not be shown.
Without jquery (just an example, better to use jquery):
function disablebtn( idbtn ) {
document.getElementById(idbtn).innerHTML = 'Loading...';
document.getElementById(idbtn).disabled=true;
}
<form onsubmit="disablebtn('formPageBtn')">
<button type="submit" id="formPageBtn">Send</button>
</form>
With this function when you press the button it will change the label to "loading...", too.
change the action to javascript:void%200 after the form was send!
In what way does it "not work"?
If you mean that it doesn't submit the form, the button just stays disabled, try using a setTimeout to delay the disabling slightly.
If you mean that the button is not disabling, are you sure the page isn't reloading by the form being submitted? If this is what's happening, you might want to add <?php if($_POST) echo " disabled"; ?> inside your submit button.

Basic Javascript: onclick event not working

Given this simple javascript function:
function update_cart() {
alert("--update--");
document.form1.command.value="update";
document.form1.submit();
}
and this button at the bottom of my form:
<input type="submit" value="Update" onclick="update_cart()" />
The data in the form is 'submitted' to the new URL. but the update_cart function is never called. I know because I never get an alert box, and the URL reads...?c=Albania&m=....
Also, the form element
<input type="hidden" name="command"/>
does not get posted to the URL, either. URL reads ?command=&c=Albania...
I have tried the following: changed onclick to onsubmit, checking $_REQUEST variables, cutting and pasting the code from known working pages.
I'm at my wit's end, and would be grateful for any help!
Oh, yes: same behaviour in firefox 6, Opera 11.5, & IE7. I'm running WinXP SP3.
Thanking you,
Sadhu!
Once try
<input type="button" value="Update" onclick="update_cart()" />
instead
<input type="submit" value="Update" onclick="update_cart()" />
if you want that for 'submit' type then go with 'Allen Liu' answer
enter code hereif you wane to change sth when onsubmit, you need to do these changes before form's submitting. so you need to add these opeartion to the "onsubmit" event of the form, rather than the "onclick" event of the submit button.
like this:
<form name="toSubmit" onsubmit="update_cart();"><input type="submit" name="btn" value="hello"/></form>
If you want the script to run on submit of form, use:
<input type="submit" value="Update" onsubmit="update_cart()" />
The onsubmit event is usually used to run some validation script. If the validation returns true, the form will submit. If it returns false, the form does not submit. In your case, the script is coded to submit the form so no return boolean value is necessary.
Otherwise, I would not give your button the submit type if it really doesn't submit the form. You can simply use button tags with the onclick and that should work:
<button onclick="update_cart()">Update</button>
First of all there is no need to change your html; see my demo.
On every click on a submit button, first the click-handler (if exists) will be started, then the submit-handler (if exists) (which should be in the form tag) and then the action of the form will be executed. This procedure will be only stoped, if a handler returns false.
But why will your javascript function update_cart not be called?
I think it could not be found, but I don't why. Can you bind the function to the window dom element only for testing (like in my demo)?
P.s.: you don't need to submit the form in your click-handler (if you don't return false). You can remove the line: document.form1.submit();.
P.s.: it will be better not to use a click-handler on the submit-button, instead use a submit-handler in the form tag (see my demo2).

How to check if a form is submitted via javascript?

I have this conventional submit button which submit a form like this:
<form method="post" id="form_submit">
...
<input class="button" type="submit" name="Submit" value="Submit">
</form>
And I check if the submit button is clicked using this:
if(isset($_POST['Submit'])){
//update DB
}
Now I have a submit link using jquery:
Submit
JS code:
$("#form_submit").submit();
What is the alternative way here to be used here for if(isset($_POST['Submit'])) since I'm submitting the form using javascript?
If I understand you correctly, try this:
if ($_SERVER['REQUEST_METHOD'] === 'POST')
{
// your code.........
}
You should add a hidden input <input type="hidden" name="formsubmit" value="yes" /> to the form which will always get submitted, and check for that instead of the button (which only gets submitted if it is clicked on ..)
If I understood your problem correctly that you can simply change input type to hidden.
<form method="post" id="form_submit">
...
<input type="hidden" name="Submit">
</form>
$_POST['Submit'] variable will be defined.
The best solution is "Don't do that". If you want to submit a form then use a submit button (don't do it as a side effect of clicking on a hyperlink to the top of the page). Any JavaScript you want to run can then be handled in the form's submit event.
If you really want to do it as a side effect, then check for the existence of any other field that you know will be set. You could add a hidden field to ensure there will be one of a given name/value combination if you like.

Categories