tags:

views:

68

answers:

4

Hello,

I have 1 main search form with a submit button and several secondary search forms with submit buttons.

What I would like to do is when I enter text and click on the submit button of the main search form, the same text gets copied in all of the secondary search forms and all the submit buttons of the secondary search forms get automatically hit.

The HTML code for the mains earch form is shown below:

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

One of the several secondary search forms is shown below:

<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"/&gt;
</form>

Notice the php code that I put in the "value" field of the secondary search form:

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

This automatically copies the text that I entered in the main search form into the secondary search form. I thus figured out how to do that.

The problem is to "simulate" an "Enter" keystroke or a click on the "GO" button with the mouse on the secondary search form when the user hits the Enter key or hits the "SEND" button with the mouse on the main search form.

Thank you for your insight!

A: 

Take a look at the submit() event in jQuery. That is going to be your key.

I am assuming that you are planning on submitting via ajax? Otherwise it is futile.

So you could do something like this-

Give all of your forms a certain class, let's call it 'ajax_search_forms'. So now you can actually hook into the submit event.

$('.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;
});
Brandon Hansen
Brandon,I am not sure I understand what you are saying. Could you please tell me exactly what I need to do in detail? Do I want to add class="ajax_search_forms" to the HTML FORM tag?Is the above code javascript code? I surrounded it with <script type="text/javascript"> and </script> and that did not do anything...Thanks for some additional details! :)
The above code is JS code, built on top of the jQuery library, which you would need to download and include in your site. Then you would need to add the ajax_search_forms class to all of your forms. Then submitting the form will trigger all form submissions.
Brandon Hansen
A: 

I'm not sure what the point of that would be, It looks like all of these are search forms all pointing to different sites. Web browsers won't allow that. They can navigate to one page at a time. When you post a form to a page you are navigating to that page. Therefore, you are trying to navigate to several pages at once. It's like trying to be in Paris and London at the same time. I don't see how your plan will work the way you're describing it.

That said, You can use client-side javascript to call

document.forms[0].submit();

so if you can come up with a plan that does not involve trying to have the user see all the different search results in one window, you could try this on your first form...

<form action="query.php" method="get" onSubmit="document.forms(1).Submit();">
David Stratton
Hi David,The point is to submit the search text to different web sites automatically. So from the main search box, the user types in the text and click on the submit button or hits enter.Then this text string gets automatically sent to several web sites using their own secondary search forms.I tried your code and it does not simulate either an "enter" keystroke or a mouse click on the secondary search forms.Can you please further explain?
A: 

You should use AJAX (JQuery) as Brandon Suggested. Read http://docs.jquery.com/Events/submit

Example:

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

  <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>
Hrishi
A: 

Thanks a lot! This worked!