1

This may seem like a duplicate question but I have googled and search stackoverflow how an a anchor tag would act like as a submit that would fit on the website that I am trying to do.

I have this code on my right panel navigation:

<div class="content clearfix">
<div class="left_column">
    <div class="product_menu">
        <? if($_SESSION['logged_in'] == 1) {
        $customer_panel = '
        <div class="customer_nav">
        <h1 class="customer_nav_name">Hello ' .  $_SESSION['fname'] . ',</h1>
        <ul class="clearfix">
            <li><a href="#">View Profile</a></li>
            <li><a href="">Update Information</a></li>
            <li>
            <!-- this is where i would like the signout button to act as a submit
                 i have left it plane to start from scratch -->
                <a href="">Sign Out</a>
            </li>
        </ul>
        </div>';

        echo $customer_panel;
        }?>
        <h2><span>Product Categories</span></h2>
        <ul id="prod_nav" class="clearfix">

            <li class="top"><a href="#" class="top_link"><span>Processed Meat</span></a></li>
            <li class="top"><a href="#" class="top_link"><span>Ready Made</span></a></li>
            <li class="top"><a href="#" class="top_link"><span>Siomai &amp; Siopao</span></a></li>
            <li class="top"><a href="#" class="top_link"><span>English Pork Snacks</span></a></li>
        </ul>
    </div>

And here is my usual code when i use a submit button and not an anchor tag to make a POST method:

if(isset($_POST['signout'])) { // logout button
// Clear and destroy sessions and redirect user to home page url.
$_SESSION = array();
session_destroy();
// Redirect to where the site home page is located -- Eg: localhost
header('Location: http://localhost/');
}

I have read many of this questions but I don't know jQuery or how to achieve this using javascript.

I also tried using this solution:

<form id="signout" action="index.php" method="post">
<a href="javascript:;" onclick="document.getElementById('signout').submit();">Sign Out</a>
<input type="hidden" name="signout" value="signout"/>
</form>

that I kinda found from here at stackoverflow.

The problem about this is that if I include the onclick="" , the whole page does not show. but if i remove it, the page comes back to normal. - it doesn't work inside an <li> element.

It might sound basic, but it would help me and other new starters to understand how to make it possible. Thank you very much. :)

2
  • Actually you want to submit a form using javascript? May 28, 2013 at 15:41
  • Yes, but I just started developing and I'm not really good at javascript , i tried the onclick but this disabled the succeeding content of the page to be loaded when i put it inside the <li> tag.
    – GitKidd
    May 28, 2013 at 15:43

1 Answer 1

0

Try this,

STEP 1 : Put the following scripts in your html file.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.signout-btn').click(function() {
        $('#signout').submit();
    });
})
</script>

STEP 2 :

Add an attribute class="signout-btn" to anchor tags, which you want to trigger the form submission.

4
  • Hi @Nikhil.. thanks, but do i still need a <form> tag for this? do i put <input type="hidden"> still? would it be possible to elaborate more on the step 2 process? give the complete code that I should put inside the <li> tag? thank you.
    – GitKidd
    May 28, 2013 at 16:05
  • It is necessary to put the <form> tag with <input type="hidden">. You can place this form anywhere in your html file. Step 2: use this code, <li><a href="#" class="signout-btn">Sign Out</a></li> May 28, 2013 at 16:12
  • Hi, i have tried all of this but nothing seems to be happening. :(
    – GitKidd
    May 28, 2013 at 16:15
  • Make sure that, there is no js errors while clicking on the anchor tag. Check it in console panel of firebug May 28, 2013 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.