2
私はSpring Boot、Thymeleaf、Mysql、Html-Bootstrap、JQueryをベースにしたSTS 3.9.0ツールを使用しています。私は 説明Thymeleafを使用して動的な入力ボックスデータを取得する方法は？
1.Whileクリックすると、jQueryのと呼ばれ、それが入力を生成します共同所有者の追加]ボタンを。.. dynamicalyの値がthymeleafに入力ボックスを生成し取得する必要があります
2.I箱@Controllerページに動的に生成された入力ボックスの値の値を取得する必要があり
jQueryの - 動的に生成された入力ボックスコード
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $("#adding_CownerInp"); //Fields wrapper
var add_button = $("#addButton_Cowner"); //Add button ID
var x = 0; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment now x=1 after x++ x=2,so next code 2%2==0 is true
$(wrapper).append('<div class="form-row">' \t \t \t
\t \t +'<!-- Owner Name -->'
\t \t +'<div id="TextBoxDiv'+x+'" class="form-group col-md-4">'
\t \t +'<label for="cowner'+x+'">Name</label>'
\t \t +'<input id="cowner'+x+'" th:field="*{listcoowner.coownername}" type="text" class="form-control" placeholder="Enter Name"></input>'
\t \t +'</div>'
\t \t \t
\t \t +'<!-- Owner Phone Number -->'
\t \t +'<div class="form-group col-md-4">'
\t \t +'<label for="oph'+x+'">Phone Number</label>'
\t \t +'<input id="oph'+x+'" th:field="*{listcoowner.cophone}" type="text" class="form-control" placeholder="+91-999-999-9999"></input>'
\t \t +'</div>'
\t \t \t
\t \t +'<!-- Owner Email -->'
\t \t +'<div class="form-group col-md-3">'
\t \t +'<label for="email'+x+'">Email</label>'
\t \t +'<input id="email'+x+'" th:field="*{listcoowner.coemail}" type="email" class="form-control" placeholder="[email protected]"></input>'
\t \t +'</div>'
\t \t +'<a href="#"class="remove_field col-md-1"> X </a>'
\t \t +'</div>');
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Flat Addition Form</title>
<!-- Bootstrap Library CDN link -->
<link rel="stylesheet"
\t href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
\t integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
\t crossorigin="anonymous">
\t
<!-- this is for bootstrap spinner -->
<link href="../libs/jquery.bootstrap-touchspin.min.css">
</head>
<body>
<!-- Bootstrap/Jquery CDN library files -->
\t <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
\t <script
\t \t src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
\t \t integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
\t \t crossorigin="anonymous"></script>
\t <script
\t \t src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
\t \t integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
\t \t crossorigin="anonymous"></script>
\t \t
\t <!--External Script for add/remove input -->
\t <script src="../js/AddingCoOwnerInput.js" type="text/javascript"></script>
\t <!-- Panel Starts -->
\t <div class="panel panel-default">
\t \t <div class="panel-heading">
\t \t \t <h3 class="panel-title">Property Addition Form</h3>
\t \t </div>
\t \t <div class="panel-body">
\t \t \t <form action="/saveflat" th:action="@{/saveflat}" th:object="${flatDetails}" role="form" class="form-horizontal" id="propertyreg">
\t \t \t \t <div style="width: 900px" class="container-fluid">
\t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t <label for="societyname">Society Name</label>
\t \t \t \t \t \t <select class="form-control" id="societyname" th:field="*{entPropertyMaster}">
\t \t \t \t \t \t \t <option th:each="propertydetails:${propertydetails}" th:value="${propertydetails}" th:text="${propertydetails.propertyname}"></option>
\t \t \t \t \t \t </select>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t <label for="buildinglist">Building/Wing/Block *</label>
\t \t \t \t \t \t <select
\t \t \t \t \t \t \t class="form-control" id="buildinglist" th:field="*{entPropertySub}">
\t \t \t \t \t \t \t <option th:each="propertydetails:${propertydetails.blockListPropSub}" th:value="${propertydetails}" th:text="${propertydetails.blockname}"></option>
\t \t \t \t \t \t </select>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t <label for="Flat">Flat/Villa/Shop No *</label>
\t \t \t \t \t \t <input th:field="*{flatname}"
\t \t \t \t \t \t \t type="text" class="form-control" id="flat" placeholder="Ex : 123..">
\t \t \t \t \t </div>
\t \t \t \t <div class="form-row">
\t \t \t \t \t <!-- super buildup area -->
\t \t \t \t \t <div class="form-group col-md-4">
\t \t \t \t \t \t <label for="sbuild" class="col-form-label">Super Buildup
\t \t \t \t \t \t \t Area</label>
\t \t \t \t \t \t \t <input th:field="*{superbuildup}" type="text" class="form-control" id="sbuild"
\t \t \t \t \t \t \t placeholder="area sqft (Ex : 1200)"></input>
\t \t \t \t \t </div>
\t \t \t \t \t <!-- buildup area -->
\t \t \t \t \t <div class="form-group col-md-4">
\t \t \t \t \t \t <label for="build" class="col-form-label">Buildup Area</label>
\t \t \t \t \t \t <input th:field="*{buildup}"
\t \t \t \t \t \t \t type="text" class="form-control" id="build"
\t \t \t \t \t \t \t placeholder="area sqft (Ex : 1200)"></input>
\t \t \t \t \t </div>
\t \t \t \t \t <!-- carpet area -->
\t \t \t \t \t <div class="form-group col-md-4">
\t \t \t \t \t \t <label for="carpet" class="col-form-label">Carpet Area</label>
\t \t \t \t \t \t <input th:field="*{carpetarea}"
\t \t \t \t \t \t \t type="text" class="form-control" id="carpet"
\t \t \t \t \t \t \t placeholder="area sqft (Ex : 1200)"></input>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="form-row">
\t \t \t \t \t <!-- No of bedrroms -->
\t \t \t \t \t <div class="from-group col-md-6">
\t \t \t \t \t \t <label for="bedrooms"> Number Of Bedrooms </label>
\t \t \t \t \t \t <input th:field="*{bedrooms}"
\t \t \t \t \t \t \t id="bedrooms" type="text" value="" name="bedrooms" class="form-control">
\t \t \t \t \t </div>
\t \t \t \t \t <!-- No of bathrooms -->
\t \t \t \t \t <div class="form-group col-md-6">
\t \t \t \t \t \t <label for="bathrooms">Number Of Bathrooms</label>
\t \t \t \t \t \t <input th:field="*{bathrooms}"
\t \t \t \t \t \t \t id="bathrooms" type="text" value="" name="bathrooms" class="form-control">
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <!-- Parking Number -->
\t \t \t <div class="form-row">
\t \t \t \t \t <div class="form-group col-md-6">
\t \t \t \t \t <label for="parking">Parking</label>
\t \t \t \t \t <input id="parking" th:field="*{parking}" type="text" value="" class="form-control" placeholder="Ex : A1 or 123.."></input>
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div class="form-group col-md-6">
\t \t \t \t \t <label for="pfloor">Parking Floor</label>
\t \t \t \t \t <input id="pfloor" th:field="*{parkingfloor}" type="text" value="" class="form-control" placeholder="Ex : A1 or 123.."></input>
\t \t \t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <hr>
\t \t \t
\t \t \t <div class="form-row">
\t \t \t <!-- Owner Name -->
\t \t \t <div id="TextBoxDiv" class="form-group col-md-4">
\t \t \t \t <label for="owner">Owner Name</label>
\t \t \t \t <input id="owner" th:field="*{ownername}" type="text" value="" class="form-control" placeholder="Enter Name"></input>
\t \t \t </div>
\t \t \t
\t \t \t <!-- Owner Phone Number -->
\t \t \t <div class="form-group col-md-4">
\t \t \t <label for="oph">Phone Number</label>
\t \t \t <input id="oph" th:field="*{ownerphone}" type="text" value="" class="form-control" placeholder="+91-999-999-9999"></input>
\t \t \t </div>
\t \t \t
\t \t \t <!-- Owner Email -->
\t \t \t <div class="form-group col-md-4">
\t \t \t <label for="email">Email</label>
\t \t \t <input id="email" th:field="*{owneremail}" type="email" value="" class="form-control" placeholder="[email protected]"
\t \t \t aria-describedby="emailHelp"></input>
\t \t \t <small id="emailHelp" class="form-text text-muted">We'll never share your email & Phone Number with anyone else.</small>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <!-- co-owner -->
\t \t \t
\t \t \t <div id="adding_CownerInp" class="col-md-12">
\t \t \t <label for="coowner" >Co-Owner</label>
\t \t \t </div>
\t \t \t
\t \t \t <div class="form-group col-md-12">
\t \t \t \t <input id="addButton_Cowner" type="button" value="Add Co-Owner" class="form-control col-md-4"></input>
\t \t \t </div>
\t \t \t
\t \t \t <!-- submit form -->
\t \t \t <div class="form-group">
\t \t \t <center>
\t \t \t <button type="submit" class="btn btn-primary">Save</button>
\t \t \t <button type="reset" class="btn btn-danger">Reset</button>
\t \t \t </center>
\t \t \t </div>
<!-- Container fluid ends -->
\t \t \t \t </div>
\t \t \t </form>
\t \t </div>
\t </div>
</body>
</html>[コントローラページコード
//To save the flat registration details
@PostMapping("/flatreg/saveflat")
public ResponseMsg doSaveFlatDetails(@ModelAttribute EntFlatMaster flatDetails)
{
ResponseMsg responsemsg = new ResponseMsg();
EntFlatMaster flatMaster = new EntFlatMaster();
try {
String logResponse = null;
/*for Master*/
if(flatDetails!=null)
{
flatMaster = serflatDetails.doSaveFlatDetails(flatDetails);
/*for Log*/
if(flatMaster!=null)
{
logResponse = doSaveLogFlatDetails(flatDetails,flatMaster.getPkflatid());
}
/*for response message to web for master and Log both are saved checking process*/
if(logResponse.equals("saved"))
{
responsemsg = new ResponseMsg("saved",flatMaster);
}
else
{
responsemsg = new ResponseMsg("failed",flatMaster);
}
}
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
responsemsg = new ResponseMsg("failed",flatMaster);
}
return responsemsg;
}
してください事前にいずれかのヘルプme..Thanks