Home/ Questions/Q 603729
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T16:57:46+00:00

im loading a external page from flowplayer overlay and im trying to submit a

  • 0

im loading a external page from flowplayer overlay and im trying to submit a form in that page via ajax, and its reloading the page.

when i browse the file directly it works fine but when its in the overlay it reloads the page on submit.

is there anything to configure that it will load the jquery file and submit via ajax?

thanks

this is the 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 the exact code and it has the ready 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It appears to be caused by having the jQuery code invoked before the HTML is ready.

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

    Alternately, you can use the jQuery .ready() method to delay execution.

    <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: I’d wrap all the javascript in the document ready function so that it delays execution until the DOM is ready. I cannot test further without the mailto_friend.cfm file.

    <!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>
    • 0