Multiple HTML Forms

JavaScript
1

i have multiple html forms in a single webpage…
consider these two forms in d webpage


<form name="id" action="" method="POST" >
<input type="text" name="cname">
<input type="submit" value="Submit" />
</form>

<form action="" method="POST" >
<input type="text" name="cid">
<input type="submit" value="Submit" />
</form>

> when the user presses submit button i want only that form results to be displayed…

> i want to display the form results without reloading the page
>in some cases the forms are interlinked, i.e only after getting the output of first form the second form should be displayed…
>if possible give d code…

Thanks
coolguy

2

You would need to involve JavaScript to do that. I’ve moved this thread to that forum. :slight_smile:

3

Yes - an AJAX request to the server will allow that to occur.

In that case, you would want to check that the first form has the required information. If it doesn’t, then you should hide the second form.
That sort of check should also occur each time the first form is changed.

The code for what? For both of them?
Using which sort of code library, or none?
Do you have any other existing code that does some of the work for you?
How important is it that it works in older web browsers?

Because a viable solution could just the following:


$('#name')
    .ajax('checkname.php', updateFormName)
    .on('change', updateIdDisplay);
$('#id')
    .ajax('updateid.php', updateFormId)
    .hide();
4

What does that code do Paul? I’ve never seen ajax used on a selection before.

$('#name').ajax('checkname.php', updateFormName)
5

thanks for ur reply…
ya code for both…
i have used lil bit php and html but never used jquery or ajax so having prob und…
der r many line of php code, mysql queries that need to be performed once any of the button is clicked…
most of the forms load in the same page except a few…
like im using if($_POST)
which finds if the button is clicked and my php code goes inside that…
in ur code wer will my php code go ?

6

If it were going to be done with jQuery then a slightly different technique would want to be used.


$("#form").on("submit", function(event) {
    event.preventDefault();
    $.ajax({
        url: "checkname.php",
        data: $(this).serialize()
    }).done(updateFormName);
});

Something like that.

But the main point being made there is that the solution to a complex problem can be simple in the how it’s used, thanks to other supporting code that helps it to do the work that’s needed.

7

In the simple code that I presented above, the php code goes in to its own separate .php file.

There are a number of tasks that you are wanting to achieve:

[list][]Update form 1 via ajax
[]Update form 2 when form 1 updates
[]Update form 2 via ajax
[]Hide form 2 when it’s appropriate[/list]

I suggest that you tackle each of these things one at a time, which will allow you to focus on what needs to be done for what you are wanting to do.

8

ok its seperate file so im begining to und ur code, so im guessing that this peice of code takes care of all 4 pts u mentioned above ?


$('#name')
    .ajax('checkname.php', updateFormName)
    .on('change', updateIdDisplay);
$('#id')
    .ajax('updateid.php', updateFormId)
    .hide();

and #name and id in this code is supposed to be the name of the form, something like this ?

<form name=“id” action=“” method=“POST” >
<form name=“name” action=“” method=“POST” >

> and code needed to execute for form name=‘id’ and name=‘name’ will be in updateid.php and checkname.php
> ive guessed evrything so pls correct if im wrong
> one more thing in .ajax(‘checkname.php’, updateFormName) , dont we need to give full pathname of the file ? or where d file is supposed to uploaded ?

9

Nope - it takes care of none of those four points. Not by itself anyway. That code is just an example for the purpose of demonstrating how simple things can be when conditions are perfect. Your conditions are not perfect, so things are going to be a lot more complex for you.

Those were just examples. The identifiers that you should use on your own code should be with the intention to make it extremely clear about what those forms are being used for.
If a form accepts a username and password, then “login” would be a good identifier for it.

The path can be specified as being relative to the page, or it can be specified as an absolute path. Using a relative path helps to keep things more flexible.

I suggest that for now - you ignore the other aspects of what you want to achieve, and focus only on the one task - that being to submit the first form as an ajax request.