Direktes Absenden eines Formulars verhindern

B

bertiSR

Mitglied
hallo ich habe folgenden code:

HTML: 
<script language="JavaScript" src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" src="script.js"></script>

<form name="form_name">

	<input id="input1" name="input1" type="text" value="" />
	<input id="button" name="button" type="button" value="Abschicken" />

</form>

<div id="message">Yes</div>

Code: 
$(document).ready(function(){

	$("#button").click(function(){
		val1 = ($("#input1").val());
		$.ajax({
			type: "get",
			url: "datei.php",
			data: "value=" + val1,
			success: function(msg){
				$("#message").text("Data loaded: " + msg);
			}
		});
	});

});
In datei.php wird nur ein var_dump($_GET) ausgeführt und wiedergegeben.

Wenn ich im Formular im Textfeld etwas eingebe und danach auf enter drücke, dann wird das Formular automatisch mit get abgesendet. Im Browser erscheint dann url/?input1=WERT.
Wenn ich einen Wert eingebe und danach auf den Button klicke wird das Script ausgeführt.
Was muss ich ändern damit das Formular beim drücken der enter-Taste nicht abgesendet wird und im Browser der get-Wert angezeigt wird, sondern dass das Script genauso wie bei einem Klick auf den Button ausgeführt wird?
 
Hi,

definiere für das Formular einen keydown-Handler, in dem Du bei keyCode 13 (Entertaste) einfach das click-Event des Buttons triggerst:

Code: 
$("form").keydown(function(e) {
   if(e.keyCode == 13) {
      $("#button").trigger("click");
   }
});

LG
 
Komisch, ähnlich ist auch mein aktuelles Problem..Meine Source ist so ziemlich das Selbe wie oben. Bei mir schaltet aber immer das browser-eigene submit, ergo bekomme ich ständig auch ein reload. Wie also schalte ich genau das aus? Eine Form ohne submit eben.

mfg chmee
 
Hi,

hmm, folgender Code funktioniert bei mir einwandfrei:

HTML: 
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#button").click(function(){
      alert("Button geklickt!");
   });
   $("form").keydown(function(e) {
      if(e.keyCode == 13) {
         $("#button").trigger("click");
      }
   });
});
</script>

<form action="michgibtsnicht">
   <input name="feld" type="text" value="" />
   <input id="button" type="button" value="Abschicken" />
</form>

Kannst Du ein Beispiel zeigen, bei dem das auftritt?

LG
 
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>jQuery Beispiel zu Ajax</title>
 <script type="text/javascript" src="./_data/jquery_132.js"></script>
 <script type="text/javascript">
   $(document).ready(function(){
	
	$("#formular").submit(function(e) {
		var tagging = $('#sym').val();
		/* e.preventDefault(); */
		$.post("search.php",{tag:tagging},function(data){$('#content').html(data);});
   		
	});  
   });
</script>
</head>
<body>
	<div id="b_form">	<form id="formular" class="white">
				 <label for="sym" class="dick white">SUCHE NACH</label>
				 <input class="search_field" id="sym" name="sym" value="liebe">
				 <input id="such" class="button" type="submit" value="test" />
				</form>
	</div>
	<div id="content">
		</div>
</body>
</html>
In diesem Beispiel scheint er beide submits zu feuern, wobei ich dachte, ich würde mit der Funktion .submit die interne override'n. Wenn ich die preventDefault dazumache, geht es, aber auch andere Browser-Events wie zB Links sind dann prevent'ed.

mfg chmee
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück