0

わかりました、私は本当に自分自身を混乱させました。

値を連結してTAボックスに送信するこのアプリがあります。最初にフィールドに値があるかどうかを確認したいのですが、

  • 値がある場合は、TAフィールドに追加します
  • 値/空がない場合は、TAフィールドに追加しないでください。

どうすればこれを行うことができますか?

これをblurイベントで使用したい[コード例を参照]。.each()を使用する必要があることはわかっています。長さを確認するか、各フィールドを調べて、値があるかどうかを確認します。値がある場合は、TAフィールドに入力します。

誰かがこれを達成する方法を教えてもらえますか?

jsfiddle >> http://jsfiddle.net/justmelat/6JHRT/

HTML

<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"/><br />

<span id="myzip">Zip:</span> <input type="text" name="zip"  id="zip" />
<br /><br />
<select name="hometype" id="hometype">
<option value="">Select</option>
<option value="SFH">Single Family Home</option>
<option value="Condo">Condo</option>
<option value="Trailer">Trailer</option><br />
</select><br />
<input type="radio" name="ownership" value="own" /> Own
<input type="radio" name="ownership" value="rent" /> Rent
    <hr />
<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 to Field" id="addField">
</form>​

JQUERY

$(document).ready(function(){

    function combineFields(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();
        var hold_all_fields = fld_1 +'\n' + fld_2 +'\n' + fld_3;
      //hold_all_fields.each();
      mytextareaFld.val(fld_1 +'\n' + fld_2 +'\n' + fld_3);
  }

    $('#addField').on('click',combineFields);

    $('#allInfo').on('click',function(event){
        combineFields(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(combineFields);
});

</ p>

4

2 に答える 2

1

これを試してください -- フィールドが存在する (長さがある) かどうかを確認し、存在しない場合は空の文字列を使用します。

function combineFields(event) {
    var mytextareaFld = $('#ta_holdAll');
    var fld_1 = $('#firstname').val().length ? $('#firstname').attr('name') + ':  ' + $('#firstname').val() + '\n' : '';
    var fld_2 = $('#lastname').val().length ? $('#lastname').attr('name') + ':  ' + $('#lastname').val() + '\n' : '';
    var fld_3 = $('#street_number').val().length ? $('#street_number').attr('name') + ':  ' + $('#street_number').val() + '\n' : '';
    var hold_all_fields = fld_1 + fld_2 + fld_3;
    mytextareaFld.val(hold_all_fields);
}

http://jsfiddle.net/6JHRT/3/

さらなる有用性のために、jQuery.trim()空白を一掃するために使用します:

function combineFields(event) {
    var mytextareaFld = $('#ta_holdAll');
    var fld_1 = $.trim($('#firstname').val()).length ? $('#firstname').attr('name') + ':  ' + $('#firstname').val() + '\n' : '';
    var fld_2 = $.trim($('#lastname').val()).length ? $('#lastname').attr('name') + ':  ' + $('#lastname').val() + '\n' : '';
    var fld_3 = $.trim($('#street_number').val()).length ? $('#street_number').attr('name') + ':  ' + $('#street_number').val() + '\n' : '';
    var hold_all_fields = fld_1 + fld_2 + fld_3;
    mytextareaFld.val(hold_all_fields);
}

http://jsfiddle.net/6JHRT/4/

于 2012-06-07T16:07:57.810 に答える
0

これを試して:

    function combineFields(event) {
        $('#ta_holdAll').val('');
        $("#firstname,#lastname, #street_number").each(function(){
            if ($(this).val() != '') {
               var val = $(this).attr('name')+':  '+$(this).val();
               var mytextareaFld = $('#ta_holdAll');
              mytextareaFld.val(mytextareaFld.val() + val + '\n');
            }
        })
  }

http://jsfiddle.net/6JHRT/7/

于 2012-06-07T16:26:55.153 に答える