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.
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
});
I need little help i am making an upload page, so i have two different forms and two different action
form is ajax picture upload (profile picture of user) its working fine action is action='ajaximage.php'
form is simple user info details like Name,Bio, etc etc. its also working fine.. and its action is action="add.php"
Doubt/Problem
In my website input boxes are not arranged orderly because of the design.
<form id="form" method="post" enctype="multipart/form-data" action='add.php'>
<b>Tittle</b>
<input type="text" name="name">
</form>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
<input type="file" title="Choose Image" name="photoimg" id="photoimg">
</form>
<form id="form" method="post" enctype="multipart/form-data" action='add.php'>
<b>Description</b>
<textarea name="description" rows="1" cols="1"></textarea>
<button input="submit">Save Changes</button>
</form>
Ajax image uploader is working but in case of add.php it is working only for Description.
I cannot change the design so how can it be solved ?? Please Help
You need one submit button for each form. A submit button will just submit the form it is in.
#bwoebi is right about the submits but I'd be very surprised if your arrangement would work anyway. By my reckoning you have 3 forms. Just using the same name again wouldn't work. A single form needs to be distinct - unless you want to do a whole lot of javascript processing on submit. Have another look at fixing your layout to keep forms together.
Just saw your comments above. Why have separate forms with separate actions anyway? Why not have one form with one action that simply does both the file upload and adds the details (presumably to a database)?
You could also simply have different submit buttons on your form and add an onclick attribute to each setting the action for the form to be different:
<input type="submit" name="sub1" value="Upload Image" onclick="document.myform.action='ajaximage.php';">
<input type="submit" name="sub2" value="Add User" onclick="document.myform.action='add.php';">
This means the form action will be changed depending on which submit button is used .
To upload images via ajax you do not need to submt a form, that is the whole point of doing it via ajax. You can upload the image, and then submit the form for the text inputs.
pseudocode:
<form id="form" method="post" enctype="multipart/form-data" action='add.php'>
<input name="name"/>
<input name="profilePic" id="profilePic"/>
<input name="descrption"/>
</form>
You can then use javascript(I prefer jQuery) to upload your image via ajax, specifying #profilePic.
Also, you should look at: http://blueimp.github.io/jQuery-File-Upload/
For my php file, I need to grab the unique form name.
The php file is executed when a user clicks the submit button. However, there are multiple submit button each with the same id, but they all have unique names. I need the name when they click on the submit button.
you dont want elements in html with the same id - bad practice in general. Your page will likely load normally but an html validator will notice it as an error.
html validator: http://validator.w3.org/
without seeing your code, its difficult to give you a definitive answer. if you have miltuple forms you can use hidden inputs. e.g.
<input type="hidden" name="form_name" />
Otherwise you can use javascript to put data in the form when the button is clicked. example javascript using jquery
html:
<form id="formid" >
<button type="button" id="someid" onclick="submitForm('btn1')" />
<button type="button" id="someid" onclick="submitForm('btn2')" />
<input type="hidden" id="btnsubmitid" value="" />
</form>
js:
function submitForm(btnID){
$("#btnsubmitid").val(btnID);
$("#formid").submit();
}
1 way is to put a hidden input inside of your form.
<input type="hidden" name="formName" value="[name of form]" />
then in your php, you can get it using
$form-name = $_POST['formName'];
pretty sure there are other ways, but this came to mind first.
I want to make a simple site that would let you browse for an mp3 and upload it automatically.
here is my code
<?php
if(isset($_POST['submit'])){
$file = $_FILES['mp3']['name'];
$tmp = $_FILES['mp3']['tmp_name'];
echo "$file";
move_uploaded_file($tmp, "member/mp3/".$file);
echo"Success";
}
?>
<html>
<form enctype="multipart/form-data" method="POST" action="upload.php">
<input type="file" name="mp3" /><br />
<input type="submit" name="submit" value="Upload" />
</form>
</html>
This code here is my original attempt however this still uses a manual form.
How can I make this upload automatically?
Maybe use something like this:
<input type="file" name="mp3" onchange="this.form.submit();" />
Although I don't condone inline event handlers, it's just an example to make sure it works for you. The point is to catch the onchange event of the file input and then submit its form. Instead of using this.form or whatever, you can grab the form by ID (after giving it one) and call submit() on it.
UPDATE:
To keep your existing PHP code working, give your submit button an id attribute (something other than "submit") and try using this:
<input type="file" name="mp3" onchange="document.getElementById('submit_button_id').click();" />
Again, this could be more maintainable/readable if you made it a function call, like:
<input type="file" name="mp3" onchange="submitForm();" />
<input type="submit" name="submit" id="submit_button_id" value="Upload" />
<script type="text/javascript">
function submitForm() {
// However you need to submit the form
document.getElementById("submit_button_id").click(); // Or whatever
}
</script>
If you would rather change the PHP, you can use the original this.form.submit(); (or just use .submit() on the form element in whatever way). In the PHP, what you really care for is to check if $_FILES['mp3'] is set, so it's up to you if you need to check for the submit button's presence. I forget exactly how isset() works, so I don't want to assume and tell you something wrong. You might be able to use other logic, but the real thing you care about is if the file was sent in the submission, even though it might make it "better" if you make sure a button was used to submit it (though not necessary).
Simple, attach a onchange() JS event to it.
<input type="file" name="mp3" onchange="call .submit() on a form"/><br />
This will submit the form when the user chooses a file. It's safer and more efficient to create these handlers in Jquery or a separate JS script. But for this example, it doesn't matter.
For more information, view this question: HTML <input type='file'> File Selection Event
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.