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
Post a Comment