I'm working on creating a real estate website where it would allow agents to add their property. For adding the property I created a form. For uploading the picture within the same form, I'm using a jquery plugin which uploads the picture before the form is submitted. I have created a hidden field in the form and with php I am filling that field with a unique id to identify the picture belonging to the property.
What if the user did not submit the main form (keep in mind user can close browser, tab, or even navigate away from page) and I already uploaded the pictures. How can I detect these pictures?
Thanks in advance.
You can use onbeforeunload event to detect if the user is leaving the page and then make an ajax call to delete the images.
Related
I'm bulding a website that allows users to upload a picture and then get the EXIF info shown in a user-friendly way.
I also want to make available an option for users to be able to share their picture online.
At the moment I already have the JavaScript for the image preview fully working, I select an Image on a Form and it appears on the website...
I also have the upload part of the code working as well (PHP). The image gets uploaded to a folder and the name and path of the respective image get uploaded to the MySQL database.
The thing is... I want the process to happen in this way:
User selects the picture - WORKING
The picture appears on display as a preview - WORKING
User presses the upload button (if he wishes to) - WORKING
The image gets uploaded to the defined folder and the name and path to the DB - WORKING
Website stays on the same page with the image preview still there... - TO BE DONE
A new text-area appears on the website with the image path inside (gotten from the database) so the user can share the image - TO BE DONE
----------------//-------------------
I've read some articles and topics on this and supposedly it needs to be done using JQuery in order to work in the way I defined above...
Could you guys clarify if that's true?
---------------//---------------
UPDATE
The solution #Dhanushka sasanka presented worked! I can now upload the picture to the folder and the info to the database and it stays on the page without refreshing!!
I did this You must use JqueryForm Plugin to do this because In the Form that your "upload" button it must be type="submit" therefore current page will be reload after pressing that "upload" button so you must use this plugin JQuery Form Plugin
Go through this one.from this you can uplaod your image without reloading page.
Sending data to server in background without refresh/reload/change the current page can be done with javascript AJAX Request.
If you want to pass data to server and stay on the same page, Then Yes you need to use AJAX in Javascript.
But using Jquery is much easy to implement Ajax request and callbacks, So go with jQuery.
Hi i want a button to be shown on all my pages.
that code should be in such a way that no form filling is needed
the text on button will be "Problem? Click Here"
when click on button, it will be pressed and the person who has clicked cannot click again unless reload the page.
After the button is clicked the mail should be sent to admin with the exact link of page where button was clicked.
there should be no form to fill.
As for example facebook like button like the content meanwhile its pressed.
What should be the code for this? Any suggestion please?
Thank you
You can use an HTML button element with an onclick javascript function linked to it.
Since you don't want the button to work again until you have reloaded the page, you will need to do this through AJAX. This means you will have to send a request to the server, where, for instance, a PHP script will retrieve the page name from a GET variable and send the email to the administrator. The javascript part can keep track of the button being clicked once or not.
That should give you some pointers on where to start with your code. However, as stated in direct comments to your question, this site is not meant for asking for coding work to be done for you. Perhaps next time, try to think of a possible solution and ask for advice on your solution (improvements, coding conventions, etc)
I tried to find out a solution to manage multiple (two in my case) forms on one page while creating a new product item.
I would like to hear from you who'd managed to deal with the same issue.
This is my form:
Theoretically I want to upload the images with jQuery AJAX method once the UPLOAD QUEUE button is clicked, but it shouldn't intefer with the main <form name="form">.
What's the best way for this solution ?
==== UPDATED =====
Maybe there is a way to upload a specific <input> when clicking on Upload button ?
Have you considered not wrapping the image upload tab with a form, since you are submitting it via AJAX anyway?
Besides, a form element should not contain other form elements.
Next step would be to set your Upload Queue button's type attribute to button. That way, clicking it won't trigger the form it belong in.
I have a simple html form which contain 2 fields and submit button. After hitting submit button my data transfer toward the another server through query string named "http://www.123contactform.com" which is load in iframe on my page and the field which is in the iframe become pre-populated with the information coming from query string. That's All I have done.
Now what I want want when the submit button of iframe click, the page transfer towards the another page, I want to restrict that navigation and define my own url with javascript.
Can any one help me, How do I get this???
Regards,
Ammar
Can you show some code ?
And
Logically What you want is something like this - You have an iframe on example.com and that iframe load's gmail's login page, You want to change the submit url of gmail's login form ?
NOT POSSIBLE
[I did see the similar problems solved with AJAX/jQuery, so please read on].
I have a form that a user can fill out - but one of the options on the form allows selection of an image, and when the user goes to do that they are brought to a new page.
This was originally done via get, but my problem is... I need to save all of the information on the form to the session so that I can restore it when the user selects an image and goes back to the first page that had the form.
A HTTP GET may not hold enough data for all the information on my form, so I need to switch to post.
So, here's my problem... I need the form to POST to one page when I click "Select Image" and another when I click "Submit". How can I get the form to POST to a different page depending on which button was clicked?
PS: I'd prefer to just use standard javascript/html here. I plan on learning AJAX and moving over to jQuery after a while, but I'm not there yet :)
onclick, let each button call different functions. Within these functions, change the action attribute of the form dynamically.
document.forms['yourform'].action = 'your intended page';
Then submit the form.
document.forms['yourform'].submit();