Submit Button mit Link ausführen?

tsbmusic

tsbmusic

Erfahrenes Mitglied
Hi Leute,

ich hab auf einer Website gesehen, dass man auch Submit-Buttons mit Links ausführen kann. (http://www.bonjovi.com)

Der Code sieht da so aus:

Code: 
<input type="submit" value="Submit" name="submit" class="action save">
<a href="#submit" class="action submit" style="visibility: visible;">Submit</a>

Ich find aber keine Javascript Angabe dazu. Könnt ihr mir helfen wie man das macht?

Gruss
tsbmusic
 
Das ist durch jQuery möglich. Auf der Seite wird es irgendwo eine Anweisung geben, die in etwa so aussieht:
Code: 
$('.action submit').click(function () {
  $('.action save').submit();
});
 
Und das schreib ich einfach so oder?

Code: 
<script type="text/javascript">
$('.action submit').click(function () {
  $('.action save').submit();
});
</script>

Oder muss ich das noch in eine function setzten?

Edit: Ich habs jetzt mal so ausprobiert es funktioniert aber nicht. Das Formular wird nicht abgesendet. Muss ich das an irgendeine bestimmte Stelle setzen?
 
Zuletzt bearbeitet:
Hi!

Also mit jQuery gehts grundsätzlich so, wenn sich der <script>-tag im <head>-bereich der html-seite befindet:

Code: 
<script>
$(document).ready(function(){ // Sobald der Browser das laden beendet hat mache...
   $(".submit").click(function(){ // Finde HTML-Objekte mit der Klasse "save"
      $(".form").submit();           // Führe ein Submit auf einem Objekt mit der Klasse "form" aus
   }
});
</script>

Das dazugehörige Html-Formular sollte dann ähnlich wie dieses aufgebaut sein:

HTML: 
<form action='script.php' name='form1' class='form'>
<input>
<input>
...
<input type="submit" value="Submit">
</form>

<a href='#' class='submit'>abschicken</a>

Noch ein paar Ergänzungen:

  • Wenn dein jQuery-Selector folgendermaßen aussieht:
Code: 
$('.action save')
, dann würdest du in deinem Fall keine Objekte zur Weiterverarbeitung auswählen. Übersetzt würde nämlich deine Anweisung bedeuten: "Finde alle Objekte mit der Klasse "action" und selektiere in den Unterobjekten alle <save>-Tags."
Die dazugehörige HTML-Struktur würde beispielsweise so aussehen:
HTML: 
<span class='action'>
<save>ich würde selektiert werden</save>
</span>
Da dies aber nicht auf deinen HTML-Code zutrifft, würde jQuery natürlich, wenn überhaupt, die falschen Objekte auswählen.


  • Für solch einfachen Aufgaben jQuery zu verwenden, ist natürlich etwas übertrieben. Mit JavaScript kann man nämlich einfache Funktionen direkt im Link ausführen:
HTML: 
<a href="javascript:document.form1.submit();">abschicken</a>
Wichtig bei dieser Variante ist, dass man beim <form>-Tag das Attribut "name" auf "form1" setzt.
HTML: 
<form name='form1'>...</form>
Selbstverständlich kann dieser frei gewählt werden, wichtig ist aber, dass er mit mit dem im <a href> verwendeten Namen übereinstimmt.



Ich hoffe ich hab dich mit meiner Text-Flut nicht erschlagen ;)

Beste Grüße!
 
Ich hab auf der Bon Jovi Seite noch folgendes gefunden:

jquery-actions.js
Code: 
/* CLIQUE */
/* Actions Pattern Javascript
----------------------------------------------------------------------------- */


	(function($) {
	
	$.fn.cliqueActions = function() {
	
	
/* PRESERVE CHAINING
----------------------------------------------------------------------------- */


		return this.each(function(index) {

			var $this = $(this);
	
/* REPLACE BUTTONS
----------------------------------------------------------------------------- */

			
			if ($this.attr('value') && $this.attr('value') != "Submit") {
			
				var language = $this.attr('value');
			
			} else if ($this.parent().parent().parent().hasClass('signin')) {
			
				var language = "Sign In";
				
			} else if ($this.parent().parent().parent().hasClass('password')) {
			
				var language = "Reset Password";
			
			} else {
			
				var language = "Submit";
			
			}
			
			$this.parent().addClass('submit');			
			$this.after('<a class="action submit" href="#submit">' + language + '</a>');
		

/* SUBMIT FORM
----------------------------------------------------------------------------- */
	
	
			$('a.action.submit').click(function() {
	
				$(this).siblings('input[type=submit]').click();

				// DISABLE SUBMIT ORDER BUTTON AFTER CLICK
				if ($(this).parent().hasClass('emphasis')) $(this).unbind('click').click(function() { return false; });
				
				return false;
				
			});
	
	
/* END PLUG-IN
----------------------------------------------------------------------------- */


		});
	};
	})(jQuery);
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück