We Keep Coding

PHP Ajax Image Upload within form

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.

submit button with no form filling

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)

Extract data from one html form and display it another page

I am building a page to conduct survey. I have an HTML page wherein the surveyor enters the questions and choices to the corresponding questions. The page contains two buttons, one is the preview survey and other submit. What I want is that when the user clicks on "preview survey"button, the user should be directed to another page which only displays the questions and the choices entered by the surveyor. How do I do this functionality?
Basically, it is extracting data from an HTML form and displaying it in another page.
Something like this:
http://www.surveymonkey.com/s.aspx?PREVIEW_MODE=DO_NOT_USE_THIS_LINK_FOR_COLLECTION&sm=3sP%2fucxKJsI57gtum0mLXhMpuD4LqWiUaSkI8eVytnk%3d

There are tons of tutorials on how to handle form input in web applications on the web. Just pick one for your programming language of choice.

You have a few options:
1. Open up the preview in an overlay-dialog
You can use stuff like Jquery UI dialog for that, or any other library like Twitter Bootstrap or Wijmo. This way you don't need to direct to another page and do not have to juggle with variables (you do need some javascript to fetch the options and insert them in the dialog
2. Post a form to the other page
This will also, most probably, needs some javascript. But assuming you have the survey in a form already this won't be that difficult. You can, example given, use the jQuery.serialize() function to serialize form input and send it over to some other page. You can either construct an Ajax/XHR request, or send it directly to a popup window (needs you to alter the action type though when you want to finally submit the form). Example here
3. Open up a popup and let it directly speak to it's parent window
With the window.parent property you can talk to the window/page that opened the popup. Than you can read out properties, like form values, and use them in the pop-up. It works pretty much like this:
survey_page.html
<script type="text/javascript">
var popup = window.open('popup.html', 'width=300, height=200');
if(window.focus) popup.focus();
return false;
</script>
<form name="testform" id="testform">
<input type="text" name="atextfield" value="" />
</form>
Open popup
popup.html
<script type="text/javascript">
function alertParentValue() {
alert(window.opener.document.forms['testform'].atextfield.value);
}
</script>
Also click me!
If you click the open pop-up link and then click on the other link, you'll be alerted the value which you filled in in the text field.
Other options are most probably available, choose whichever suits you!

On preview button you can use the popup only due to this page wouldn't redirect to the other page

insert content in a div of another page using client side

I have a page where there is a form(and url is xyz.com/form)...
Now when the user submits the data, it should redirect to the home page of xyz.com(url is xyz.com) and then display a message as "Thank you" in an existing div id (div id="message")of the home page...
Is it possible to do it using javascript??
Will I get the value of that div id(message) when the it redirects to home page using javascript.
I could redirect the page to home page.. but couldnt insert contents in that div... or in a new div...
Please help

i would add a GET-parameter to the url like "status=ok". on the main-page you can check this parameter with javascript and change the value ('innerHTML') of the div.

Without having seen your code, i would say yes, it is possible.
On entering the main page you can check the referring page and you could also check some session stored data that validates if the user has submitted the form (i suggest ajax for this).

How do I add a callback function to .submit() in Javascript?

I am submitting a page onclick of a form element and need a function to run after the submit refreshes the page. I'm trying to add an animated scroll back to the clicked element that caused the submission. I've got the scroll part covered but I can seem to figure out how to cause the function I wrote for the scroll to run after the page refreshes from the submit.
Any timely help would be much appreciated!

If you are doing a full submit, rather than an AJAX submit, then the page that displays afterwards is not the same page as the one that the form was submitted from. Consequently, the identity of the clicked element will not be available on the second page.
What you need to do is, during the submit handler, store the identity of the clicked element (Should probably be a unique ID of some kind) in a hidden field of the form.
When the page refreshes, it should now have the unique ID available (Probably placed in the same hidden field of the form by the server side code) and a javascript function can read this value to control the scrolling.
Does this make sense?
If you update your question to include some sample code, then I might be able to clarify further.

If you do a "real" form submit, where the actual page refreshes, there is no way you can do it from the client (except using frames). Once you leave the page, your javascript is out of scope. You need to insert the javascript to the refreshed page on the server.
If, on the other hand, you are submitting the form and refreshing a part of the page via ajax, then, depending on the framework you use, you'll be looking for a callback hook like onSuccess etc. in your ajax submit function

This would be easier to do in ajax however if you need to do it as a postback then you need to attach an event to the body load event and send some data back with the postback that would identify that the page has loaded as part of a post back and not a new page load.
e.g. create a hidden contol ont he web page and on the postback give it a value , on the postback check to see if that hidden control has a value and if so run your scorll code.