✔ jQuery .submit() funktioniert innerhalb von Event nicht

Maniac

Maniac

Erfahrenes Mitglied
Entweder ich seh den Wald vor lauter bäumen nicht, oder jQuery bringt mich noch zur Verzweiflung...

Ich möchte bei einem Klick auf einen "image-Button" das das Form abgesendet wird und der Button komplett weg ist.
Soweit zur Theorie:
HTML: 
$(document).ready(function()
{
        // wenn ich auf den Link klicke, dann wird das Formular gesendet!
	$('#link').click(function(){
		$('#Form').submit();
	});


	
   $('#export').click(function(){
	   
           // Hier wird, egal was ich verwende, das Formular nicht gesendet!
	   //$(this).parent('form').submit();
	   $('#Form').submit();
	   
	   $(this).remove();
	   
   });
});

</script>
</head>
<body>
<!-- TestLink -->
<a id="link" href="javascript:void(0);">Linkzumsenden</a>

<br />

<form id="Form" method="post">
	<input type="hidden" name="image1_hidden" value="senden"  />
	<input type="image" name="image1" value="senden" id="export" />
</form>
 
Hast du schon mal ein bisschen Debugging dazu betrieben?
Wird der Eventhandler überhaupt ausgeführt?
Was sagt die Fehlerkonsole?
 
Ja der Event wird natürlich ausgeführt, habs mit alerts auch getestet.
Auch das entfernen des Button funktioniert tadellos, nur der submitt wird nicht ausgeführt.

Wenn ich anstatt des Buttons einen Link ins Formular packe, dann funktioniert es auch:
HTML: 
<!DOCTYPE html>
<html>
<head>
<title></title>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function()
{
	$('#link').click(function(){
		$('#Form').submit();
	});


	
   $('#export').click(function(){
	   
	   //$(this).parent('form').submit();
	   $('#Form').submit();
	   
	   $(this).remove();
	   
   });
});

</script>
</head>
<body>
<?php 
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>


<a id="link" href="javascript:void(0);">Linkzumsenden</a><br />
<form id="Form" method="post">
	<input type="hidden" name="image1_hidden" value="senden"  />
	<!-- <input type="image" name="image1" value="senden" id="export" /> -->
	<a id="export">senden</a>
</form>
</body>
</html>
 
Das Problem scheint wohl irgendwie mit der .remove()- bzw. .detach()-Anweisung zu tun zu haben.
Wenn man diese nämlich weglässt im Eventhandler des Image-Buttons, wird das Formular abgeschickt.
Vielleicht reicht dir auch ein .hide() am Button anzuwenden?!
 
Das komische ist das es nur beim Button so ist, den Link kann ich auch ohne Probleme removen und es wird abgeschickt.
Ein .hide() reicht leider nicht aus, sonst würde ich es ja so verwenden.
 
1. Ein image-button sendet bereits das Formular ab (genau wie type=submit)
2. Dem Browser scheint es nicht zu schmecken, dass du ihm vor dem Absenden den Button klaust.

Javascript: 
var btn = $('#export').click(function() {
    setTimeout(function() {
        btn.remove();
    });
});
 
CPoly hat gesagt.:
1. Ein image-button sendet bereits das Formular ab (genau wie type=submit)
2. Dem Browser scheint es nicht zu schmecken, dass du ihm vor dem Absenden den Button klaust.

Javascript: 
var btn = $('#export').click(function() {
    setTimeout(function() {
        btn.remove();
    });
});
Zum Vergrößern anklicken....

Hi CPoly,

Wie die Buttons funktionieren ist mir bekannt, aber ich kann leider keine Verzögerung des entfernens vom Button machen. Dieser soll sofort nach klick verschwinden (nicht nur verstecken).

Mir ist aber Schleierhaft warum es mit dem Link geht...
Es sollte doch normal irrelevant sein ob es ein Button oder ein Link ist:

HTML: 
<a href="javascript:void(0);" id="export">senden</a>

<input type="image" value="senden" id="export" name="senden" />

Beides reagiert auf den "click-Event", beide werden auch entfernt, aber nur beim Link wird das Formular abgeschickt.

Edit: kleiner Nachtrag: Es funktioniert wie gewollt im IE, im aktuellen FF nicht.
 
Zuletzt bearbeitet:
Wenn du den Button außerhalb des Formulars platzierst, funktioniert es. Mit der .preventDefault()-Methode hatte ich allerdings auch keinen Erfolg ...
 
Hi Erik,

Siehe meinen Edit im vorigen Beitrag.
Aktuelles Script:
HTML: 
<!DOCTYPE html>
<html>
<head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

function send()
{
	$('#Form').submit();
}

$(document).ready(function()
{
	$('#link').click(function(){
		$('#Form').submit();
	});


	
   $('#export').click(function(){
	   $(this).remove();
	   $('input:hidden').removeAttr('disabled');
	
	   setTimeout('send()', 2000);	   
   });
});

</script>
</head>
<body>
<?php 
if(isset($_POST['image1_hidden']))
{
	echo "<pre>";
	print_r($_POST);
	echo "</pre>";
}
?>

<form id="Form" method="post">

	<input type="hidden" name="image1_hidden" value="senden" disabled="disabled"  />
	
	<input type="image" name="image1" value="senden" id="export" />
</form>
</body>
</html>

Funktioniert im IE, leider im FF nicht.
 
Jetzt wo ich darüber nachdenke, ist dein Vorhaben etwas unschlüssig. Wenn das Formular abgesendet wird, wird die Seite neu geladen und der Button ist wieder da. Er ist also je nach Dauer des Absendens nur einen kurzen Augenblick nicht da.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück