jquery-How do I write this code into a function -
i have 3 modules/sectinos same thing minor differences. tried write main portion jquery function can call needed, can't structure correctly. show me how structure please?
this part need separate function , called others
var mytextareafld = $('#ta_holdall'); var fld_1 = $('#firstname').attr('name')+': '+$('#firstname').val(); var fld_2 = $('#lastname').attr('name')+': '+$('#lastname').val(); var fld_3 = $('#street_number').attr('name')+': '+$('#street_number').val(); mytextareafld.val(fld_1 +'\n' + fld_2 +'\n' + fld_3); jsfiddle: http://jsfiddle.net/justmelat/v4szb/
html/jquery code below:
<form> <p>first name: <input type="text" name="firstname" id="firstname" value="paul"/></p> <p>last name: <input type="text" name="lastname" id="lastname" value="ryan" /></p> <p>street #: <input type="text" name="street_number" id="street_number" value="4605"/></p> <p>address: <input type="text" name="address" id="address"/></p> <p>city: <input type="text" name="city" id="city" /></p> <p>state: <input type="text" name="state" id="state"/> <span id="myzip">zip:</span> <input type="text" name="zip" id="zip" /> <br /><br /> <span id="allinfo">all info:</span> <textarea id="ta_holdall" rows="10" cols="30"></textarea><div id="charcnt"></div><br /><br /> <input type="button" value="add field" id="addfield"> </form> $(document).ready(function(){ $('#addfield').on('click',function(){ var mytextareafld = $('#ta_holdall'); var fld_1 = $('#firstname').attr('name')+': '+$('#firstname').val(); var fld_2 = $('#lastname').attr('name')+': '+$('#lastname').val(); var fld_3 = $('#street_number').attr('name')+': '+$('#street_number').val(); mytextareafld.val(fld_1 +'\n' + fld_2 +'\n' + fld_3); }); $('#allinfo').on('click',function(){ var mytextareafld = $('#ta_holdall'); var fld_1 = $('#firstname').attr('name')+': '+$('#firstname').val(); var fld_2 = $('#lastname').attr('name')+': '+$('#lastname').val(); var fld_3 = $('#street_number').attr('name')+': '+$('#street_number').val(); mytextareafld.val(fld_1 +'\n' + fld_2 +'\n' + fld_3); var $mytextareafld = $('#ta_holdall'); var $outputcount = $("#charcnt"); var $oftext = " characters of 1000 remaining"; var val = $mytextareafld.val(); var val2 = $outputcount.text(val.length).append("<strong>"+$oftext+"</strong>"); }); $("#firstname,#lastname, #street_number").blur(function(){ var mytextareafld = $('#ta_holdall'); var fld_1 = $('#firstname').attr('name')+': '+$('#firstname').val(); var fld_2 = $('#lastname').attr('name')+': '+$('#lastname').val(); var fld_3 = $('#street_number').attr('name')+': '+$('#street_number').val(); mytextareafld.val(fld_1 +'\n' + fld_2 +'\n' + fld_3); }); });
js fiddle demo: http://jsfiddle.net/lucuma/jmhme/1/
$(document).ready(function(){ function addstuff(event) { var mytextareafld = $('#ta_holdall'); var fld_1 = $('#firstname').attr('name')+': '+$('#firstname').val(); var fld_2 = $('#lastname').attr('name')+': '+$('#lastname').val(); var fld_3 = $('#street_number').attr('name')+': '+$('#street_number').val(); mytextareafld.val(fld_1 +'\n' + fld_2 +'\n' + fld_3); } $('#addfield').on('click', addstuff); $('#allinfo').on('click',function(event){ addstuff(event); var $mytextareafld = $('#ta_holdall'); var $outputcount = $("#charcnt"); var $oftext = " characters of 1000 remaining"; var val = $mytextareafld.val(); var val2 = $outputcount.text(val.length).append("<strong>"+$oftext+"</strong>"); }); $("#firstname,#lastname, #street_number").blur(addstuff); });
Comments
Post a Comment