SpringとJavascriptがフィールドからデータを送信しない

Question

JavascriptとSpringのコーディングが初めてです。

これは、Springフレームワークで動作するWebアプリケーションで、フロントエンドとjQueryを使用したMustacheテンプレートです。

新しいフォームフィールド（id="exampleTextarea"）を実際の例に追加したいもの。私はこの問題はJavaScriptの部分にあると思うので、Javaコードをチェックして、追加されたフィールド値にnullを返します。

誰かが私に欠けているものを教えていただけますか？

post.html私は新しいフィールドを追加しました。笑顔の複製が存在しました。機能を変更されたのjavascriptファイルgraphstory.jsで

<!-- add textarea in form-->  
         <div class="form-group"> 
          <label for="exampleTextarea" class="col-sm-2 control-label" >Textarea</label> 
          <div class="col-sm-10 "> 
          <textarea type="text" class="form-control input-sm" id="exampleTextarea" name="exampleTextarea" rows="3"></textarea> 
          </div> 
         </div> 

。 addContent（）、contentformToJSON（）、

.on（）

$（ '＃のcontentAddEdit'）。上（ 'クリック'、 '＃のaddcontent'、機能（）{ コンソール上.log（$（this）.text（））;

if ($("#contentform").is(":visible")) { 
    $("#addcontent").text('Add Content'); 
    $("#contentform")[0].reset(); 
    $("#contentform").hide(); 
    $("#btnSaveContent").text('Add Content XXX'); 
}else{ 
    $("#contentform").show(); 
    $("#addcontent").text("Cancel"); 
    $("#btnSaveContent").text('Add Content'); 

} 
return false; 

}）;

addContent（）

function addContent(){ 
    $.ajax({ 
     type: 'POST', 
     contentType: 'application/json', 
     url: '/posts/add', 
     dataType: "json", 
     data: contentformToJSON(), 
     success: function(data, textStatus, jqXHR){ 

      $('#content').prepend('<tr><td><a href="'+data.url+'" target="_blank">'+data.title+'</a> 
        <br/>tags: '+data.tagstr+' :: 
        //text fild 
        <br/>Textarea: '+data.exampleTextarea+' :: 
         Posted by '+data.userNameForPost+' at <a href="/viewpost/'+data.contentId+'">'+data.timestampAsStr+'</a><br/></td></tr>'); 

      $('#title').val(""); 
      $('#url').val(""); 

      $("#contentform").hide(); 
      $("#addcontent").text('Add Content'); 
     }, 
     error: function(jqXHR, textStatus, errorThrown){ 
      alert('add contnt error: ' + errorThrown); 
     } 
    }); 
} 

contentformToJSON（）

function contentformToJSON() { 

/* added text fild*/ 
if($("#tagstr").length == 0 | $("#exampleTextarea").length == 0) { 
    return JSON.stringify({"title": $('#title').val(), "url": $('#url').val() }); 
}if else($("#tagstr").length == 0){ 
    return JSON.stringify({"title": $('#title').val(), "url": $('#url').val(), "exampleTextarea": $('#exampleTextarea').val() }); 
}if else($("#exampleTextarea").length == 0){ 
    return JSON.stringify({"title": $('#title').val(), "url": $('#url').val(), "tagstr": $('#tagstr').val() }); 
    }else{ 
return JSON.stringify({"title": $('#title').val(), "url": $('#url').val(), "tagstr": $('#tagstr').val(),"exampleTextarea": $('#exampleTextarea').val() }); 
} 
} 

私は唯一の2つのファイルにコードを変更しpost.html、ここからのコードをgraphstory.jsファイル。

は、ここで私は、このスタックのための治療法を発見した

<div class="global/base-app"><!-- add textarea in form-->  
         <div class="form-group"> 
          <label for="exampleTextarea" class="col-sm-2 control-label" >Textarea</label> 
          <div class="col-sm-10 "> 
          <input type="text" class="form-control input-sm" id="exampleTextarea" name="exampleTextarea" rows="3"></textarea> 
          </div> 
         </div> 

Answer 1

post.htmlです。 htmlタグ<textarea>から作成されました。 <input>と交換しても問題ありません。