Question

是否可以使用跨度来触发输入？

e.g。

<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>

然后，在您的PHP中，只需查找if($_POST['gustav']){ ...即可确认表单已发送。

这样，你可以在一个页面上拥有多个表单，所有表单都由同一个php脚本收集，仍然使用Olaf的解决方案来触发提交。

将跨度视为输入元素

3 个答案: