I need to have my html attribute submit a form. My problem is that a normal button attribute is able to use the type="submit" and other attributes using role="button" don't do anything with the type.

So how do I make it submit a form? If you can give me a script to do it, that would be fine too.

(I don't know javascript myself)

My current code:

<form action="myloc" method="post">
   <div class="input-group col-lg-6">
      <a type="submit" class="btn btn-default input-group-addon" role="button">
        Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
      </a>
      <input type="search" class="form-control" name="search" id="search" placeholder="Search">
   </div>
</form>

I need to have my html attribute submit a form. My problem is that a normal button attribute is able to use the type="submit" and other attributes using role="button" don't do anything with the type.

So how do I make it submit a form? If you can give me a script to do it, that would be fine too.

(I don't know javascript myself)

My current code:

<form action="myloc" method="post">
   <div class="input-group col-lg-6">
      <a type="submit" class="btn btn-default input-group-addon" role="button">
        Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
      </a>
      <input type="search" class="form-control" name="search" id="search" placeholder="Search">
   </div>
</form>

• javascript
• html
• forms
• button
• submit

• Sorry the code block didn't show – Drogebot Commented Oct 20, 2016 at 20:57

3 Answers 3

If I understand you correctly you want to submit the form when you press the button using javascript?

<form id="test" action="myloc" method="post">
  <div class="input-group col-lg-6">
    <a type="submit" class="btn btn-default input-group-addon" role="button" onclick="document.getElementById('test').submit();">
      Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    </a>
    <input type="search" class="form-control" name="search" id="search" placeholder="Search">
  </div>
</form>

Notice that what I did was to set an id ("test") on the form and then added an onclick event to the anchor element.

Here is your solution,

<form action="myloc" method="post" id="myForm">
  <div class="input-group col-lg-6">
    <a type="submit" class="btn btn-default input-group-addon" role="button" id="sub">
    Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    </a>
    <input type="search" class="form-control" name="search" id="search" placeholder="Search">
  </div>
</form>

Javascript code

var button=document.getElementById('sub');
button.onclick=function(){
     document.getElementById("myForm").submit();
}

Give your <a> element an id, then set a jquery onclick function with that id to run whatever query you want.