javascript - Jquery, update field and enable button -



javascript - Jquery, update field and enable button -

please help me on issues got 2 text fields, 2 select boxes , button

<input type='text' name='firstname' id='firstname/> <select id='selectbox1'> <option>1</option> <option>2</option> <option>3</option> </select> <input type='text' name='lastname' id='lastname/> <select id='selectbox2'> <option>1</option> <option>2</option> <option>3</option> </select> <button type='submit' id='submit'>submit</button>

the requirements are: (none field required)

if firstname has value, if selectbox1 has no value, button must disable

if firstname has value, if selectbox1 has value, enable button

same rules lastname field , selectbox2.

please help, thanks. code tried far.

$(document).ready(function(){ $('#firstname').change(function(){ if($('#firstname').val() != '' && $('#selectbox1).val() == ''{ $('#button').attr('disabled', true); }else { $('#button').removeattr('disabled') } }); $('#lastname').change(function(){ if($('#lastname').val() != '' && $('#selectbox2).val() == ''{ $('#button').attr('disabled', true); }else { $('#button').removeattr('disabled') } }); $('#selectbox1').change(function(){ if($('#firstname').val() == '' && $('#selectbox1).val() == ''{ $('#button').attr('disabled', true); }else { $('#button').removeattr('disabled') } }); $('#selectbox2').change(function(){ if($('#lastname').val() == '' && $('#selectbox2).val() == ''{ $('#button').attr('disabled', true); }else { $('#button').removeattr('disabled') } }); });

however, way suck. can't grab conditions , long, looking new way suck count firstname , selectbox1, if enable button else disable, that's idea, don't know how code it.

you have tagged jquery in question, may find knockout library more helpful here bind values of elements model variables , represent logic enabling/disabling button.

to see mocked up, have @ this fiddle.

here html:

<input type='text' name='firstname' id='firstname' data-bind='value: firstname'/> <select id='selectbox1' data-bind='value: select1'> <option></option> <option>1</option> <option>2</option> <option>3</option> </select> <input type='text' name='lastname' id='lastname' data-bind='value: lastname'/> <select id='selectbox2' data-bind='value: select2'> <option></option> <option>1</option> <option>2</option> <option>3</option> </select> <button type='submit' id='submit' data-bind='enable: oktosubmit'>submit</button> <br/> ok submit: <span data-bind='text: oktosubmit'></span>

and javascript:

function model () { var self = this; self.firstname = ko.observable(); self.lastname = ko.observable(); self.select1 = ko.observable(); self.select2 = ko.observable(); self.oktosubmit = ko.computed(function() { homecoming ( (self.firstname() && self.select1()) || (!self.firstname() && !self.select1()) ) && ( (self.lastname() && self.select2()) || (!self.lastname() && !self.select2()) ); }) }; ko.applybindings(new model());

javascript jquery html groovy

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -