HTML form submission not working

Question

I have created a html ctuff which is having a form sumbission. The html is ececuting correctly but the problem is that the form submission is not working.

My code is given below

Can anyone please tell me some solution for this

JSFiddle

<form method="get" name="search" action="/myaction">
 <ul class="nav pull-right search-options"
 style="margin-bottom: 0px; margin-top: 7px; !important">
 <li> 
 <div class="input-box" style="height: 30px;">
 <input class="search-box" id="typeahead" data-provide="typeahead" data-items="4" autocomplete="off" data-source='["apple", "animal"]' name="query" placeholder="Search..." type="text" style="margin-bottom: 0px; width: 8em !important;" />
 </div>
 </li>
 <li class="dropdown user" style="line-height: 0px !important;">
 <div class="btn-group" style="margin-top: 0px">
 <a href="javascript:void(0);" class="dropdown-toggle search" data-toggle="dropdown" data-close-others="true" style="padding-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 0px;">
 <button class="btn search-option" style="height: 30px; padding-top: 5px; margin-top: 0px; width: 8em !important">
 <span class="search-selection">Test</span> <span class="caret"></span>
 </button>
 </a>
 <ul class="dropdown-menu dropdown-menus" style="min-width: inherit;">
 <li><a href="javascript:void(0);" style="padding-right: 13px;">Test1</a></li>
 <li><a href="javascript:void(0);" style="padding-right: 13px;">Test2</a></li>
 <li><a href="javascript:void(0);" style="padding-right: 13px;">Test3</a></li>
 <li><a href="javascript:void(0);" style="padding-right: 13px;">Test4</a></li>
 </ul>
 </div>
 </li>
 <li class="search-button" style="line-height: 0px !important;">
 <div class="btn-group" style="margin-top: 0px">
 <button type="submit" class="btn blue" data-toggle="dropdown" style="padding-top: 5px; padding-bottom: 5px;"> <span class="icon-search"></span>Submit</button>
 </div>
 </li>
 </ul>
 </form> 

• Wasiq Muhammad: refer to your php file.I hope this can work out
• r2_d2: action="./myaction"

Answer 1

If you want to check why it is not working
please follow this steps.
Pass full url OR leave blank for same page action.
If you want to check in same page
1) give name to submit button
<button type="submit" name="submit-button" class="btn blue" data-toggle="dropdown" style="padding-top: 5px; padding-bottom: 5px;"> <span class="icon-search"></span>Submit</button>
2) Write this code before start html tag
<?php
if(isset($_GET["submit-button"]))
{
echo "Success";
}
?>

Answer 2

Not sure because I can't see the php page but your missing a dot for the action address.

Answer 3

Your form action does not have valid path refer it to that file that contains server side code

• Wasiq Muhammad: you can do this action="./myaction.php"

Answer 4

Try this:

<form method="get" action="./myaction.php">
 <ul class="nav pull-right search-options"
 style="margin-bottom: 0px; margin-top: 7px; !important">
 <li> 
 <div class="input-box" style="height: 30px;">
 <input class="search-box" id="typeahead" data-provide="typeahead" data-items="4" autocomplete="off" data-source='["apple", "animal"]' name="query" placeholder="Search..." type="text" style="margin-bottom: 0px; width: 8em !important;" />
 </div>
 </li>
 <li class="dropdown user" style="line-height: 0px !important;">
 <div class="btn-group" style="margin-top: 0px">
 <a href="javascript:void(0);" class="dropdown-toggle search" data-toggle="dropdown" data-close-others="true" style="padding-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 0px;">
 <button class="btn search-option" style="height: 30px; padding-top: 5px; margin-top: 0px; width: 8em !important">
 <span class="search-selection">Test</span> <span class="caret"></span>
 </button>
 </a>
 <ul class="dropdown-menu dropdown-menus" style="min-width: inherit;">
 <li><a href="javascript:void(0);" style="padding-right: 13px;">Test1</a></li>
 <li><a href="javascript:void(0);" style="padding-right: 13px;">Test2</a></li>
 <li><a href="javascript:void(0);" style="padding-right: 13px;">Test3</a></li>
 <li><a href="javascript:void(0);" style="padding-right: 13px;">Test4</a></li>
 </ul>
 </div>
 </li>
 <li class="search-button" style="line-height: 0px !important;">
 <div class="btn-group" style="margin-top: 0px">
 <button type="submit" class="btn blue" data-toggle="dropdown" style="padding-top: 5px; padding-bottom: 5px;"> <span class="icon-search"></span>Submit</button>
 </div>
 </li>
 </ul>
 </form>

• user3955666: @AlexMan what are you trying to accomplish, may I ask?
• Alex Man: when I click submit form is not submitting
• user3955666: Have you tried a <input type="submit" class="btn-blue" value="submit">? Instead of <button type="submit" class="btn blue" data-toggle="dropdown" style="padding-top: 5px; padding-bottom: 5px;"> <span class="icon-search"></span>Submit</button> </div>?