I will preface this by saying my background is Graphic Design (been doing JavaScript for a few years).Ok, I've been looking and looking for a simple tutorial on how to create a basic form with a a controller, that sends the form info in the body of an email.
This is what I have in my GSP:
<g:form name="batchform" url="[action:'forminfo', controller:'onboardingform'] />
<label>Application Group or Area</label>
<g:textField name="apparea01" type="text" placeholder="Place Holder Text Field 1" value='${params.apparea01}' />
<label>Department Name</label>
<g:textField name="deptname02" type="text" placeholder="Place Holder Text Field 2" value='${params.deptname02}' />
<input type="submit" value="Submit Form" id="FormButton" >
<g:form>
And the controller is where I get confused:
package .com
import util.Environment
import MailTools
import MetricsLogger
class OnboardingformController {
String apparea01,
String deptname02
static constraints = {
apparea01 blank: false, nullable: false
deptname02 blank: false, nullable: false
}
def index() {
render (view:'onboardingform.gsp')
}
sendMail {
to 'me#email.com'
cc params.mail
subject 'I am the form test in the subjectline'
body 'i am the body of the form. I should have vars here that display the user input from form fields'
}
}
I do not currently have a DOMAIN set up since there is no DB attached to this site. I just need to shove those Field Inputs into the Email body. I realize this maybe a very basic operation that escapes me (my background is Fine Arts, not Computer Science).
The MailTools is configured already to a default mailbox. The form needs to be send to another email address.
The MetricsLogger captures user info upon landing on the page.
Thanks in advance. This knowledge will open my eyes in my quest to be an Artist / Programmer :)
Ok, I came up with this controller in
grails-app/controllers/test/OnboardingformController.groovy:
package test
class OnboardingformController {
def index() {
render( view: 'onboardingForm.gsp' )
}
def formSubmission( String apparea01, String deptname02, String email ) {
println "Send Mail from $email to me#email.com with apparea01=$apparea01 and deptname02=$deptname02"
/*
// Commented out for now so I don't have to set up mail ;-)
sendMail {
to 'me#email.com'
cc params.mail
subject 'I am the form test in the subjectline'
body 'i am the body of the form. I should have vars here that display the user input from form fields'
}
*/
redirect( action:'index' )
}
}
And this GSP grails-app/onboardingform/onboardingform.gsp:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
<title>Onboarding</title>
</head>
<body>
<g:form action="formSubmission">
<p>
<label>Application Group or Area</label>
<g:textField name="apparea01" type="text" placeholder="Place Holder Text Field 1" value='${params.apparea01}' />
</p>
<p>
<label>Department Name</label>
<g:textField name="deptname02" type="text" placeholder="Place Holder Text Field 2" value='${params.deptname02}' />
</p>
<p>
<label>Email</label>
<g:textField name="email" type="text" placeholder="Place Holder Text Field 3" value='${params.email}' />
</p>
<p>
<input type="submit" value="Submit Form" id="FormButton" >
</p>
</g:form>
</body>
</html>
Which when the form is filled in, should print out the values you entered (to the console) and redirect to the form. Let me know if anything doesn't make sense :-)
If you need validation (without a domain object), you can use a Command Object. This changes the controller to:
package test
class OnboardingformController {
def index() {
render( view: 'onboardingForm.gsp' )
}
def formSubmission( SubmissionCommandObject cmd ) {
if( !cmd.validate() ) {
render( view: 'onboardingForm.gsp', model:[ data: cmd ] )
return
}
else {
println "Send Mail from $cmd.email to me#email.com with apparea01=$cmd.apparea01 and deptname02=$cmd.deptname02"
}
redirect( action:'index' )
}
}
class SubmissionCommandObject {
String apparea01
String deptname02
String email
static constraints = {
apparea01 blank: false, nullable: false
deptname02 blank: false, nullable: false
email blank: false, email: true
}
}
And the view to:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
<title>Onboarding</title>
</head>
<body>
<g:hasErrors bean="${data}">
<g:renderErrors bean="${data}" as="list" />
</g:hasErrors>
<g:form action="formSubmission">
<fieldset>
<p class="prop ${hasErrors(bean:data, field:'apparea01', 'errors')}">
<label>Application Group or Area</label>
<g:textField name="apparea01" type="text" placeholder="Place Holder Text Field 1" value='${data?.apparea01}' />
</p>
<p class="prop ${hasErrors(bean:data, field:'deptname02', 'errors')}">
<label>Department Name</label>
<g:textField name="deptname02" type="text" placeholder="Place Holder Text Field 2" value='${data?.deptname02}' />
</p>
<p class="prop ${hasErrors(bean:data, field:'email', 'errors')}">
<label>Email</label>
<g:textField name="email" type="text" placeholder="Place Holder Text Field 3" value='${data?.email}' />
</p>
<p>
<input type="submit" value="Submit Form" id="FormButton" >
</p>
</fieldset>
</g:form>
</body>
</html>
Obviously, this could be prettier, but will suffice for this quick example
Related
I'm learning java and I'm practicing with thymeleaf. I made an little app where I have a list of persons (arraylist). I can add a person through a form but also edit a person from the list to update the person's firstname, lastname or birthdate through a form. Here is my problem I want when I edit a person to have its default values(firstname, lastname, bithdate) on the update form so that we can then change only the fields of interest. I have this code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Update Person</title>
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}"/>
</head>
<body>
<h1>Update a Person:</h1>
<!-- some tests I made to test if the value appears in the field -->
<!-- <input type="text" name="id" th:value="${person.id}" /> -->
<!-- <input type = "text" name = "firstName" th:value = "${person.firstName}" /> -->
<!-- <input type = "text" name = "sometext" th:value = "hello world" /> -->
<form th:action="#{/updatePerson/{id}(id=${person.id})}"
th:object="${person}" method="POST">
First Name:
<input type="text" th:field="*{firstName}"/>
<br/>
Last Name:
<input type="text" th:field="*{lastName}" />
<br/>
Date of Birth (DD/MM/YYYY):
<input type="date" th:field="*{birthDate}" />
<br/>
ID:
<input type="text" th:field="*{id}" />
<br/>
<input type="submit" value="Update" />
</form>
<br/>
<!-- Check if errorMessage is not null and not empty -->
<div th:if="${errorMessage}" th:utext="${errorMessage}"
style="color:red;font-style:italic;">
...
</div>
</body>
</html>
None of my default values appears in the fields except for the id. Whether I use th:field="{id}" or name="id" th:value="${person.id}". Both synthax work but the others (ie: th:field="{firstName}" or name = "firstName" th:value = "${person.firstName}" same goes for lastname and birthdate), nothing works. I even tried th:value = "hello world" (commented in the above code), it does appear! So why my person firstname, lastname, bithdate don't appear? What is wrong? My person.list html works though:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Person List</title>
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}"/>
</head>
<body>
<h1>Person List</h1>
Add Person
<br/><br/>
<div>
<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th>Edit</th>
<th>Delete Name</th>
</tr>
<tr th:each ="person : ${list}">
<td th:utext="${person.firstName}">...</td>
<td th:utext="${person.lastName}">...</td>
<td th:text="${#temporals.format(person.birthDate,'dd-MM-yyyy')}">...</td>
<td><a th:href="#{/updatePerson/{id}(id=${person.id})}">
<span>
<img src="https://img.icons8.com/clouds/40/000000/edit.png">
</span>
</a></td>
<td>
<form th:action="#{/deletePerson}" th:method="POST">
<input type = "hidden" name = "firstName" th:value = "${person.firstName}" />
<input type = "hidden" name = "lastName" th:value = "${person.lastName}" />
<input type = "hidden" name = "id" th:value = "${person.id}" />
<input type = "hidden" name = "birthDate" th:value = "${person.birthDate}" />
<button type = "submit" >
<span>
<img src="https://img.icons8.com/metro/26/000000/delete.png" />
</span>
</button>
</form>
</td>
</tr>
</table>
</div>
<div>
<form th:action="#{/changeDao}" th:method="POST">
<select name="daoChoice">
<option th:value="none" disabled>Choisissez votre Dao</option>
<option id="jdbc" th:value="JDBC">Jdbc</option>
<option id="memory" th:value="MEMORY" th:selected="${isMemory}">Memory</option>
</select>
<button type="submit">Valider</button>
</form>
</div>
<div>
<form th:action="#{/excelLoad}" th:method="GET">
<button type="submit">Local Load</button>
</form>
</div>
<div>
<form th:action="#{/UploadFile}" method="POST" enctype="multipart/form-data">
<table>
<tr>
<td><label>Upload and Add to the table</label></td>
<td><input type="file" th:value = "file" th:name="file" /></td>
</tr>
<tr>
<td><input type="submit" value="Upload" /></td>
</tr>
</table>
</form>
</div>
<div>
<form th:action="#{/exportToExcel}" th:method="POST">
<button type="submit">Export to Excel</button>
</form>
</div>
</body>
</html>
Above my personList.html, person's firstName lastName and birthdate is printed correctly with this code:
<tr th:each ="person : ${list}">
<td th:utext="${person.firstName}">...</td>
<td th:utext="${person.lastName}">...</td>
<td th:text="${#temporals.format(person.birthDate,'dd-MM-yyyy')}">...</td>
but why in my update form this is not working ?
I'm a newbie in java programming and also in thymeleaf (also newbie), so I'd really appreciate some explanations along some tips! thanks a lot!
I found it with another post where there was a simple explanation about the key/value pair in modelAddAttribute:
You can access variables value by ${key}.
Example
model.addAttribute("key", value);
Understanding that I found my mistake in my controller:
#RequestMapping(value = { "/updatePerson/{id}" }, method = RequestMethod.GET)
public String showUpdatePersonPage(#PathVariable("id") int id, Person person, Model model) {
person = personDao.findPerson(id);
model.addAttribute("person", person);
return "updatePerson";
}
Before it was:
#RequestMapping(value = { "/updatePerson/{id}" }, method = RequestMethod.GET)
public String showUpdatePersonPage(#PathVariable("id") int id, Person person, Model model) {
person = personDao.findPerson(id);
model.addAttribute("personToModify", person);
return "updatePerson";
}
And in my html the code was:
<form th:action="#{/updatePerson/{id}(id=${person.id})}"
th:object="${person}" method="POST">
First Name:
<input type="text" th:field="*{firstName}"/>
<br/>
Last Name:
<input type="text" th:field="*{lastName}" />
<br/>
Date of Birth (DD/MM/YYYY):
<input type="date" th:field="*{birthDate}" />
<br/>
ID:
<input type="text" th:field="*{id}" />
<br/>
<input type="submit" value="Update" />
</form>
So that was because the key name used "personToModify" couldn't be found in the html as the object name used wasn't properly named:
th:object="${person}"
I can't see your Person class or controller but, for example, keeping it clean, you can create PersonForm class which can look like (might need to change Date)
import java.util.Date;
public class PersonForm {
private String firstName;
private String lastName;
private Date birthDate;
public PersonForm() {
}
public PersonForm(Person person) {
this.firstName = person.getFirstName();
this.lastName = person.getLastName();
this.birthDate = person.getBirthDate();
}
As you can see, it has fields which needs to populated and you set them in constructor, you can also apply validation annotations here if needed.
In your controller you would need to retrieve Person and using it, create and add PersonForm as model attribute. i.e.
#GetMapping("/person/edit/{id}") // you might not use id, might be username
public String editPerson(#PathVariable Long id, Model model) {
Person person = personRepository.getOne(id); // or service
PersonForm personForm = new PersonForm(person);
model.addAttribute("personForm", personForm);
// other stuff
// return html
}
and then change th:object="${person}" to th:object="${personForm}"
Now all th:field="*{firstName}" and others should be populated.
I'm using CodeIgniter form_validation and
Everything works good except the original notification still appears in the top right.
Can anybody advise me how to delete the original notification?
I've inserted the PHP code into to view page.
<?php echo form_error('uname'); ?>
The form_error message appears the way I want but the original error message still appears in the top right, and I don't know how to delete that.
EDIT 01/08/19
Below is edited coding I've taken from the CI UserGuide.
Controller
<?php
class Form extends CI_Controller
{
public function index()
{
$this->load->helper(array('form', 'url'));
$this->load->library('form_validation');
$this->form_validation->set_rules('username', 'Username', 'required');
$this->form_validation->set_rules('password', 'Password', 'required', array('required' => 'You must provide a %s.'));
if ($this->form_validation->run() == FALSE)
{
$this->load->view('myform');
}
else
{
$this->load->view('formsuccess');
}
}
}
View
<html>
<head>
<title>My Form</title>
</head>
<body>
<?php echo validation_errors(); ?>
<?php echo form_open('form'); ?>
<h5>Username</h5>
<input type="text" name="username" value="" size="50" />
<h5>Password</h5>
<input type="text" name="password" value="" size="50" />
<div><input type="submit" value="Submit" /></div></form>
</body>
</html>
If the above is loaded the result will be the Username Text Box in the top left corner, and the Password Text Box below it.
If the Submit button is clicked without any content in the text boxes the following notifications appear in the top left corner and above the Text Boxes.
You must provide a Username.
You must provide a Password.
However, if I change the view page to the following, the same notifications STILL APPEAR IN THE TOP LEFT CORNER, as well as next to the Text Boxes, so in effect each notification appears twice.
<html>
<head>
<title>My Form</title>
</head>
<body>
<?php echo validation_errors(); ?>
<?php echo form_open('form'); ?>
<h5>Username</h5>
<input type="text" name="username" value="" size="50" />
<?php echo form_error('username'); ?>
<h5>Password</h5>
<input type="text" name="password" value="" size="50" />
<?php echo form_error('password'); ?>
<div><input type="submit" value="Submit" /></div></form>
</body>
</html>
It is the notifications that still appear in the top left corner, that I want to delete.
I can't find any coding that positions the notifications so I guess that comes from somewhere within the CI system.
I can position the form_error notifications by using css coding.
I found the problem.
<?php echo form_error('username'); ?> // When this is inserted.
<?php echo validation_errors(); ?> //This must be deleted.
Or put another way the coding above provides the notifications at the top right.
I have my form like this:
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button disabled="{{ myForm.$invalid }}">Save</button>
</form>
As you may see, the button is disabled if the input is empty but it doesn't change back to enabled when it contains text. How can I make it work?
You need to use the name of your form, as well as ng-disabled: Here's a demo on Plunker
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
To add to this answer. I just found out that it will also break down if you use a hyphen in your form name (Angular 1.3):
So this will not work:
<form name="my-form">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="my-form.$invalid">Save</button>
</form>
Selected response is correct, but someone like me, may have issues with async validation with sending request to the server-side - button will be not disabled during given request processing, so button will blink, which looks pretty strange for the users.
To void this, you just need to handle $pending state of the form:
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>
If you are using Reactive Forms you can use this:
<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>
We can create a simple directive and disable the button until all the mandatory fields are filled.
angular.module('sampleapp').directive('disableBtn',
function() {
return {
restrict : 'A',
link : function(scope, element, attrs) {
var $el = $(element);
var submitBtn = $el.find('button[type="submit"]');
var _name = attrs.name;
scope.$watch(_name + '.$valid', function(val) {
if (val) {
submitBtn.removeAttr('disabled');
} else {
submitBtn.attr('disabled', 'disabled');
}
});
}
};
}
);
For More Info click here
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required/>
<button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button>
</form>
If you want to be a bit more strict
I have problem with the TYPO3 extension "Formhandler". I installed the extension, added captcha and everything is working.
This is the HTML template:
<!-- ###TEMPLATE_FORM1### begin -->
<form action="###REL_URL###" name="projektform" id="projektform" method="post" class="formhandler">
<br />
<div id="sender_name">
<label for="sender_name"><span style="color:red;">*</span>Name:</label>
<br />
<input type="text" name="formhandler[sender_name]" id="sender_name"
value="###value_sender_name###" />
###error_sender_name###
</div>
<br />
<div id="sender_email">
<label for="sender_email"><span style="color:red;">*</span>Email:</label>
<br />
<input type="text" name="formhandler[sender_email]" id="sender_email"
value="###value_sender_email###" />
###error_sender_email###
</div>
<br />
<div id="sender_message">
<label for="message"><span style="color:red;">*</span>Message:</label>
<br />
<textarea name="formhandler[message]" id="message">###value_message###</textarea>
###error_message###
</div>
<br />
<!--###CAPTCHA_INSERT### this subpart is removed if CAPTCHA is not enabled! -->
<div id="captcha">
<label for="freecapfield"><span style="color:red;">*</span>###SR_FREECAP_NOTICE###</label>
<br />
###SR_FREECAP_CANT_READ###
<br />
<div class="cap-img">
###SR_FREECAP_IMAGE###
</div>
<br />
<input type="text" id="freecapfield" name="formhandler[freecapfield]" title="###SR_FREECAP_NOTICE###" value="">
<br />
###error_freecapfield###
</div>
<!--###CAPTCHA_INSERT###-->
<br />
<input type="submit" value="Submit" ###submit_nextStep### />
</form>
<!-- ###TEMPLATE_FORM1### end -->
<!-- ###TEMPLATE_SUBMITTEDOK### begin -->
<p>The following message has been sent:</p>
<p>###value_message###</p>
<!-- ###TEMPLATE_SUBMITTEDOK### end -->
<!-- ###TEMPLATE_EMAIL_ADMIN_PLAIN### begin -->
The following contact form has been sent to you:
Sender: ###value_sender_name### ###value_sender_email###
Text:
###value_message###
<!-- ###TEMPLATE_EMAIL_ADMIN_PLAIN### end -->
This is the typo script:
<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/contactform/1-contactform.ts">
plugin.Tx_Formhandler.settings {
debug = 1
templateFile = fileadmin/contactform/1-contactform.html
formValuesPrefix = formhandler
finishers {
1 {
class = Tx_Formhandler_Finisher_Mail
}
2 {
class = Tx_Formhandler_Finisher_SubmittedOK
config.returns = 1
}
}
# Rules for the validation
validators.1.class = Validator_Default
validators.1.disabled = 0
validators.1.config.fieldConf {
message.errorCheck.1 = required
message.errorCheck.2 = minLength
message.errorCheck.2.value = 5
sender_name.errorCheck.1 = required
sender_email.errorCheck.1 = required
sender_email.errorCheck.2 = email
freecapfield.errorCheck.1 = srFreecap
}
# Layout if the error message
singleErrorTemplate {
totalWrap = |
singleWrap = <span style="color: red;">|</span>
}
}
So what I have is Name, Email, Message and a captcha fields, working perfectly.
But then I wanted to add a "subject" field in the form, so that when someone sends an email from the online contact form, he would be able to set a subject of that email.
I added an additional input field:
<div id="subject">
<label for="subject">Subject:</label>
<br />
<input type="text" name="formhandler[subject]" id="subject" value="###value_subject###"/>
</div>
After adding the input in the HTML template, I entered the value "SUBJECT". The result was that I was able to see the value in the formhandler debugger:
The current GET/POST params are:
sender_name NAME
sender_email EMAIL#MAIL.COM
subject SUBJECT
message MESSAGE
freecapfield kdlxp
step-2-next 1
submitted 1
randomID 5fab4cc19017c5c48dafb6a05ed7687b
removeFile
removeFileField
submitField
Then all I needed to do was to "assign" that value to the "admin subject" field. I did a lot of researching and I was able to find the following code:
plugin.Tx_Formhandler.settings.predef.myformname {
finishers {
1.class = Tx_Formhandler_Finisher_Mail
1.config {
limitMailsToUser = 5
admin {
subject = TEXT
subject.data = GPvar:formhandler|title
}
}
}
}
So I put the code in my typo script, substituting "myformname" with the name of my form "projektform" and title with the name of my input field "subject", but when I send an email, there is no subject.
I did a lot of searching, tried a lot of examples, but the result was the same. Could you please point me to the right direction?
The use of GPvar is deprecated, use GP instead:
subject.data = GP:formhandler|subject
More information can be found in this howto: How to access Formhandler values in TypoScript
The Link has slightly chanced to http://www.typo3-formhandler.com/en/blog/howtos/how-to-access-formhandler-values/
Or you could use the mechanism that is meant to do that for you:
In your template you specified the fieldname by name="formhandler[subject]".
This means your value will be stored under the key "subject".
Most, if not all, finishers are able to deal with this key/value pairs just like this:
plugin.Tx_Formhandler.settings {
finishers {
1 {
class = Tx_Formhandler_Finisher_Mail
config.admin.subject = subject
}
}
}
Also another reason why your code might not work is that you did not specify your form to use a predef and configured most of it outside a predef. But the config for the subject that you found uses predef. Just changing the predef name is not enough do associate the config with your form. It has to be on the same level as your other config. This might just work as well:
plugin.Tx_Formhandler.settings {
finishers {
1.class = Tx_Formhandler_Finisher_Mail
1.config {
limitMailsToUser = 5
admin {
subject = TEXT
subject.data = GP:formhandler|subject
}
}
}
}
Sidenote:
Even though it is okay not to use predef (because you have no need for multiple different forms) it is not recommended, you should consider changing your config to using predefs.
Assuming that your form really is based on a predef form with the key "projektform":
plugin.Tx_Formhandler.settings.predef.projektform {
finishers {
1.class = Tx_Formhandler_Finisher_Mail
1.config {
limitMailsToUser = 5
admin {
subject = TEXT
subject.data = GP:formhandler|subject
subject.sanitize = 1
}
}
}
}
If you access GET/POST parameters using a cObject like "TEXT", you should always add "sanitize=1". Formhandler hooks into stdWrap and adds the submitted form data to the GET/POST array.
The better way to do it is the way #denvercoder suggested using just the name of the input field:
plugin.Tx_Formhandler.settings.predef.projektform {
finishers {
1.class = Tx_Formhandler_Finisher_Mail
1.config {
limitMailsToUser = 5
admin {
subject = subject
}
}
}
}
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"/>
</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!
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();">
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">
<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>
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;
});