How to submit a form that is loaded using jquery

Question

I have a file that contain a html form with php , I loaded this file using jquery , but when i try to submit the form ,the form doesn't submit , and also it refresh the page so the file that contain the form that i loaded it disappear. this is my files:

$(document).ready(function() {
 $('#admin_profile').click(function () {
        $('#main').load('profile_admin.php', null, function () {
             $('#addtot').click(function () {
                $('#cont').load('add.php');
            }) 
    });
});
})

my form exist in add.php it's a simple form

 <form method="post" >
      <td><input name="title" type="text"></td>
      <td><textarea name="cont"></textarea></td>
      <input type="submit" name="sendmsg" value="send msg">
</form>

and this is the php that exist in the same file , i mean the form and php code

if(isset($_POST['sendmsg'])){
            $title=mysqli_real_escape_string($connect,$_POST['title']);
            $cont=mysqli_real_escape_string($connect,$_POST['cont']);
            if(empty($title) || empty($cont)) {
                echo "some fields are empty";
            }
            else {
                $qr8=$connect -> query("INSERT INTO msg(title,cont) VALUES ('$title','$cont')") or die($connect->error);
                if($qr8) {
                    echo "success";
                }
            }
        }

what i want is when i click on the submit button i want the form to be submit and the message success or some fields are empty to show up on the same div where i the file is loaded,

Submitting a form works the same whether it was loaded statically or added dynamically. — Barmar, Apr 11 '14 at 23:56
i don't really know but i think it's necessary because i loaded a couple file . — user3504605, Apr 12 '14 at 00:01
None of the signatures for `.load()` in the jQuery documentation mention using `null` as the argument. You just leave out the arguments you don't want to include, like the `data` argument. — Barmar, Apr 12 '14 at 00:04
you say that a form works the same whether it was loaded , i don't think so , because i did a little search and i found a lot of people that are using a form with load() has the same problem — user3504605, Apr 12 '14 at 00:04
There are OTHER things that work differently, such as adding event handlers. But if you're just submitting the form by clicking on its submit button, that works exactly the same. — Barmar, Apr 12 '14 at 00:07
What file is the PHP you showed in? It should be in the file that contains the `load()` code, not `add.php`. — Barmar, Apr 12 '14 at 00:09
I mean if you did something like `$("input[name=sendmsg]").click(function()...)`, you would have to do something different. — Barmar, Apr 12 '14 at 00:10
but how can i submit the form using *$("input[name=sendmsg]").click(function()...)* and how can i receive message success from php. — user3504605, Apr 12 '14 at 00:13
If you need to submit the form using AJAX, use event delegation. See http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Apr 12 '14 at 00:14

score 0 · Answer 1 · answered Apr 12 '14 at 00:13

0

I guess the PHP you showed is in add.php. So you need to change the form to:

<form method="post" action="add.php">
    ...
</form>

If a form doesn't have an action attribute, it uses the URL of the current document. When the form is loaded with Javascript, that's the document that did the loading, not where it pulled it from.

answered Apr 12 '14 at 00:13

Barmar

741,623
53
500
612

Isn't that the page that contains the PHP that processes the form? You said it's in the same file. – Barmar Apr 12 '14 at 00:20
Your question says you want to submit the form. It doesn't say you want to use AJAX, so I assumed you wanted to do normal form submission. If you want something else, you need to clarify the question. If you're trying to use AJAX, show the AJAX code. – Barmar Apr 12 '14 at 00:22
yes it is, but i leaded it in a div of another page index.php so when i click on button in index.php the form loaded but when i use action="add.php" it leave index.php and take me to add.php . what i want is to stay in index.php – user3504605 Apr 12 '14 at 00:25
That's not how form submission works. It always loads the page you're submitting to. If you don't want to load that page, it should return a redirect, or you should use AJAX. – Barmar Apr 12 '14 at 00:30
all what i want is to submit the form and stay in the same page . i don't know how to do that , using ajax or jquery it doesn't matter . – user3504605 Apr 12 '14 at 00:30
this is my last comment sorry about that ,comments are limited in here i guess so thanks for your help , the problem is that i don't know how to do that using AJAX . if you know please show me how, – user3504605 Apr 12 '14 at 00:34
That's more involved than I'm interested in getting. There are many tutorials on using AJAX. There's also a helpful plugin: http://malsup.com/jquery/form/ – Barmar Apr 12 '14 at 00:36

How to submit a form that is loaded using jquery

1 Answers1