Submitting form into a div

Question

Can anyone tell me why this is not working or give me another way into doing what I want.

I have a form on a page when click submit I want it to process into add.php and for it to open up in a DIV called right.

Form page

<script>
$("#Submit").click(function() {

var url = "add.php"; // the script where you handle the form input.

$.ajax({
       type: "POST",
       url: url,
       data: $("#myForm").serialize(), // serializes the form's elements.
       success: function(html){ $("#right").html(html); }
     });

return false; // avoid to execute the actual submit of the form.
});
</script>
</head>
<body>
<form action="add.php" method="post" enctype="multipart/form-data" id ="myForm">
 Name: <input type="text" name="name"><br> 
 E-mail: <input type="text" name = "email"><br> 
 Phone: <input type="text" name = "phone"><br> 
Photo: <input type="file" name="photo"><br>
<input type="submit" value="Upload">

</form>

</body>

Now if I add action to form to direct it to add.php all works fine so other script is ok yet when i do it this way,nothing happens it does not load add.php into the 'right' div like I want it to.

Anyone got any suggestions?

Whats the response code? You can use Firebug to debug and see the response code of the ajax request on the console. — spekdrum, Oct 05 '12 at 10:50

score 0 · Answer 1 · answered Oct 05 '12 at 10:51

0

Your $("#Submit") selector does not match anything (the submit button has no id and is defined after that bind attempt), so the function is not bound to any event, thus never executed.

Instead the form acts the way it should: upon submit it posts its content to the url specified in the 'action' attribute. This is what happens, that div is never touched.

you have to go back to understand how jquery selectors work. How to bind a function to an event.

answered Oct 05 '12 at 10:51

arkascha

41,620
7
58
90

Yeah sorry action is on form that's where I was testing, I want it without the action in form so it loads in the div and not actual url and obviously the script does the magic. – Jamie G Oct 05 '12 at 10:54
If I understand that comment right you claim that the action attribute in the form declaration is just for debugging purposes. If so then edit your question and remove it. Second: even without the $("#Submit") does not match anything. The js function will never get executed. You might want to try using a js debugger inside a browser and check that. – arkascha Oct 05 '12 at 10:55

score 0 · Answer 2 · answered Oct 05 '12 at 10:54

0

Is this your exact code? There are a few issues:

$("#Submit").click should be wrapped in a document ready handler so it doesnt run before the page has actually loaded.
There is no button that matches #Submit
There is no div that matches #right

Try

<script type="text/javascript">

jQuery(document).ready(function($) {

$("#Submit").click(function() {

var url = "add.php"; // the script where you handle the form input.

$.ajax({
       type: "POST",
       url: url,
       data: $("#myForm").serialize(), // serializes the form's elements.
       success: function(html){ $("#right").html(html); }
     });

return false; // avoid to execute the actual submit of the form.
});
});
</script>
</head>
<body>
<div id="right">
</div>

<form action="add.php" method="post" enctype="multipart/form-data" id ="myForm">
 Name: <input type="text" name="name"><br>
 E-mail: <input type="text" name = "email"><br>
 Phone: <input type="text" name = "phone"><br>
Photo: <input type="file" name="photo"><br>
<input type="submit" value="Upload" id="Submit">

</form>

answered Oct 05 '12 at 10:54

didster

882
5
9

It has worked thank you, Only problem I'm having now is when it processes add.php it puts everything into database other than the image url and don't upload image to server like it is ment to and does if I run it through url. – Jamie G Oct 05 '12 at 10:59
See the answer [here](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) - – didster Oct 05 '12 at 11:26
Have looked don't understand it i'm quite new to all this,as said all writes to database from the form when processed in add.php only the image is not inserting or uploading to server, add.php is all php coding. – Jamie G Oct 05 '12 at 12:00
Basically your AJAX upload will subit all the form data EXCEPT the actual files. If you are new then I would go for the iframe method of file upload as the AJAX method is pretty new and may confuse you. Try following [this](http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html) tutorial in isolation outside of your actual code. – didster Oct 05 '12 at 13:07
It would be nice if someone could just nicely add it to the script above it's not like a whole complete script write that is what this site is for? helping someone with something they can't do or understand. – Jamie G Oct 05 '12 at 15:38
that wasn't ment to sound so cheeky and rude please take it the nicest way as possible. sorry again. – Jamie G Oct 05 '12 at 15:38
People are trying to help you learn. You dont learn by copying and pasting other peoples code. You learn by following other people's examples and adapting them for your own use. If you want someone to do it for you, pay them! (www.rentacoder.com)! – didster Oct 05 '12 at 19:14

score 0 · Answer 3 · answered Oct 05 '12 at 10:58

0

you have to create on div in body tag which id will be right and

<input id="submit" type="submit" name="upload" >

add new div in body tag like this

<div id="right"></div>

answered Oct 05 '12 at 10:58

viral Pathak

99
3

Submitting form into a div

3 Answers3