Use select option into div

Question

I'm using Netbeans Java Web Applications, so I have this structure:

  <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4><i class="fa fa-fw fa-check"></i>Low Service </h4>
                </div>
                <div class="panel-body">
                    <p>This is low service</p>
                    <a href="#" class="btn btn-default">Select</a>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4><i class="fa fa-fw fa-gift"></i> High Service</h4>
                </div>
                <div class="panel-body">
                    <p>This is high service</p>
                    <a href="#" class="btn btn-default">Select</a>
                </div>
            </div>

And I have a select here:

  <form method="POST" action="Servlet" >

    <select name="service">
        <option value="">Select an option</option>
        <option value="Low service" name="sme"></option>
        <option value="High service" name="sma"></option>
 </select>
 </form>

So that I want is when user clic on "Select" button on my structure, It get the action of form method post, and I finally hidden normal select tag. How can I do that?

For example I try this:

<form method="POST" action="Servlet" >

    <select name="service" onchange="this.form.submit()">

  <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4><i class="fa fa-fw fa-check"></i>Low Service </h4>
                </div>
                <div class="panel-body">
                    <p>This is low service</p>
                    <option value="Low service" name="sme">Select</option>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4><i class="fa fa-fw fa-gift"></i> High Service</h4>
                </div>
                <div class="panel-body">
                    <p>This is high service</p>
                    <option value="High service" name="sma"></option>
                </div>
            </div>

But it only converts al my css into select option...

It is not clear what you are asking, you should edit and clarify. — dan, Nov 08 '15 at 18:34
I add an example that I try but no works... I hope it works to understand more. — Gerry, Nov 08 '15 at 18:38
It's still not clear, are you trying to submit the form based on the selected option? — dan, Nov 08 '15 at 18:40
Yes, I want to send form based on selected option, but I don't know how can I combine select tag with my css, like `Select` — Gerry, Nov 08 '15 at 18:47

score 0 · Accepted Answer · answered Nov 08 '15 at 18:48

0

To submit the form based on the user selection you should use something like this:

<select name="service" onchange="this.form.submit()">
    ...
</select>

answered Nov 08 '15 at 18:48

dan

13,132
3
38
49

And how can I call this in my structure?, I edit my example – Gerry Nov 08 '15 at 18:52
If you are trying to apply the css to the options you should check the answers from this question: http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript – dan Nov 08 '15 at 18:55
No I want to submit it, when user select specific `Select` – Gerry Nov 08 '15 at 18:57
I want to remove select dropdown, and convert it into buttons, just calling submit into `Select` – Gerry Nov 08 '15 at 19:00

Use select option into div

1 Answers1