Treat a span as input element

Question

Is it possible to use a span to trigger input?

e.g.

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

I may be missing something blindingly obvious but I basically just want to use an icon font as a send button.

Thanks!

A send button? Like to submit a form? You can use JavaScript and bind the click handler to the span. — j08691, Jan 26 '13 at 22:31
You can use javascript to do this; however, why not just use CSS to re-design a normal submit-button instead? — Zar, Jan 26 '13 at 22:32
Hi, because I want to specifically use an icon e.g. a paper plane, that when you click submits the form — SparrwHawk, Jan 26 '13 at 22:36

score 22 · Answer 1 · answered Jan 26 '13 at 23:06

If you have a form, you can just call 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>

Ali Bassam · Accepted Answer · 2013-01-26T23:12:46.830

10

You can't put type="submit" , but you can execute some Javascript codes when you click on it.

JQuery

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

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

    //stuff here

});

Javascript

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

function MyClick()
{

  //stuff here

}

SPAN working as a Submit Button

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

Now in 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
   });
}

edited Jan 26 '13 at 23:12

answered Jan 26 '13 at 22:33

Ali Bassam

9,691
23
67
117

Ok I'll look up how to initiate a submit with jQuery. The existing input code looks like this – SparrwHawk Jan 26 '13 at 22:40
@SparrwHawk For this you need to use JQuery's Post, http://api.jquery.com/jQuery.post/ – Ali Bassam Jan 26 '13 at 22:41
Thanks Ali, can you give an example for a submit button? – SparrwHawk Jan 26 '13 at 22:48
@SparrwHawk I provided an example, I hope this is what you asked for. Check these http://stackoverflow.com/questions/1200266/submit-a-form-using-jquery - http://stackoverflow.com/questions/5004233/jquery-ajax-post-example – Ali Bassam Jan 26 '13 at 23:00

score 4 · Answer 3 · edited Apr 08 '16 at 03:59

I guess Olaf's answer is simpler than Ali's. But there is a slight problem when you wish to verify if the form has been submitted, in your php script, when using Olaf's solution.

To circomvent this problem, just add a hidden input to confirm the form's been sent.

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

Then, in your PHP, just look for if($_POST['gustav']){ ... to confirm the form has been sent.

That way, you can have multiple forms on one page, all gathered by the same php script, still using Olaf's solution to trigger the submit.

Treat a span as input element

3 Answers3