SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form Submission/Navigation

    Hi all,

    I have a multi-section form I'm trying to finish. It's a tabbed navigation form so the user must enter their information on the first tab/page and click submit to save the post values before it can be stored so they can go to the next tab/page to fill out further information.

    The tabs send a parameter through the url to determine which section of the form is to be in use. However, my client wants to be able to just fill out the information and click on a tab to another section without having to hit the submit form button.

    I've read about javascript that can turn a link into a form submit, but that would take away the link's functionality to switch to a different section of the form...or so I would assume.

    Could I get some help or a nudge in the direction I need to go to accomplish this? Thanks!
    No, I REALLY dislike having to use Joomla.

  2. #2
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    NY, USA
    Posts
    712
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Javascript would probably be the easiest way.

    I would make all tab links submit the form. That way you could save whatever info was posted, but you could also determine what was clicked on so you'd know how to respond after saving the data.

    To illustrate, you might have a hidden input named "nexttab" or whatever. Then whenever they clicked on a tab have this bit of javascript:

    document.form.nexttab = 'whatever';
    document.form.submit();

    when you receive this post, first you save the data, then you know from the "nexttab" item which tab to display. Then you don't really lose any functionality of clicking links to get from tab to tab. You're just grabbing the data in between tabs.

  3. #3
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cringer, thanks for the reply.

    I'm a little confused on how this would work though.

    This is my navigation...

    PHP Code:
    <ul class="basictab">
    <?php $class $_GET['prop_action']=="idstatus" 'class="selected"''';
    // IN $link below, it keeps the prop_id maintained throughout if needed
     
    ?>
    <li <?php echo $class;?>><a href="prop_manager.php?<?php echo $link?>prop_action=idstatus" title="Property ID/Status" onclick="return confirmupdate()">ID/Status</a></li>

    <?php $class $_GET['prop_action']=="storefront" 'class="selected"''' ?>
    <li <?php echo $class;?>><a href="prop_manager.php?<?php echo $link?>prop_action=storefront" title="Store Front" onclick="return confirmupdate()">Store Front</a></li>

    <?php $class $_GET['prop_action']=="details" 'class="selected"''' ?>
    <li <?php echo $class;?>><a href="prop_manager.php?<?php echo $link?>prop_action=details" title="Property Details" onclick="return confirmupdate()">Property Details</a></li>

    <?php $class $_GET['prop_action']=="purchaseinfo" 'class="selected"''' ?>
    <li <?php echo $class;?>><a href="prop_manager.php?<?php echo $link?>prop_action=purchaseinfo" title="Purchase Info" onclick="return confirmupdate()">Purchase Info</a></li>

    <?php $class $_GET['prop_action']=="soldinfo" 'class="selected"''' ?>
    <li <?php echo $class;?>><a href="prop_manager.php?<?php echo $link?>prop_action=soldinfo" title="Sold Info" onclick="return confirmupdate()">Sold Info</a></li>

    <?php $class $_GET['prop_action']=="legal" 'class="selected"''' ?>
    <li <?php echo $class;?>><a href="prop_manager.php?<?php echo $link?>prop_action=legal" title="Legal" onclick="return confirmupdate()">Legal</a></li>

    <?php $class $_GET['prop_action']=="images" 'class="selected"''' ?>
    <li <?php echo $class;?>><a href="prop_manager.php?<?php echo $link?>prop_action=images" title="Images" onclick="return confirmupdate()">Images</a></li>

    <?php $class $_GET['prop_action']=="taxes" 'class="selected"''' ?>
    <li <?php echo $class;?>><a href="prop_manager.php?<?php echo $link?>prop_action=taxes" title="Taxes/Dues" onclick="return confirmupdate()">Taxes/Dues</a></li>
    </ul>
    How do I implement the javascript you provided in with this?
    No, I REALLY dislike having to use Joomla.

  4. #4
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I added this to my javascript section in my html <head> section...

    Code:
    function submitform()
    {
      document.property.submit();
    }
    Then put this in my html

    PHP Code:
    <?php $class $_GET['prop_action']=="soldinfo" 'class="selected"''' ?>
    <li <?php echo $class;?>><a href="javascript: submitform()";" title="Sold Info">Sold Info</a></li>
    The form submits, but now it doesn't save any of the information.

    Should this be on the javascript forum? Sorry about that if so.
    No, I REALLY dislike having to use Joomla.

  5. #5
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cringer View Post

    when you receive this post, first you save the data, then you know from the "nexttab" item which tab to display. Then you don't really lose any functionality of clicking links to get from tab to tab. You're just grabbing the data in between tabs.

    how do you predict which tab is the "nexttab" for your hidden field when it could be any one of 8 tabs that are selected?
    No, I REALLY dislike having to use Joomla.

  6. #6
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Crowden

    This tutorial may help you.

    http://www.phpfreaks.com/tutorials/145/0.php
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  7. #7
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    NY, USA
    Posts
    712
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by crowden View Post
    I added this to my javascript section in my html <head> section...

    Code:
    function submitform()
    {
      document.property.submit();
    }
    Then put this in my html

    PHP Code:
    <?php $class $_GET['prop_action']=="soldinfo" 'class="selected"''' ?>
    <li <?php echo $class;?>><a href="javascript: submitform()";" title="Sold Info">Sold Info</a></li>
    The form submits, but now it doesn't save any of the information.

    Should this be on the javascript forum? Sorry about that if so.
    change this

    href="javascript: submitform()";"

    to this

    href="#" onclick="submitform(); return false;"

    Quote Originally Posted by crowden View Post
    how do you predict which tab is the "nexttab" for your hidden field when it could be any one of 8 tabs that are selected?


    nexttab was just a suggestion. To do what I explained you would put a hidden input in your form

    <input type="hidden" name="nexttab" value="whatever" />

    Then before submitting the form via javascript, you would need to change that value depending on which tab link was clicked.


    href="#" onclick="document.formname.nexttab = 'somevalue'; submitform(); return false;"

    It's not the neatest way to do it but you get the general idea?

  8. #8
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cringer View Post
    nexttab was just a suggestion. To do what I explained you would put a hidden input in your form

    <input type="hidden" name="nexttab" value="whatever" />

    Then before submitting the form via javascript, you would need to change that value depending on which tab link was clicked.

    href="#" onclick="document.formname.nexttab = 'somevalue'; submitform(); return false;"
    I'm having difficulty with this.

    my code for the hyperlink is.
    HTML Code:
    <a href="#" title="Id/Status" onclick="document.property.tab = 'idstatus'; submitform(); return false;">Id/Status</a>
    i also have the hidden field.
    HTML Code:
    <input type="hidden" name="tab" />
    below it. The name of my form is property. Is the "document.property.tab = 'idstatus';" part supposed to fill the value for the hidden field to what I specify, in this case 'idstatus'?
    No, I REALLY dislike having to use Joomla.

  9. #9
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    NY, USA
    Posts
    712
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by crowden View Post
    I'm having difficulty with this.

    my code for the hyperlink is.
    HTML Code:
    <a href="#" title="Id/Status" onclick="document.property.tab = 'idstatus'; submitform(); return false;">Id/Status</a>
    i also have the hidden field.
    HTML Code:
    <input type="hidden" name="tab" />
    below it. The name of my form is property. Is the "document.property.tab = 'idstatus';" part supposed to fill the value for the hidden field to what I specify, in this case 'idstatus'?

    sorry my bad... little rusty with this particular thing.


    document.property.tab.value = 'idstatus'

    that should work

  10. #10
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mandes View Post
    Crowden

    This tutorial may help you.

    http://www.phpfreaks.com/tutorials/145/0.php
    Mandes,

    Thank you for the link. I'll be using it for future reference.
    No, I REALLY dislike having to use Joomla.

  11. #11
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cringer,

    Thanks, it works great.
    No, I REALLY dislike having to use Joomla.


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
  •