Jquery overlay ajax form post

Question

Jquery overlay ajax form post

im loads the external page from the flowplayer overlay and im tries to submit the form on this page via ajax and reload the page.

when I view the file directly, it works fine, but when it is in the overlay, it reloads the page when it is sent.

is there anything to configure jquery file upload and send via ajax?

thank

this is code

<html>
<head>

<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
$(function(){
 $("#JqAjaxForm").submit(function(){
    dataString = $("#JqAjaxForm").serialize();

    $.ajax({
    type: "POST",
    url: "mailto_friend.cfm",
    data: dataString,
    dataType: "json",
    success: function(data) {

        if(data.email_check == "invalid"){
            $("#message_ajax").html("<div class='errorMessage'>Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.</div>");
        } else {
            $("#message_ajax").html("<div class='successMessage'>" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".</div>");
        }

    }

    });

    return false;            

    }); 
 });
 </script>
 </head>
 <body>
<form id="JqAjaxForm">
 <fieldset>
 <legend>jQuery.ajax Form Submit</legend>
 <p><label for="name_ajax">Name:</label><br />
 <input id="name_ajax" type="text" name="name_ajax" /></p>
<p><label for="email_ajax">E-mail:</label><br />
<input id="email_ajax" type="text" name="email_ajax"  /></p>
<p> <input type="submit" value="Submit" /></p>
</fieldset>
</form>
<div id="message_ajax"></div>
</body>
</html>

this is exact code and it has a ready-made function

<div id="result">
<form id="testForm" >my data
</form> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> 
$(document).ready(function() {
$("#testForm").submit(sendForm)
});

function sendForm() {
$.post('mypage.cfm',$("#testForm").serialize(),function(data,status){
    $("#result").html(data);
         return false;

});
 return false;
}

</script>

+3

jquery coldfusion overlay

loo Feb 16 '10 at 3:57

source share

1 answer

Dan Sorensen · Accepted Answer · 2010-02-16T15:31:16+0000

It seems that this is because jQuery code is called before the HTML is ready.

If you move your script to the bottom of the HTML file, it will work fine.

jQuery.ready() .

<html>
<head>
</head>
<body>
<form id="JqAjaxForm">
    <!-- your form -->
</form>
<div id="message_ajax"></div>

<!-- javascript should be loaded at the bottom of the page for best results -->
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
$(function(){
    $("#JqAjaxForm").submit(function(){
    // your script code
    return false;            

    }); 
});
</script>
</body>
</html>

UPDATE: javascript , , DOM . mailto_friend.cfm.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>

<div id="result">
<form id="testForm">
From: <input type="text" name="from"><br/>
To: <input type="text" name="to"><br/>
Message: <input type="text" name="message"><br/>
<input type="submit" name="send" value="Save" />
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
   $("#testForm").submit(sendForm);

   function sendForm() {
       $.post('mailto_friend.cfm',
           $("#testForm").serialize(),
           function(data,status){
               $("#result").html(data);
       });
   alert("I am working");
   return false;
   }
});
</script>
</body>
</html>

Jquery overlay ajax form post

More articles: