html - スパンを入力要素として扱います

Question

スパンを使用して入力をトリガーすることは可能ですか？

例えば

<div class='btn'>
    <span type="submit" aria-hidden="true" data-icon="&#xe000;"></span>
</div>

やみくもに明らかなものが欠けているかもしれませんが、基本的には送信ボタンとしてアイコンフォントを使用したいだけです。

ありがとう！

Answer 1

フォームをお持ちの場合は、お電話くださいmyform.submit()

<form name="myform" method="post" action="action.php">
    <div>
        <label for="email">E-Mail</label>
        <input type="text" id="email" name="email"/>
    </div>
    <div class="btn">
        <span aria-hidden="true" data-icon="&#xe000;" onclick="myform.submit()">Submit</span>
    </div>
</form>

Answer 2

置くことはできませんがtype="submit"、クリックするといくつかのJavascriptコードを実行できます。

JQuery

<span id="mySpan"> </span>

$("#mySpan").click(function(){

    //stuff here

});

Javascript

<span id="mySpan" onclick="MyClick()"> </span>

function MyClick()
{

  //stuff here

}

送信ボタンとして機能するSPAN

<input type="text" id="usernameInputField />
<input type="email" id="emalInputField />
<span id="mySpan" onclick="Register()"></span>

今Javascriptで..

function Register()
{
   //First you need to do some validation
   var username = document.getElementById("usernameInputField").value;
   var email = document.getElementById("emailInputField").value;
   //Password, Gender, etc...
   //Then start doing your validation the way you like it...
   /*if(password.length<6)
     {
         alert("Password is too short");
         return false;
     }
   */
   //Then when everything is valid, Post to the Server
   //This is a PHP Post Call
   $.post("Register.php",{ username:username,email:email } ,function(data) {
       //more codes
   });
}

Answer 3

オラフの答えはアリの答えよりも簡単だと思います。ただし、Olafのソリューションを使用するときに、phpスクリプトでフォームが送信されたかどうかを確認する場合は、わずかな問題があります。

この問題を回避するには、フォームが送信されたことを確認するために非表示の入力を追加するだけです。

<form name="myform" method="post" action="action.php">
    <div>
        <label for="email">E-Mail</label>
        <input type="text" id="email" name="email"/>
        <input type="hidden" id="gustav" value="1"/>
    </div>
    <div class="btn">
        <span aria-hidden="true" data-icon="&#xe000;" onclick="myform.submit()">Submit</span>
    </div>
</form>

if($_POST['gustav']){ ...次に、PHPで、フォームが送信されたことを確認するために探します。

そうすれば、1つのページに複数のフォームを作成できます。これらはすべて同じphpスクリプトによって収集され、Olafのソリューションを使用して送信をトリガーします。