You can view the page I'm referring to here:
http://portal.escalatehosting.com/cart.php?a=add&pid=9
Just enter a random domain name and then you'll see 2 buttons at the bottom. The first button (smaller one) works properly, but the second button (bigger one) isn't adding the order to the shopping cart.
Here's the code for the first button:
<input type="button" value="{$LANG.checkout} ยป" class="checkout" onclick="addtocart();" />
Here's the code for the second button that isn't working:
<input type="image" src="http://www.escalatehosting.com/images/continueorder.jpg" style="border:0px;" onclick="addtocart();" />
I'm simply trying to replace the first button with the second one so that an image is being used, but can't seem to get the second button to work properly. What have I done wrong? I changed the type to image and the added a src.
instead of changing type and src just add style to it
<input type="button" style=" background: url('someimage.jpg') no-repeat; width:100px;height:30px; border:none;" />
the problem here is because simple input type="BUTTON" do not submit form, but input type="IMAGE" does
so, if you check what is actually called you will see:
press the image, addtocart is called
addtocart is trying to perform ajax request
form is submitted by browser, all ajax requests are interrupted
this is why it doesn't work
to make it work change you code to :
<input type="image" src="http://www.escalatehosting.com/images/continueorder.jpg" style="border:0px;" onclick="addtocart();return false;" />
I think you're misunderstanding what each does
<input type="image" src="my/path" />
This is the same as <input type="submit"/>. It's used to submit a form. type="image" simply uses an image instead of a button.
What you want is for your onclick event to be fired. It's likely conflicting with your form submit. So you need to use an image tag
<img src="http://www.escalatehosting.com/images/continueorder.jpg" style="border:0px;" onclick="addtocart();" />
You can bind the onclick event to any object, actually. It just doesn't work well to have your form submit at the same time.
<input type="button" style="background:url(http://www.escalatehosting.com/images/continueorder.jpg) no-repeat; width:600px; height:100px; border: 0px;" class="checkout" onclick="addtocart();" />
keeping some of those settings you had play with the width & height until it looks right and this should work.
I personally would prefer the css attribute instead of the source.
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;">
I have deigned a simple HTML form but i want to submit it to a PHP to process but I want to submit the form not with the help of Button / Submit but with the help of anchor Tag
Submit
how to do it
the form is like
<form action="" method="post">
<input type="text" name="name" />
<input type="email" name="email" />
Submit
</form>
I want to post this form to the same page
In my opinion, I would keep using a button of type submit and just style it to look like a link with CSS.
button#submit {
background:none;
border:none;
padding:0;
color:#069;
text-decoration:underline;
cursor:pointer;
}
<button id="submit" type="submit">Submit</button>
Javascript can help you.
Submit
But of course you can style your submit button with CSS
if you REALLY want to do it this way you have to use javascript to submit the form in some way.
You can either add an onclick event to the link or you can add an onkeypress to the text fields so when the user hits ENTER it submits the form.
However, this is typically bad practice. Why not just use the button or input[type="submit"] tag? If the clients disable javascript then they'll never be able to submit your form, unless that's your goal.
Is there a particular reason where you need to have the form submit via an anchor tag?
As has been stated above, you can use JavaScript to submit the form, but if you run into the rare case of a user having JavaScript off, the form becomes unusable. I'd stick with the suggestion of styling the button to look like a link using CSS.
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.
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'])) {
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.