Please set the 'value' property for combobox to set the initialized value.

Code:

<input type="text" id="locCode" name="loc" class="form-control easyui-combobox" value="..." ...>

Also, you can set the data item with 'selected' property set to true for the returned json array from 'register.php?action=load'. The data may looks like this:

Code:

[{
	"id":1,
	"text":"Java"
},{
	"id":2,
	"text":"C#"
},{
	"id":3,
	"text":"Ruby",
	"selected":true
}]

Hi,
Sorry about reviving this old topic. But I am stuck again at a similar problem.

You have suggested to set the value or set selected property to 'true' in json array. But if this is not an edit form, I simply need to load the data in the combobox with no pre-defined initialized value. Now if user selects a value from the combobox for inserting in DB for first time, on submit I am executing $.parser.parse(ff); but it is un-setting the user selected value from combobox. Please advise on how this can be resolved. Thanks in advance.

Hi,
I have a form with a simple combo box like below:

Code:

<select class="easyui-combobox" data-options="required:true" name="type">
				<option value="" selected="selected">Select Type</option>
				<option value="0">Initial Assessment</option>
				<option value="1">Pre-Test</option>
				<option value="2">Assessment</option>
			</select>

I want this combobox to be validated so that user must select one of the 3 options. I have added data-options="required:true" attribute but the validation does not work. However, if I remove the text value "Select Type" from the first <option> then the validation is happening.

But I want to keep the "Select Type" text and also the validation to work. Please advise. Thank you.

Please call $.parser.parse function to parse the validatebox components after generating elements.

Code:

var ff = $('#tchentry1').clone().attr('id','').appendTo('#teacher_2');
$.parser.parse(ff);

Thanks a lot. This solves the issue I mentioned. However, it creates one side effect...if my form has a combo box as below:

Code:

<input type="text" id="locCode" name="loc" class="form-control easyui-combobox" placeholder="Location Code"
                               data-options="
                                    required:true,
                                    width:320,
                                    height:34,
                                    url:'register.php?action=load',
                                    method:'get',
                                    valueField:'id',
                                    textField:'locationName',
                                    panelHeight:'auto',
                                    formatter: formatItem" />

On executing $.parser.parse(ff); it is un-setting the user selected value from combobox. Can you suggest any fixes for this? Thanks again in advance.

Hi,
I am using jquery easyui validatebox for validating data in my form. However, in one of the forms, there is scope to create a group of form elements dynamically by clicking 'add elements' button.

Code:

                 <fieldset id="teacher_2">
                        <legend style="display: none">Teacher Details</legend>
                        <div id="tchentry1" class="clonedInputTch">
                            <h2 id="reference_tch" name="reference_tch" class="heading-reference">Detail #1</h2>
                            <div class="form-group">
                                <input type="text" name="tch_fname[]" class="form-control easyui-validatebox" placeholder="First name" data-options="required:true"/>
                            </div>
                            <div class="form-group">
                                <input type="text" name="tch_lname[]" class="form-control easyui-validatebox" placeholder="Last name" data-options="required:true"/>
                            </div>
                            <div class="form-group">
                                <input type="text" name="tch_email[]" class="form-control easyui-validatebox" placeholder="Email" data-options="required:true,validType:'email'"/>
                            </div>
                            <div class="form-group">
                                <input type="text" name="tch_userid[]" class="form-control easyui-validatebox" placeholder="User ID" data-options="required:true,validType:'minLength[5]'" />
                            </div>
                        </div>
                        <p class="text-center">
                            <button type="button" id="btnAddTch" name="btnAddTch" class="btn bg-olive">add teacher</button>
                            <button type="button" id="btnDelTch" name="btnDelTch" class="btn btn-danger">remove teacher above</button>
                        </p>
                    </fieldset>

On clicking the 'add teacher' button, basically I am using jquery .clone() method to create a copy of the div with class 'clonedInputTch'. As you can see, I have used "easyui-validatebox" class for validation of the form elements.

When there is only set of form elements, the validation is working fine. However, once a new set of fields have been generated dynamically, the validation is not working. And at this point getting following error in console:

Code:

Uncaught TypeError: Cannot read property 'options' of undefined jquery.easyui.min.js:5943
_43b jquery.easyui.min.js:5943
(anonymous function) jquery.easyui.min.js:5984
x.extend.each jquery.js:590
x.fn.x.each jquery.js:237
$.fn.validatebox.methods.enableValidation jquery.easyui.min.js:5983
$.fn.validatebox jquery.easyui.min.js:5955
(anonymous function) registerParent.php:200
x.event.dispatch jquery.js:4692
y.handle

Please let me know if this functionality is possible. If so, kindly guide on how to implement the same.
Thanks in advance.