Textbox should accept only numeric values depending on the value from the dropdown

Webix JS
1

Hi

I do have below webix code

When i click on the add button and a row is getting added with combo
and textbox

if the user selects only year1 as value from the combo then the textbox should accept only integers if the user selects any other value other than year1 it should accept any.

Please help me .how can i do this??

var a = [

{id:"movie",value:"Movie Name",type:"string"},

{id:"movieplace", value:"movieplace", type:"string"},

{id:"year", value:"year1", type:"string" }

];

const removed = [];

webix.ui({

view:"window",

id:"moviewin",

height:300,

width:700,

modal:true,

position:"center",

head:"Movie data",

hidden: false,

body:{
view:"form",id:"movieform",width:600, scroll: true,

elements:[{

  view: "layout",

  cols:[  

    {

      view:"combo",

      id:"moviedata",

      label:"Fields",

      options:a

    },

    {
      view:"text",

      label:"Value"

    },
  ]
},
          {
            cols:[

              {view:"button",

               label:"Movie Data",

               click:function(){

               }},

              {view:"button", 

               label:"Reset",

               click:function(){

               }},

              {view:"button", 

               label:"Cancel",

               click:function(){

               }},

              {view:"button", 

               label:"Add",

               click:function(){

                 $$("movieform").addView({

                   view: "layout",

                   cols:[  

                     {

                       view:"combo",

                       name:"co",

                       label:"Fields",

                       on:{

                         onChange: function(id){ 

                           let LastC = this.getList().getItem(id);

                           for (var i = 0; i < a.length; i++) { 

                             if(a[i].value == LastC.value){

                               const item = a.splice(i,1)[0];

                               removed.push(item);

                               this.define("options",[item]);

                             }
                           }}
                       },
                       options:a
                     },
                     {
                       view:"text",
                       label:"Value"
                     },
                     {view:"icon", icon:"wxi-trash", click:function(){
                       let toRemove = this.getParentView();
                       const combo = toRemove.queryView("combo");
                       const combooption = combo.getValue();
                       const toAdd = removed.find(function(obj){
                         return obj.id == combooption;
                       });
                       a.push(toAdd);
                       this.getParentView().getParentView().removeView(toRemove);

                     }}, 
                   ]});
               }},
            ]
          }
         ]
}
});
2

@Nastja

Could you please help me

3

@Listopad

Could anyone help me out please? :frowning: :frowning:

4

Please check the related discussion

5

@Nastja

Thanks Nastja .But i am not able to find the textbox . I am able to find only the dropdown which is combo.

6

https://snippet.webix.com/2myk6w3z
How to add views dynamically: Dynamic UI Modifications of Guides, Configuring Components Webix Docs

7

Also,

if the user selects only year1 as value from the combo then the textbox should accept only integers

you can add text.define({pattern:{ mask:"##############", allow:/[0-9]/g}}) to the text input
https://snippet.webix.com/w916slg0

8

@Nastja

Thank you …for your patience …

And the final step for my requirment is i wanted to have a save button and when the user clicks on the save button then all the data what is selected in the dropdown and values entired in the textbox should be there in one object.

Something like this

var myObj = {a:“Prasad”,b:“Kungfu panda”,c:2006}

where a,b,c are the dropdown values and “prasad”,“Kungfu panda”,2006 are the corresponding values entired in the textboxes for a,b,c

how can i do that?

9

Hello @prasadraju ,

getValue() method can help you to return the current value of the component
Please check the sample: https://snippet.webix.com/ez5j5n9f

10

@Nastja

There is a slight change in the requirement . If the user selects a value suppose “b” a dropdown with some test values should be displayed instead of a textbox . How can i do that?

Regards
PrasadRaju N

11

@Nastja

Can you please help in this ?
Tried to use hidden property in the layout

but an error saying non -unique id is getting populated…

Please help me

12

You need to catch the moment when the value of the first combo is changed. onChange event can help you to do this.
Please check the sample: https://snippet.webix.com/smealrhp