web-dev-qa-db-de.com

Wie erstelle ich aus einem <a href...> ... </a> Link ein Submit?

Ich habe ein Bild mit dem Link zu einer anderen Seite mit <a href="..."> <img ...> </a>.

Wie kann ich einen Beitrag so machen, als wäre es ein Button <input type="submit"...>?

javascripthtmlform-submiturl-link
55
fmsf
<input type="image" name="your_image_name" src="your_image_url.png" />

Dies sendet die your_image_name.x und your_image_name.y Werte, während das Formular gesendet wird. Dies sind die x- und y-Koordinaten der Position, an der der Benutzer auf das Bild geklickt hat.

34
Jeremy Ruten

Generischer Ansatz mit JQuery Bibliothek am nächsten () und abschicken () Tasten. Hier müssen Sie nicht angeben, welches Formular Sie senden möchten, sondern das Formular, in dem es sich befindet.

<a href="#" onclick="$(this).closest('form').submit()">Submit Link</a>
111
Paulius Zaliaduonis

Es sieht so aus, als ob Sie versuchen, ein Bild zum Senden eines Formulars zu verwenden. In diesem Fall verwenden Sie <input type="image" src="...">.

Wenn Sie wirklich einen Anker verwenden möchten, müssen Sie Javascript verwenden:

<a href="#" onclick="document.forms['myFormName'].submit(); return false;">...</a>

26
Greg

input type = image erledigt das für Sie.

9
Tim Howland

Ungetestet/könnte besser sein:

<form action="page-you're-submitting-to.html" method="POST">
    <a href="#" onclick="document.forms[0].submit();return false;"><img src="whatever.jpg" /></a>
</form>
7
Shawn
 <html>

 <?php

 echo $_POST['c']." | ".$_POST['d']." | ".$_POST['e'];

 ?>

 <form action="test.php" method="POST">
      <input type="hidden" name="c" value="toto98">
      <input type="hidden" name="d" value="toto97">
      <input type="hidden" name="e" value="toto aaaaaaaaaaaaaaaaaaaa">

      <a href="" onclick="document.forms[0].submit();return false;">Click</a> 
 </form>

</html>


So easy.




So easy.
6
Jiky1

Eine nützliche Ergänzung ist die Möglichkeit, die Post-URL über die zusätzliche Schaltfläche zu ändern, sodass Sie mit verschiedenen Schaltflächen auf verschiedene URLs posten können. Dies kann durch Setzen der Eigenschaft 'action' des Formulars erreicht werden. Hier ist der Code dafür, wenn Sie jQuery verwenden:

$('#[href button name]').click(function(e) {
    e.preventDefault();
    $('#[form name]').attr('action', 'alternateurl.php');
    $('#[form name]').submit();
});

Das action-Attribut hat einige Probleme mit älteren jQuery-Versionen, aber spätestens jetzt können Sie loslegen.

2
Grit

Vergessen Sie nicht das "BUTTON" -Element, das mehr HTML verarbeiten kann ...

1
Pablo Cabrera

Etwas wie diese Seite ?

<!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" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BSO Communication</title>

<style type="text/css">
.submit {
    border : 0;
    background : url(ok.gif) left top no-repeat;
    height : 24px;
    width : 24px;
    cursor : pointer;
    text-indent : -9999px;
}
html:first-child .submit {
    padding-left : 1000px;
}
</style>
<!--[if IE]>
<style type="text/css">
.submit {
    text-indent : 0;
    color : expression(this.value = '');
}
</style>
<![endif]-->
</head>

<body>
    <h1>Display input submit as image with CSS</h1>

    <p>Take a look at <a href="/2007/07/26/afficher-un-input-submit-comme-une-image/">the related article</a> (in french).</p>
    <form action="" method="get">
        <fieldset>
            <legend>Some form</legend>
            <p class="field">
                <label for="input">Some value</label>

                <input type="text" id="input" name="value" />
                <input type="submit" class="submit" />
            </p>
        </fieldset>
    </form>

    <hr />
    <p>This page is part of the <a href="http://www.bsohq.fr">BSO Communication blog</a>.</p>

</body>
</html>
1
VonC

Bei Formularen ersetzen wir die Schaltfläche "Senden" ständig durch diese:

<form method="post" action="whatever.asp">
<input type=...n

<input type="image" name="Submit" src="/graphics/continue.gif" align="middle" border="0" alt="Continue">
</form>

Durch Klicken auf das Bild wird das Formular gesendet. Hoffentlich hilft das!

0
Kateriana