How to submit a form on a link click using jquery?

Question

I'm working on a web search form which will return images and web results when they click on the link on top of the form.

So I tried to trigger the form on a link click. Example: If they click image then am trying to submit the form with the image as an option. On the link click I am able to create the hidden input, but the submit itself is not triggered.

Without hidden input I also tried the jQuery("#web_form").submit(); which is not trigerring.

HTML & FORM

<span class="web"><a href="#">Web</a></span><span class="image"><a href="#">Image</a></span>

<form method="post" id="web_form" action="<?php echo $_SERVER['PHP_SELF'];?>">  

<input type="submit" value="Search" name="submit"/>
 <?php            
            if (isset($_POST['submit'])) 
            {
                $option = $_POST['searchoption'];
                //perfoming statement based on option
            }
               ?>
    </form>

jQuery

jQuery(document).ready(function(){

jQuery('.web').click(function () {
  var option  = jQuery("<input type='hidden' name='searchoption'/>");
  option.val(jQuery(this).attr("class"));
  jQuery("#web_form").append(option).submit();  
  return false;
});
});

What is wrong in here?

NOTE: Am trying this in wordpress does that make any sense?

EDIT after question posted

   jQuery(document).ready(function(){    
    jQuery('.web').click(function () {
      var option  = jQuery("<input type='hidden' name='searchoption'/>");
      option.val(jQuery(this).attr("class"));
      jQuery("#web_form").append(option).submit();  
      return false;
    });
     $( "#web_form" ).submit(function( event ) {
          alert( "Handler for .submit() called." );
     });
    });

I tried the above to make sure whether the form is submitted or not, when i click the link i'm getting the Handler for .submit() called. alert message. It seems to work the submit event but it is not submitting to external url in action field as well <?php echo $_SERVER['PHP_SELF'];?> in action.

What is going on here? Any idea would be helpful.

Answer 1

如果您将提交输入的名称更改为“提交”以外的其他名称，则它应该可以工作（在Chrome中测试）：

<input type="submit" value="Search" name="mysubmit"/>