post from css dropdown menu

Question

Once I have several submit buttons that send post data:

<form name="Master" form action="Master.php" method="post">
<table width="800" border="0">
  <tr>
    <td><input name="Master" type="submit" value="Test1"/></td>
    <td><input name="Master" type="submit" value="Test2"/></td>
  </tr>
</table>
</form>

Now I change my mind, and want to use drop down menus:

<ul class="menu" id="menu">
    <li ><a href="" class="menulink">Home</a>
    <li ><a href="" class="menulink">Main1</a>
        <ul>
            <li><a href="" class="sub">Test1</a>
            <li><a href="" class="sub">Test2</a>
        </ul>
</li>
</ul>

CSS code (menu, menulink, sub, etc) properly displays this menus.

But I dont want to chage substantially the php file that handles the original post values.

So my question is:

Can I send use "method post" inside this dropdown menu? How?

Thanxs.

you can send data to server as GET request via an anchor tag, but POST is not possible :( — Nouphal.M
– Nouphal.M, Commented Mar 1, 2014 at 17:14
You can do the exact same thing are you had previously. Just style your buttons so they look like a normal link. — Justin Wood
– Justin Wood, Commented Mar 1, 2014 at 17:14
@rvighne Please read the question. OP is using buttons to submit POST data to the server. — Justin Wood
– Justin Wood, Commented Mar 1, 2014 at 17:15
@rvighne Sorry, I misunderstood what you said. I agree with you. — Justin Wood
– Justin Wood, Commented Mar 1, 2014 at 17:18

Hatted Rooster · Accepted Answer · 2014-03-01 17:25:30Z

1

As Justin already commented, just add a form to your dropdown menu's and submit it just like you did in code 1.

<form name="Master" action="Master.php" method="post">
<ul class="menu" id="menu">
        <ul>
            <li><input name="test" type="submit" class="sub" value="test1"/>
        </ul>
</li>
</ul>
</form>

edited Mar 1, 2014 at 17:25

answered Mar 1, 2014 at 17:18

Hatted Rooster

36.6k7 gold badges69 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rvighne · Accepted Answer · 2014-03-01 17:43:12Z

To best preserve the look and feel of the links, you will need to use JavaScript. With your second example, remove the href attributes and include this script (untested):

var form = document.createElement('form');
form.action = "Master.php";
form.method = "post";

window.onload = function() {
    var menu = document.getElementById('menu');
    menu.onclick = function(e) {
        var link = e.target || e.srcElement;
        if (link.tagName !== "A") return;

        var input = document.createElement('input');
        input.name = "Master";
        input.value = link.textContent || link.innerText;
        form.appendChild(input);
        form.submit();
    };
};

Alternatively, you could wrap your second example in a <form> and change the anchors to inputs, like this:

<form name="Master" action="Master.php" method="post">
    <ul class="menu" id="menu">
        <li ><input name="Master" type="submit" value="Home" />
        <li ><input name="Master" type="submit" value="Main1" />
            <ul>
                <li><input name="Master" type="submit" value="Test1" />
                <li><input name="Master" type="submit" value="Test2" />
            </ul>
        </li>
    </ul>
</form>

Then, in your CSS, make the inputs look like links. For example, remove all borders, padding, margin, background colors, and text colors; and set font to inherit. Then apply any extra styling.

Collectives™ on Stack Overflow

post from css dropdown menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related