How to submit
from loaded page?

Question

I have a page with the form and I insert html into div. I try to insert button, but after inserting it with help of jquery - submit event of button not works.

<html>
<head>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
</head>
<script>
 $(document).ready(function() {
     console.log("ready!");
     $("#radio").click(function(){
      console.log("radio clicked!");
      
      $.ajax({
       type:'GET',
       url: "content.html",
       success:function(data){
        $("#contentDiv").html(data);  
       },
       error:function(thrownError){
        console.log("error",arguments);
        console.log(thrownError);
       }
      });
     });
 });
</script>
<body>

<form action="page2.html">
<input id="radio" type="radio" name="gender" value="male">Male</input>
<div id="contentDiv"></div>
</form>

</body>
</html>

`###content.html###`
<input type="submit" name="ok">OK</input>

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — JJJ, Jan 11 '17 at 11:51
why are you inserting the button like that? seems very inefficient - why not either hide it if it doesn't exist or just create it rather than doing an ajax call to load it in. Also inputs don't have a closing tag like that — Pete, Jan 11 '17 at 12:56

score 1 · Accepted Answer · edited Jan 11 '17 at 12:06

1

Since you element is created dynamically you need to use on document and target the button (#buttonId" or .buttonclass).

$(document).on("click", "#buttonId", function(){
/// your code comes here....
});

edited Jan 11 '17 at 12:06

Super User

9,448
3
31
47

answered Jan 11 '17 at 11:53

Suchit kumar

11,809
3
22
44

score 0 · Answer 2 · edited Jan 11 '17 at 12:13

try this

<form method="POST" id="login_form">
//form goes here
    <input type="submit" value="Submit" name="submit" class="submit" id="submit" />
</form> 


$(function() { //shorthand document.ready function
    $('#login_form').on('submit', function(e) { //use on if jQuery 1.7+
        e.preventDefault();  //prevent form from submitting
        var data = $("#login_form :input").serializeArray();
        console.log(data); //use the console for debugging, F12 in Chrome, not alerts
    });
});

score 0 · Answer 3 · answered Jan 11 '17 at 12:22

you have two events to handle depend on your preference:-

handle the form submit it self

$(document).ready(function() {
console.log("ready!");
$("#radio").click(function(){
    console.log("radio clicked!");

    $.ajax({
        type:'GET',
        url: "content.html",
        success:function(data){
            $("#contentDiv").html(data);        
        },
        error:function(thrownError){
            console.log("error",arguments);
            console.log(thrownError);
        }
    });
});
 // -----------------------------------------------------
//add this if you want to handle form submit
$( "#formId" ).submit(function( event ) {
alert( "Handler for .submit() form called." );
//event.preventDefault();
});
 // -----------------------------------------------------
});

give the form any id

   <form action="page2.html" onsubmit='alert("submit");' id="formId">

or handle the click event of the input type submit by updating the content.html

<input type="submit" name="ok">OK</input>
// -----------------------------------------------------
<script>
  $( "input[name=ok]" ).click(function() {
  //put here you submit logic

});
</script>
// -----------------------------------------------------

How to submit from loaded page?

3 Answers3

How to submit
from loaded page?