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.
Related
I am trying to use the Polymer element Iron-Form to submit information into the $_POST array. However my submit button (a paper-button) - which should run the script to submit the form - does not seem to submit the form when pressed.
I'm new to Polymer and to PHP, so I'm not sure what is going wrong.
Form script
<form is="iron-form" method="post" id="insert-project-form" action="/form/handler">
<paper-input label="Project Title" name="title"></paper-input>
<paper-input label="Client ID" name="clientid"></paper-input>
<paper-input label="Working Hours" name="workhours"></paper-input>
<paper-button raised onclick="submitForm()">Submit</paper-button>
<script>
function submitForm() {
document.getElementById('insert-project-form').submit();
}
</script>
</form>
I have been having the same problem, and have been doing it the same way you do it. According to the Documentation it should work. But I have found a work around for this problem
Add a normal button for the submission and style its visibility to hidden
<button type="submit" id="SubmitButton" name="submit" style="visibility:hidden;"></button>
And in your javascript code change the submitForm function to this
function submitForm(){
document.getElementById('SubmitButton').click();
console.log("Submitted!")
}
And keep the paper button line the way it is.
<paper-button raised onclick="submitForm()">Submit</paper-button>
What it does is when the paper button is clicked, it triggers a click event on the normal submit. I'm pretty sure there are more efficient ways than this, but I will be using this for now.
<form is="iron-form" method="post" id="insert-project-form" action="/form/handler">
the attribute at the very end "action" needs to pass it to your php file. Assuming your php file is in a folder called "php". the solution to this would be
<form is="iron-form" method="post" id="insert-project-form" action="php/yourphpfile.php">
and your logic would be contained in the php file that submits it to a database if needed.
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'm trying to submit a form which includes a file upload via Ajax/jQuery, process the form through a PHP script, and return the result in the div that the form originally resided in.
My current form code is:
<section id="content-right">
<form name="uploader" id="uploader" method="POST" enctype="multipart/form-data">
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="10485760" />
<input type="file" name="fileselect" id="fileselect" />
<input type="submit" name="submit" id="submit" value="Upload" />
</form>
</section>
And my current Ajax/jQuery script is:
<script>
$(function() {
$('#uploader').submit(function() {
$(this).ajaxSubmit({
type: $(this).attr('method'),
url: 'upload-song.php',
success: function(response) {
$('#content-right').html(response);
}
});
return false;
});
});
My PHP script is "upload-song.php" (the details don't matter).
I also have YUI.Pjax running to handle normal navigation (a href) links and load those in #content-right (if a user clicks anything, I want it loading in #content-right).
With this set up, navigating through normal links works perfectly, everything loads in #content-right, but the uploader only works every other time.
For example, the uploader will load upload-song.php in #content-right and process everything perfectly, then if I navigate away from the page and try to upload another item, it won't work, it'll just refresh the page (if I put action="upload-song.php" in the form tag it'll load upload-song.php as a full page, not in #content-right). After it refreshes the page I can upload another item and it will work perfectly.
I think it has to do with how I'm attaching my Ajax script to the form submit (because if I refresh the page it works perfectly), but I don't have a lot of experience with these languages so I'm not sure how to fix it.
In addition, if I disable YUI.Pjax it fixes the uploader but obviously breaks my links, so I'm looking for a work around.
Any ideas?
Try this:
$(document).on("submit", "#uploader", function() ...
This syntax will let the submit event bubble up to the document. That way, when the #content_right section reloads, the document retains the event listening response set up in the DOM ready 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.
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.