Problem with calling $ajax function

I have a problem calling an ajax script from a div id.

When I go directly to site.com/page.php and click on the id linked to the click event it takes me to a new page that is like site.com/page.php?gm_login_name=&gm_login_pw=&gm_plu_submit=Submit#.

From this page (with the parameters in the URL) if I click submit the ajax is called successfully. The problem is I dont want the user to have to click twice on the div, how can I solve this problem?? any ideas?

$('.out-div').append('<p class="reward"><input type="text" name = "login"/><br/><input type="submit" name="ajax_call" class ="ajax_call"/></form></p>');


$(document).ready(function(){
			
		  $(".ajax_call").click(function(){
											
				  $.ajax({
						
						 url: 'http://localhost/places/password/12345/format/jsonp',
						 dataType: 'jsonp',
						 type: 'GET',
						 success: function(){
							
						  setCookie('user_id',5,7);
						
						
						
						 // window.location.reload(true);
							
						 }

					
					});
			
		  });
							   });

That occurs due to the form being submitted, causes by the input field with the submit type.

If you don’t want such a submit to occur, you can use a button element instead.