Jquery form not working when inside a div

Question

I've a simple form that send data to a php file, this file updates the database with the data of the form. The form is correctly working when is loaded in a page clicking a href link, but when is loaded with jquery load () in a div (this page is loaded in a div nested in another page), the form don't send anymore the data, refreshes the text input or maintain the focus. I've tried with “submit”, “live” and “livequery” and none seem to work when inside that div.

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$('.linkpage').live('click', function(e) {           
    var url = $(this).attr('href');
    $('#main').load(url);
    e.preventDefault();
});

$("form#DataToDB").livequery(function() {
var User = $('#User').attr('value');
var Message = $('#Message').attr('value');
        $.ajax({ 
        type: "POST",  
        url: "updateDB.php",
        data: "User="+ escape(User) +"& Message="+ escape(Message),
        dataType: "html",
        scriptCharset: "utf-8",
        success: function() {
        alert("Message sent");
        }
        });
$("#Message").attr("value", "");
$('input#Message').focus();
return false;
});

});
</script>
</head>

<body>

<div id="menu">
<a href="Page1.php" class="linkpage">Page1</a>
<a href="Page2.php" class="linkpage">Page2</a>
</div>

<div id="main">
</div>

</body>

This is the page (Page1.php or Page2.php) containing the form, nested in the “main” div on the previous page:

<form id="DataToDB" name="DataToDB">
<input type="hidden" name="User" id="User">
<input type="text" name="Message" id="Message">
<input type="submit" name="Send" value="Send">
</form>

Can I ask where the error is in the jquery script?

Thanks in advance

No, that was a typo, I have corrected it. Thanks for remerbering me that. — SophieV

Leonardo Meurer Leonardo Meurer · Accepted Answer · 2011-12-03T16:25:49

Try this code:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"              type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {

$("#DataToDB").submit(function() {
var User = $('#User').attr('value');
var Message = $('#Message').attr('value');
    $.ajax({ 
    type: "POST",  
    url: "updateDB.php",
    data: "User="+ escape(User) +"& Message="+ escape(Message),
    dataType: "html",
    scriptCharset: "utf-8",
    success: function() {
    alert("Message sent");
    }
    });
$("#Message").attr("value", "");
$('input#Message').focus();
return false;
});

});
</script>
</head>

<body>

<div id="menu">
<a href="Page1.php" class="linkpage">Page1</a>
<a href="Page2.php" class="linkpage">Page2</a>
</div>

<div id="main">
<form id="DataToDB" name="DataToDB">
    <input type="hidden" name="User" id="User">
    <input type="text" name="Message" id="Message">
    <input type="submit" name="Send" value="Send">
</form>        
</div>

</body>

Ahhh... simple. Insert this in your Page1.php Page2.php

<form id="DataToDB" name="DataToDB">
<input type="hidden" name="User" id="User">
<input type="text" name="Message" id="Message">
<input type="submit" name="Send" value="Send">
</form>

<script type="text/javascript">

$("#DataToDB").submit(function() {                          
var User = $('#User').attr('value');
var Message = $('#Message').attr('value');

$.ajax({ 
    type: "POST",  
    url: "updateDB.php",
    data: "User="+ escape(User) +"& Message="+ escape(Message),
    dataType: "html",
    scriptCharset: "utf-8",
    success: function() {
    alert("Message sent");
    }
    });
$("#Message").attr("value", "");
$('input#Message').focus();
return false;
});

</script>

Jquery form not working when inside a div

3 Answers