CODEWITHSUNDEEP
javascriptphphtmltwitter-bootstrapdom
Dmitry R
Dmitry R

Reputation: 3176

HTML ui/li button form submit

I'm trying to create dynamic button with selector and what I'll select in the button drop down will be submitted to the next page. However it doesn't work I can't retrieve whatever was selected in the button's. What is the right way to submit such data in a form?

I'm submitting the form to php page while getting it using $_POST["packageType"], found here the following approach:

onclick="myForm.myVariable.value='foo';myForm.submit();"

Is it legit or there is better way to do such dynamic value submission?

enter image description here

<form action="target.php" method="post" id="1111">
<input id="packageType" type="hidden" name="packageType" value="N/A"/>

<div class="btn-group">
    <button type="button" class="btn btn-success btn-xs">Add Plan</button>
    <button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu package-selector" role="menu">
        <li><a href="#" onclick="1111.packageType.value='basic';1111.submit();">Type 1</a></li>
        <li><a href="#" onclick="1111.packageType.value='premium';1111.submit();">Type 2</a></li>
    </ul>
</div>

Upvotes: 0

Views: 1529

Answers (1)

Mat
Mat

Reputation: 2154

As I see it quickly, your solution could work (as long as your bootstrap code is set up correctly). There is just an issue with how you reference your form "1111".

Try rewriting your ul / li tags like that

<ul class="dropdown-menu package-selector" role="menu">
    <li><a href="#" onclick="document.getElementById('1111').packageType.value='basic';document.getElementById('1111').submit();">Type 1</a></li>
    <li><a href="#" onclick="document.getElementById('1111').packageType.value='premium';document.getElementById('1111').submit();">Type 2</a></li>
</ul>

The document.getElementById('1111') search for the form and references it. JavaScript does not understand 1111 directly.

There are some other ways to reference the form. For instance document.forms[0] but, since you have an id attribute in your form, that's the simplest way.

As a side note: I would recommend not using ids starting with numbers (for instance, replace 1111 by myform1111 or similar).

Upvotes: 1

Related Questions