jQWidgets Forums

jQuery UI Widgets Forums React Save data form

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  blackcrow 5 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Save data form #106385

    blackcrow
    Participant

    Hello Admin
    I have a form as follows. I was wondering whether I used the UI like that properly. And if so, how can I get the name of each input field to store the same value into the database.?

    <div className="container">
                    <div className="row">
                        <form onSubmit={this.handleSubmit} style={{
                            margin: "50px 50px",
                            display: "flex",
                            flexDirection: "column",
                            width: "100%",
                            padding: 20
                        }}
                        >
                            <div className="row">
                                <div className="col-sm-4">
                                    <div className="form-group row">
                                        <label className="col-sm-3 col-form-label">Tỉnh</label>
                                        <div className="col-sm-9">
                                            <JqxDropDownList ref={this.ddlTinh}
                                                width={'100%'} source={this.state.dmTinh}
                                                // dropDownHeight={200}
                                                displayMember="ten"
                                                valueMember="ma"
                                                key="tinh"
                                                filterable={true}
                                                filterPlaceHolder="Type for search"
                                                searchMode="containsignorecase"
                                                onChange={this.thanhTinhOnChange}
                                            />
                                        </div>
                                    </div>
                                </div>
                                <div className="col-sm-4">
                                    <div className="form-group row">
                                        <label className="col-sm-3 col-form-label">Huyện</label>
                                        <div className="col-sm-9">
                                            <JqxDropDownList ref={this.ddlHuyen}
                                                width={'100%'} height={25}
                                                displayMember="ten"
                                                valueMember="ma"
                                                key="huyen"
                                                filterable={true}
                                                filterPlaceHolder="Type for search"
                                                searchMode="containsignorecase"
                                                onChange={this.quanHuyenOnChange}
                                            />
                                        </div>
                                    </div>
                                </div>
                                <div className="col-sm-4">
                                    <div className="form-group row">
                                        <label className="col-sm-3 col-form-label">Xã</label>
                                        <div className="col-sm-9">
                                            <JqxDropDownList ref={this.ddlXa}
                                                width={'100%'} height={25} source={this.state.dmXa} selectedIndex={1}
                                                dropDownHeight={200}
                                                filterable={true}
                                                displayMember="ten"
                                                key="xa"
                                                valueMember="ma"
                                                filterPlaceHolder="Type for search"
                                                searchMode="containsignorecase"
                                                onChange={this.phuongXaOnChange}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col-sm-4">
                                    <div className="form-group row">
                                        <label className="col-sm-3 col-form-label">Địa chỉ</label>
                                        <div className="col-sm-9">
                                            <JqxInput valueMember="diachi" width={'100%'} />
                                        </div>
                                    </div>
                                </div>
                                <div className="col-sm-4">
                                    <div className="form-group row">
                                        <label className="col-sm-3 col-form-label">Checkbox</label>
                                        <div className="col-sm-9">
                                            <JqxCheckBox width='100'  />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="row container">
                                <button type="submit" className="btn btn-dark" value="Basic">Basic</button>
                            </div>
                        </form>
                    </div>
                </div>

    Hope get your reply soon!
    blackcrow

    Save data form #106419

    Hristo
    Participant

    Hello blackcrow,

    I saw that you do not use our jqxForm and the default custom created one.
    You could create a reference for each one widget that you use and when you desire you could get its values.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    Save data form #106439

    blackcrow
    Participant

    Hello Hristo.

    Thanks for replying.
    Before using default form, I used JqxForm but I had trouble with it. Please see example. In example, when I click square box to open window. I can’t show DropDownList (DDL). I don’t know reason why. Can you give me reason why? And solution.
    Note. I realized that, at line 125 in App.tsx, when I conmmented setTimeoutFunction(), I can show DDL in opened window. But first DDL in parent window can’t show.

    Hope you reply soon.

    Best Regards
    blackcrow

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.