I have a page with file upload form.
<form enctype="multipart/form-data" method="post" action="uploaded.php">
<input type="file" name="my_file">
<input type="submit">
</form>
I need to post results into a modal window created with colorbox jQuery plugin.
http://colorpowered.com/colorbox/
Does anyone know how do do this?
Thanks
Colorbox is client-side, upload server-side. You have to create a php page which displays uploaded images and "apply" colorbox on it.
Related
There is one "create profile" page written in PHP. There are 2 forms and 1 JQuery function.
<script type="text/javascript" >
$(document).ready(function(){
$('#photoimg').change(function(){
$("#imageform").ajaxForm({
target: '#preview'
}).submit();
});
});
</script>
This is where the image is displaying:
<div id='preview'></div>
Form-1: (For profile image uploading)
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
<input name="photoimg" id="photoimg" type="file" />
</form>
Form-2: (For other text information)
<form class="form-signin" name="reg" role="form" action="process.php" method="post">
.... some normal input values ....
<input type="submit" value="Submit">
</form>
The problem:
When I am clicking on the "photoimg" to browse image file and choose, the JQuery "onchange" is working perfectly and the "imageform" is getting submitted and 'ajaximage.php' being called the uploaded image is being showed up perfectly on the main page in the DIV 'preview' without refreshing the main page. This portion is working perfectly.
Now after that if I click on SUBMIT button of Form "reg", instead of going to "process.php" it is again going to "ajaximage.php". This is the problem.
If I REFRESH the main page and then click on SUBMIT button of Form "reg", then it will go to "process.php".
I am not sure if my question is clear. Thanks in advance for your time & help.
Adding the "ajaximage.php" code for your reference:
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
.......
do all the image upload stuff & update database
.......
echo "<img src='uploads/".$actual_image_name."'>";
}
Possible walk through.
Check if all the html tags are properly closed after your target div is updated.
Try to focus out of file element after completion of request.
Check for jQuery errors on your console.
Check if some ids are not conflicting.
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.
I have created one form to upload images for custom use
<form id="file-upload" action="" method="POST" enctype="multipart/form-data">
<div id="image-uploader-box" class="group">
<div id="forms" class="add-photo-fields">
<input type="submit" value="Upload" />
<input type="button" id="add-photo-button" class="add-photo-button" value="Add Photo"/>
</div>
</div>
</form>
Now it is working fine with uploading image and storing to proper place. But what I exactly want is auto submit above form when user submit WordPress comment. ( when user hit the submit comment button )
Can anyone help me for this? I am fine with jquery or php either way.
This is the place to go: http://api.jquery.com/submit/ (jquery's submit function)
When uploading files you can post to an iframe: How do you post to an iframe?
I'm trying to implement popup search window in a PHP project. I included JQuery and ColorBox & have managed to open the Search popup inline (using ColorBox plugin).
This is my code to open popup window
$(document).ready(function(){
$(".inline").colorbox({inline:true, transition:'none',speed:'10', close:'close', opacity:'0.6'});
});
Popup div has a separate <form> element to POST data.
<?php
if (isset($_POST['btnSearch']))
{
//Code to search data
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"
enctype="multipart/form-data">
//Some Page Content
<div class="input"><input type="submit" name="btnSearch" Value="Search"
class="button"></div>
</form>
The problem is when I click the 'Search' button it POST the form but closes the popup. How can I retain popup window opened even after the button click?
AJAX is what you're looking for. jQuery has built in AJAX support which you can read about HERE
It's real easy to use so you shouldn't have any problems implementing it
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.