We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Clear non-listed value in combo box

Hi there,

When using combo box component in a form, if user selects an option from the drop down menu then my desired value will be set properly and the form will submit the correct value.
But if user types a new value and not select it from the drop down, the typed value will be submitted in the form.
How can I prevent that? I want only the values from the drop down list to be submitted and other values be set to null or empty for instance.

Best Regards
Masoud Moghaddari

3 Replies

SN Sevvandhi Nagulan Syncfusion Team November 27, 2019 12:16 PM UTC

Hi Masoud 
 
Greetings from Syncfusion support. 

We have checked the reported requirement. In ComboBox allowCustom property is true by default. So if have type some value that not available in the dataSource, then it will be added to the dataSource. So we suggest disable the allowCustom value property. Kindly refer the below code, 

   <form v-on: submit="sub"> 
        <div> 
            <ejs-combobox id='dropdownlist' : dataSource='sportsData' :allowCustom ='false' ></ejs-combobox> 
        </div> 
        <div> 
            <input type="submit" id='btn' value="submit" /> 
        </div> 
        </form > 
 
  methods: { 
        sub: function(event) { 
            console.log(event.currentTarget.querySelector('input').value); 
        } 
    } 

Please find the sample and UG documentation link below, 


 
Regards, 
Sevvandhi N 



MM Masoud Moghaddari November 30, 2019 05:33 AM UTC

Hi Sevvandhi,

Thank you, the solution you provided works great.

Best Regards
Masoud Moghaddari


SN Sevvandhi Nagulan Syncfusion Team December 2, 2019 06:34 AM UTC

Hi Masoud, 
  
Most welcome. Please let us know if you need any other further assistance on this. 
  
Regards, 
Sevvandhi N 


Loader.
Up arrow icon