8425


jQuery, Javascript初心者なので質問させて頂きます。  
タブ切り替え要素の`input`, `textarea`の要素を一度に取得して確定を押した後に`append`に入力したいと思いますがうまくいきません。

他の記述方法やシンプルに書き換えることが可能でしたらご指導頂ければと思います。

[code]

    function saveField(obj) {
      var thisId = obj.parentNode.parentNode.parentNode.id;
      var AAInputValue = $('div[thisId]').children('#AA').find('input').val();
      var AATextValue = $('div[thisId]').children('#AA').find('textarea').val();
      var BBInputValue = $('div[thisId]').children('#BB').find('input').val();
      var BBTextValue = $('div[thisId]').children('#BB').find('textarea').val();
      var CCInputValue = $('div[thisId]').children('#CC').find('input').val();
      var CCTextValue = $('div[thisId]').children('#CC').find('textarea').val();
      var DDInputValue = $('div[thisId]').children('#DD').find('input').val();
      var DDTextValue = $('div[thisId]').children('#DD').find('textarea').val();
      var EEInputValue = $('div[thisId]').children('#EE').find('input').val();
      var EETextValue = $('div[thisId]').children('#EE').find('textarea').val();
    
      var headingOutputAA = document.createElement('h3');
      headingOutput.innerText = AAInputValue;
    
      var contentOutputAA = document.createElement('p');
      contentOutput.innerText = AATextValue;
    
      var headingOutputBB = document.createElement('h3');
      headingOutput.innerText = BBInputValue;
    
      var contentOutputBB = document.createElement('p');
      contentOutput.innerText = BBTextValue;
    
      var headingOutputCC = document.createElement('h3');
      headingOutput.innerText = CCInputValue;
    
      var contentOutputCC = document.createElement('p');
      contentOutput.innerText = CCATextValue;
    
      var headingOutputDD = document.createElement('h3');
      headingOutput.innerText = DDInputValue;
    
      var contentOutputDD = document.createElement('p');
      contentOutput.innerText = DDTextValue;
    
      var headingOutputEE = document.createElement('h3');
      headingOutput.innerText = EEInputValue;
    
      var contentOutputEE = document.createElement('p');
      contentOutput.innerText = EETextValue;
    
      var outputOuter = document.createElement('div');
      outputOuter.appendChild(headingOutputAA);
      outputOuter.appendChild(contentOutputAA);
      outputOuter.appendChild(headingOutputBB);
      outputOuter.appendChild(contentOutputBB);
      outputOuter.appendChild(headingOutputCC);
      outputOuter.appendChild(contentOutputCC);
      outputOuter.appendChild(headingOutputDD);
      outputOuter.appendChild(contentOutputDD);
      outputOuter.appendChild(headingOutputEE);
      outputOuter.appendChild(contentOutputEE);
    
      var child_object = document.getElementById('field');
      child_object.appendChild(outputOuter);
    }
[/code]

[code]

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
    <ul class="nav nav-pills" role="tablitst">
      <li class="active">
        <a href="#a" aria-controls="a" role="tab" data-toggle="tab">A</a>
      </li>
      <li>
        <a href="#b" aria-controls="b" role="tab" data-toggle="tab">B</a>
      </li>
      <li>
        <a href="#c" aria-controls="c" role="tab" data-toggle="tab">C</a>
      </li>
      <li>
        <a href="#d" aria-controls="d" role="tab" data-toggle="tab">D</a>
      </li>
      <li>
        <a href="#e" aria-controls="e" role="tab" data-toggle="tab">E</a>
      </li>
    </ul>
    
    <div class="tab-content" id="field">
      <div role="tabpanel" class="tab-pane active" id="a">
        <div id="AA">
          <div class="free-text">
            <h4>
              aaaa
            </h4>
            <input name="heading" type="text" rows="5" cols="80">
            <h5>
              bbbb
            </h5>
            <textarea name="content" id="" cols="80" rows="5"></textarea>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="b">
        <div id="BB">
          <!-- free text -->
          <div class="free-text">
            <h4>
              cccc
            </h4>
            <input name="heading" type="text" rows="5" cols="80">
            <h5>
              dddd
            </h5>
            <textarea name="content" id="" cols="80" rows="5"></textarea>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="c">
        <div id="CC">
          <div class="free-text">
            <h4>
              eeee
            </h4>
            <input name="heading" type="text" rows="5" cols="80">
            <h5>
              ffff
            </h5>
            <textarea name="content" id="" cols="80" rows="5"></textarea>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="d">
        <div id="DD">
          <div class="free-text">
            <h4>
              gggg
            </h4>
            <input name="heading" type="text" rows="5" cols="80">
            <h5>
             hhhh
            </h5>
            <textarea name="content" id="" cols="80" rows="5"></textarea>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="e">
        <div id="FF">
          <div class="free-text">
            <h4>
              iiii
            </h4>
            <input name="heading" type="text" rows="5" cols="80">
            <h5>
              jjjj
            </h5>
            <textarea name="content" id="" cols="80" rows="5"></textarea>
          </div>
        </div>
      </div>
      <ul class="list-inline">
        <li><a href="#">キャンセル</a>
        </li>
        <li><a href="#" onclick="saveField(this);">確定</a>
      </ul>
    </div>
[/code]


CC BY-SA 3.0
2015-03-26T06:14:32.993
8418
2015-03-27T01:03:23.780
8500
question
javascript jquery
jQueryでタブ切り替えされたフォーム複数要素を取得するには？


appendが見つかりませんがどこのタグのことをいっているんですか？  
jQueryセレクタはかなり幅広いのでそこから勉強し直した方がいいと思います。

[code]

    function saveField() {
      $('.tab-pane').find('input, textarea').each(function(){
          $('div#field').append('<div>' + $(this).prev().text() + $(this).val() + '</div>')
      });
    }
[/code]

viewはそのまま、saveField()だけを書き換えました。


CC BY-SA 3.0
2015-03-26T06:37:17.377
8421
2015-03-26T06:37:17.377
8396
8418
answer


jQueryではクリックイベント等のイベント駆動は`on()`を使って書きます。  
これで動きました。

各々の要素には`each()`で順次アクセスします。

[code]

    $(document).ready(function(){
    
      $(document).on('click', '#saveField', function(e){
        
        var tab = $(this).parents('.tab-content');
    
        tab.find('.tab-pane').each(function(index, element){
          tab.append($('<h3>').text($(element).find('input').val()));
          tab.append($('<p>').text($(element).find('textarea').val()));
        });
      });
    
    });
[/code]

[code]

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
    <ul class="nav nav-pills" role="tablitst">
      <li class="active"><a href="#a" aria-controls="a" role="tab" data-toggle="tab">A</a></li>
      <li><a href="#b" aria-controls="b" role="tab" data-toggle="tab">B</a></li>
      <li><a href="#c" aria-controls="c" role="tab" data-toggle="tab">C</a></li>
      <li><a href="#d" aria-controls="d" role="tab" data-toggle="tab">D</a></li>
      <li><a href="#e" aria-controls="e" role="tab" data-toggle="tab">E</a></li>
    </ul>
    
    <div class="tab-content" id="field">
      <div role="tabpanel" class="tab-pane active" id="a">
        <div id="AA">
          <div class="free-text">
            <h4>aaaa</h4><input name="heading" type="text" rows="5" cols="80">
            <h5>bbbb</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="b">
        <div id="BB">
          <!-- free text -->
          <div class="free-text">
            <h4>cccc</h4><input name="heading" type="text" rows="5" cols="80">
            <h5>dddd</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="c">
        <div id="CC">
          <div class="free-text">
            <h4>eeee</h4><input name="heading" type="text" rows="5" cols="80">
            <h5>ffff</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="d">
        <div id="DD">
          <div class="free-text">
            <h4>gggg</h4><input name="heading" type="text" rows="5" cols="80">
            <h5>hhhh</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane" id="e">
        <div id="FF">
          <div class="free-text">
            <h4>iiii</h4><input name="heading" type="text" rows="5" cols="80">
            <h5>jjjj</h5><textarea name="content" id="" cols="80" rows="5"></textarea>
          </div>
        </div>
      </div>
      <ul class="list-inline">
        <li><a href="#">キャンセル</a></li>
        <li><a href="#" id="saveField">確定</a></li>
      </ul>
    </div>
[/code]


CC BY-SA 3.0
2015-03-26T07:25:19.107
8425
2015-03-27T01:03:23.780
2015-03-27T01:03:23.780
7214
7214
8418
answer