Pass selected value from html <select> to controller

Question

I have to pass the selected picklist value by user from apex form using <select> and <options> html tag to a standard controllers picklist field.

I am unable to get the values from Page to controller. Please suggest how this can be done.

VF Page

<select class="form-control form-group">
    <option value="">--None--</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

<apex:actionFunction name="dfunction" action="{!receiveInput}">
    <apex:param id="dname" name="type" value=""/>
</apex:actionFunction>

<!--Some <button> with onCLick= myfoo() in vf page-->
//Javascript
myfoo(){
    var n3 = document.getElementById("type").value;
    dfunction(n3);
}

Controller

//Controller
public void receiveInput() {
    String input = Apexpages.currentPage().getParameters().get('type');
}

EDIT1-

var n3 = document.getElementById("type").value; dfunction(n3); This seems to get the value of option properly but I am not able to get it in my controller.

Answer 1

You need to make following changes in the markup, JS and the controller:

VF Page

<select id="inputSelect" class="form-control form-group">
    <option value="">--None--</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

<apex:actionFunction name="dfunction" action="{!receiveInput}">
    <apex:param id="dname" name="type" value=""/>
</apex:actionFunction>

<!--Some <button> with onCLick= myfoo() in vf page-->
//Javascript
myfoo(){
    var n3 = document.getElementById("inputSelect").value;
    dfunction(n3);
}

Controller

//Controller
public void receiveInput() {
    String input = Apexpages.currentPage().getParameters().get('type');
}

Answer 2

Edit 1

There should be id attribute on your select tag

 <select class="form-control form-group" id="selectInputId">
     <option value="">--None--</option>
     <option value="A">A</option>
     <option value="B">B</option>
     <option value="C">C</option>
  </select>

Edit 2

myfoo(){
        var n3 = document.getElementById("selectInputId").value;
            dfunction(n3);
     }

I feel this will make things work smoothly.

Answer 3

You will need to use a public string in your controller to save the value in:

public String positions {get; set;}

and after that you can use a salesforce selectlist to make the select list and link that value to the one in the controller:

<apex:selectList id="Positions" value="{!positions}" size="1">

Info about apex selectlist: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_selectList.htm

So when a form is submitted, the value will be given to the controller.