so i'm trying change value of input id championspell[] whenever dropdown chosen code generated dynamically i'm trying closest/next input after select.
update: full code below:
<script src="leaguenotes/js/jquery.min.js"></script> <script src="leaguenotes/js/champions_list.js"></script> <script src="leaguenotes/js/jquery.validate.min.js"></script> <style> * { font-family:arial; } h2 { padding:0 0 5px 5px; } h2 { color: #224f99; } { color:#999; text-decoration: none; } a:hover { color:#802727; } p { padding:0 0 5px 0; } input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; } </style> <h2> <a href="#" id="addchampion">add champion</a> </h2> <form name="second_form" id="second_form" action="#" method="post" style="margin: 0;" > <div id="p_scents"> <p> <label for="p_scnts"> <input type="text" id="champion[]" size="20" list="champions" value="" placeholder="enter champion's name"> <datalist id="champions"></datalist> <a href="#" id="addgeneral">add general change</a><a></a> <a href="#" id="addspell"> add spell</a><a></a> </label> </p> </div> <br/><input type="submit" value="submit"> </form> <script> for(var key in champions){ if(champions.hasownproperty(key)){ $('#champions').append('<option value="' + key + '">'); } } var config = { fillall: true }; document.forms["second_form"].oninput = function(e) { var champion = this["champion[]"]; //force array if (champion[0] === undefined) champion = [this["champion[]"]]; var reached = { valid: 0, unique: 0 }; var inputs = [].map.call(champion, function(n) { return n.value }).filter(function(n) { return n.length }); var valid = [].every.call(champion, function(n, i) { n.setcustomvalidity(""); if (config.fillall) return (reached.valid = i, champions.hasownproperty(n.value)); else return n.value ? ( reached.valid = i, champions.hasownproperty(n.value) > -1 ) : true; }); var unique = inputs.slice(0).sort().every(function(n, i, a) { reached.unique = inputs.lastindexof(n); return n != a[i - 1]; }); //check valid champions if (!valid) { champion[reached.valid].setcustomvalidity("this not valid champion, please correct field , resubmit.") } //check duplicates if (!unique) { champion[reached.unique].setcustomvalidity("this champion has been entered.") } this.checkvalidity(); }; function change(x, dblchamp){ if(dblchamp===true){ if(x==="passive"){x=0;} if(x==="q"){x=1;} if(x==="q2"){x=2;} if(x==="w"){x=3;} if(x==="w2"){x=4;} if(x==="e"){x=5;} if(x==="e2"){x=6;} if(x==="r"){x=7;} if(x==="r2"){x=8;} }else if(dblchamp===false){ if(x==="passive"){x=0;} if(x==="q"){x=1;} if(x==="w"){x=2;} if(x==="e"){x=3;} if(x==="r"){x=4;} } console.log(x); return x; } function val(elm) { var championswithextraspells = ["aatrox", "elise", "fizz", "heimerdinger", "jayce", "lee sin", "nidalee", "rek'sai","twisted fate"]; //var championname = $("#change").closest('input').val(); //var championname =$("#champion\\[\\]").val(); var championname = $(elm).closest("label").find("input").val(); //document.getelementbyid("champion[]").value; console.log(championname); if($.inarray(championname, championswithextraspells)==-1){ var existsinarray = false;} else{ var existsinarray = true;} var d = $(elm).val(); // console.log(d); //d = document.getelementbyid("change[]").value; var spellname = document.getelementbyid("championspell[]"); var z = champions[""+championname+""][change(d, existsinarray)]; test = $(elm).nextall("input").first().val('test'); console.log(test); //console.log(d+spellname); //test.value=champions[""+championname+""][change(d, existsinarray)]; } $(function() { var scntdiv = $('#p_scents'); var = $('#p_scents label').size() + 1; var j =0; $('body').on('click', '#addchampion', function() { $('<p><a href="#" id="remscnt">remove</a><br><label for="p_scnts"><input type="text" id="champion[]" size="20" list="champions" name="champion[]" value="" placeholder="enter champion\'s name" /><datalist id="champions"></datalist><a href="#" id="addgeneral">add general change</a><a href="#" id="addspell"> add spell</a><a></a></label></p>').appendto(scntdiv); i++; return false; }); $('body').on('click', '#remscnt', function() { if( >2 ) { $(this).parents('p').remove(); i--; } return false; }); $('body').on('click', '#addgeneral',function() { $( '<p><label for="var"><textarea type="text" id="champion[]" size="20" name="generalchange[]" value="" placeholder="enter description" /><select><option value="buff">buff</option><option value="nerf">nerf</option><option value="new">new</option><option value="change">change</option><option value="bugfix">bugfix</option></select></label> <a href="#" id="remvar">remove change</a></p>').appendto($(this).next()); j++; return false; }); $('body').on('click', '#remvar',function() { $(this).parent('p').remove(); return false; }); $('body').on('click', '#addspell',function() { $( '<p><select name="change[]" id="change[]" onchange="val(this)"><option value="passive">passive</option><option value="q" selected>q</option><option value="w">w</option><option value="e">e</option><option value="r">r</option></select><label for="var"><input type="text" id="championspell[]" readonly="true"><br><textarea type="text" id="p_scnt" size="20" name="p_scnt_' + +'" value="" placeholder="enter description" /><select><option value="buff">buff</option><option value="nerf">nerf</option><option value="new">new</option><option value="change">change</option><option value="bugfix">bugfix</option></select></label> <a href="#" id="addgeneral">add change</a> <a href="#" id="remvar">remove spell</a></p>').appendto($(this).next()); return false; }); }); </script>
it next sibling of select, use .next(), .closest() used finding first ancestor element matching given selector
function val(elm) { var test = $(elm).next("input"); console.log(test); test.val("test: " + elm.value); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select name="change[]" id="change[]" onchange="val(this)"> <option value="passive">passive</option> <option value="q" selected>q</option> <option value="w">w</option> <option value="e">e</option> <option value="r">r</option> </select> <input type="text" id="championspell[]" readonly="true">but better use jquery event handlers
jquery(function() { $('select[name="change[]"]').change(function() { $(this).next().val('t: ' + this.value); }).change(); //the last change value used set initial value on page load })<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select name="change[]" id="change[]" onchange="val(this)"> <option value="passive">passive</option> <option value="q" selected>q</option> <option value="w">w</option> <option value="e">e</option> <option value="r">r</option> </select> <input type="text" id="championspell[]" readonly="true">
Comments
Post a Comment