CODEWITHSUNDEEP
jqueryformshtml
SophieV
SophieV

Reputation: 13

Jquery form not working when inside a div

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

Upvotes: 0

Views: 1695

Answers (3)

dux0r
dux0r

Reputation: 89

Turns out there was an unrelated HTML "error" causing the form to not be submitted in I.e. After fixing it the initial code and the suggestions both work.

Upvotes: 0

Leonardo Meurer
Leonardo Meurer

Reputation: 46

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>

Upvotes: 0

Leonardo Meurer
Leonardo Meurer

Reputation: 46

First of all, you have a unclosed form. Put </form> in the end of your form DataToDB.

<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>

Second, try to use .submit function:

$("#DataToDB").submit(function() {

When you click on Submit button you'll see the alert.

Upvotes: 1

Related Questions