SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple HTML Forms

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

    Code:
    <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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You would need to involve JavaScript to do that. I've moved this thread to that forum.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by coolguy010 View Post
    > 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
    Yes - an AJAX request to the server will allow that to occur.

    Quote Originally Posted by coolguy010 View Post
    >in some cases the forms are interlinked, i.e only after getting the output of first form the second form should be displayed...
    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.

    Quote Originally Posted by coolguy010 View Post
    >if possible give d code...
    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:

    Code javascript:
    $('#name')
        .ajax('checkname.php', updateFormName)
        .on('change', updateIdDisplay);
    $('#id')
        .ajax('updateid.php', updateFormId)
        .hide();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    What does that code do Paul? I've never seen ajax used on a selection before.
    Code javascript:
    $('#name').ajax('checkname.php', updateFormName)

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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:

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

    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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    What does that code do Paul? I've never seen ajax used on a selection before.
    Code javascript:
    $('#name').ajax('checkname.php', updateFormName)
    If it were going to be done with jQuery then a slightly different technique would want to be used.

    Code javascript:
    $("#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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by coolguy010 View Post
    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 ?
    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:
    • Update form 1 via ajax
    • Update form 2 when form 1 updates
    • Update form 2 via ajax
    • Hide form 2 when it's appropriate


    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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:
    • Update form 1 via ajax
    • Update form 2 when form 1 updates
    • Update form 2 via ajax
    • Hide form 2 when it's appropriate


    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.
    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 ?

    Code:
    $('#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. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by coolguy010 View Post
    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 ?
    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.


    Quote Originally Posted by coolguy010 View Post
    and #name and id in this code is supposed to be the name of the form, something like this ?
    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.

    Quote Originally Posted by coolguy010 View Post
    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 ?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •