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;">
Related
I have problem that my page refreshes when form is submitted. I have checked other questions on stack but they worked fine when type of input is button like <input type="button"> I have also checked javescript and jquery techniques but they doesn't work for me. Kindly can you please guide me that how to stop page refresh on form submission when its type is image.
<form action="userOwnProfile.php" method="post">
<input type="image" src="messageicon.jpg">
</form>
You don't have an id, input name or form name, you don't have a submit button. If you wish to use Ajax you need to identify the element with an id, class or name. What you have cannot work.
Try (add tags)
<img id='somename' src='messageicon.png' />
Or
<button id='somename'>messageicon.png </button>
You don't need a form
Then in jquery
$("#somename").click(function(e){
e.preventDefault();
Do something like send data to php
});
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.
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).
I have this button in my website
<input class="large button gray input" id="refrescar" type="submit" value="Confirmar"/>
That I use to refresh the site manually like this:
$('#refrescar').click(function() {
location.reload();
});
It works on almost all the pages of my web except on those that have get parameters like this:
http://mywebsite.com/page.php?id=2
When I click the button in that page it will go to
http://mywebsite.com/page.php
instead.
How can I solve this?
Instead of type="submit", use type="button", because I think currently the button submits the form instead of reloading it.
yes, you need to instead
<input class="large button gray input" id="refrescar" type="submit" value="Confirmar"/>
to
<input class="large button gray input" id="refrescar" type="button" value="Confirmar"/>
maybe
location.reload(location.href);
that will pass the url and query string to the reload function
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.