单击一下即可触发多个搜索表单?

时间:2009-09-12 05:25:06

标签: forms submit

我有一个带有提交按钮的主搜索表单和几个带提交按钮的辅助搜索表单。

我想要做的是当我输入文本并点击主搜索表单的提交按钮时,相同的文本会被复制到所有辅助搜索表单中,并且辅助搜索表单的所有提交按钮都会自动获得击中。

主电源表格的HTML代码如下所示:

<form action="query.php" method="get">
Search: <input type="text" name="item" size="30">
<input type="submit" value="send">
</form>

以下显示了几种辅助搜索表单之一:

<FORM action="http://www.dpbolvw.net/interactive" method="GET" target="_blank">
<div style="float: left; padding: 0 3px 0 0;">
<INPUT type="text" name="src" size="9"
value="<?php
$input = $_GET['item'];
echo $input;?>"                                     style="width: 110px; height: 22px;margin:0; padding: 0; font-size:140%;">
</div>

<div style="float: left; padding: 0 3px 0 0;">
<input type="image" name="submit" value="GO"                            src="http://images.guitarcenter.com/Content/GC/banner/go.gif"
alt="Search" style="font-size:140%">
/div>

<input type="hidden" name="aid" value="1234"/>
<input type="hidden" name="pid" value="1234"/>
<input type="hidden" name="url" value="http://www.guitarcenter.com/Search/Default.aspx"/>
</form>

请注意我在辅助搜索表单的“值”字段中输入的php代码:

<?php
$input = $_GET['item'];
echo $input;?>

这会自动将我在主搜索表单中输入的文本复制到辅助搜索表单中。因此,我想出了如何做到这一点。

当用户点击Enter键或点击鼠标“SEND”按钮时,问题是“模拟”“Enter”击键或点击“GO”按钮,鼠标在辅助搜索表单上主要的搜索表单。

感谢您的见解!

3 个答案:

答案 0 :(得分:0)

看看jQuery中的submit()事件。这将成为你的关键。

我假设你打算通过ajax提交?否则它是徒劳的。

所以你可以这样做 -

将所有表单赋予某个类,我们称之为'ajax_search_forms'。所以现在你可以实际挂钩到提交事件。

$('.ajax_search_forms').submit(function(){
   var search_string = $('input[name=src]').val();
   $('.ajax_search_forms').each(function(){
     $.ajax({
        url : $(this).attr('action'),
        data : 'search_string=' + search_string,
        success : function(html){
          // Do something with the result
        }
     });
   });

   // Return false is VERY important so that the form submission does not continue
   return false;
});

答案 1 :(得分:0)

我不确定这是什么意思,看起来所有这些都是指向不同网站的搜索表单。 Web浏览器不允许这样做。他们可以一次导航到一个页面。当您将表单发布到页面时,您将导航到该页面。因此,您尝试一次导航到多个页面。这就像试图同时在巴黎和伦敦。我不明白你的计划将如何按照你的描述方式运作。

那就是说,你可以使用客户端javascript来调用

document.forms[0].submit();

因此,如果您能够制定一个不涉及让用户在一个窗口中看到所有不同搜索结果的计划,您可以在第一个表单上尝试此操作...

<form action="query.php" method="get" onSubmit="document.forms(1).Submit();">

答案 2 :(得分:0)

你应该使用AJAX(JQuery)作为Brandon Suggested。阅读http://docs.jquery.com/Events/submit

示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

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

//Do you stuff here like triggering other submits
//Like:
$("input#submit2").click();
$("input#submit3").click();

      return false;
    });

  });
  </script>
</head>
<body>
 <form action="javascript:alert('success!');">
    <div>
      <input type="text" />
      <input type="submit" id="submit" />
    </div>
  </form>

 <form >
    <div>
      <input type="text" />
      <input type="submit" id="submit2" />
    </div>
  </form>

 <form >
    <div>
      <input type="text" />
      <input type="submit" id="submit3" />
    </div>
  </form>

</body>
</html>