CODEWITHSUNDEEP
jqueryhtml
Ramil Huseynov
Ramil Huseynov

Reputation: 118

How to submit <form> from loaded page?

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>

Upvotes: 1

Views: 115

Answers (3)

Mohammed Elshennawy
Mohammed Elshennawy

Reputation: 967

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

  1. 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">

  1. 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>
// -----------------------------------------------------

Upvotes: 0

Ahsan Aziz Abbasi
Ahsan Aziz Abbasi

Reputation: 168

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
    });
});

Upvotes: 0

Suchit kumar
Suchit kumar

Reputation: 11859

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....
});

Upvotes: 1

Related Questions