Spring + Thymeleaf で電話番号から住所を自動入力する方法

実現したいこと
郵便番号から住所を自動入力する処理をして、リストに登録する処理をしたいです。

発生している問題
郵便番号を入力しましたが、住所が自動入力されません。
入力用のHtmlファイルで、郵便番号と住所のinputタグにあるth:fieldを外すと、ちゃんと郵便番号から自動で住所が入力されますが、登録先のリストには表示されません。入力した名前と電話番号だけが表示され、郵便番号と住所が空白になります。

/**
 * ユーザー情報 Controller
 */
@Controller
public class UserController {
	
	/**
	 * ユーザー情報 Service
	 */
	@Autowired
	private UserService userService;
	
	/**
	 * ユーザー情報一覧画面を表示
	 * @param model Model
	 * @return ユーザー情報一覧画面
	 */
	@GetMapping(value="/user/list")
	public String displayList(Model model) {
		List<User> userlist = userService.searchAll();
		model.addAttribute("userlist", userlist);
		return "user/list";
	}
	
	/**
	 * ユーザー新規登録画面を表示
	 * @param model Model
	 * @return ユーザー情報一覧
	 */
	@GetMapping(value = "/user/add")
	public String displayAdd(Model model) {
		model.addAttribute("userRequest", new UserRequest());
		return "user/add";
	}
	
	/**
	 * ユーザー新規登録
	 * @param userRequest リクエストデータ
	 * @param model Model
	 * @return ユーザー情報一覧画面
	 */
	@RequestMapping(value = "/user/create", method = RequestMethod.POST)
	public String create(@Validated @ModelAttribute UserRequest userRequest, BindingResult result, Model model) {
		
		if(result.hasErrors()) {
			// 入力チェックエラーの場合
			List<String> errorList = new ArrayList<String>();
			for(ObjectError error : result.getAllErrors()) {
				errorList.add(error.getDefaultMessage());
			}
			model.addAttribute("validationError", errorList);
			return "user/add";
		}
		// ユーザー情報の登録
		userService.create(userRequest);
		return "redirect:/user/list";
	}

	/**
	 * ユーザー情報詳細画面を表示
	 * @param id 表示するユーザーID
	 * @param model Model
	 * @return ユーザー情報詳細画面
	 */
	@GetMapping("/user/{id}")
	public String displayView(@PathVariable Long id, Model model) {
		User user = userService.findById(id);
		model.addAttribute("userData", user);
		return "user/view";
	}
	
	/**
	 * ユーザー編集画面を表示
	 * @param id 表示するユーザーID
	 * @param model Model
	 * @return ユーザー編集画面
	 */
	@GetMapping("/user/{id}/edit")
	public String displayEdit(@PathVariable Long id, Model model) {
		User user = userService.findById(id);
		UserUpdateRequest userUpdateRequest = new UserUpdateRequest();
		userUpdateRequest.setId(user.getId());
		userUpdateRequest.setName(user.getName());
		userUpdateRequest.setPhone(user.getPhone());
		userUpdateRequest.setAddress(user.getAddress());
		model.addAttribute("userUpdateRequest", userUpdateRequest);
		return "user/edit";
	}
	
	/**
	 * ユーザー更新
	 * @param userRequest リクエストデータ
	 * @param model Model
	 * @return ユーザー情報詳細画面
	 */
	@RequestMapping(value = "/user/update", method = RequestMethod.POST)
	public String update(@Validated @ModelAttribute UserUpdateRequest userUpdateRequest, BindingResult result,
			Model model) {
		
		if(result.hasErrors()) {
			List<String> errorList = new ArrayList<String>();
			
			for(ObjectError error : result.getAllErrors()) {
				errorList.add(error.getDefaultMessage());
			}
			model.addAttribute("validationError", errorList);
			return "user/edit";
		}
		
		// ユーザー情報の更新
		userService.update(userUpdateRequest);
		return String.format("redirect:/user/%d", userUpdateRequest.getId());
	}
	
	/**
	 * ユーザー情報削除
	 * @param id 表示するユーザーID
	 * @param model Model
	 * @return ユーザー情報詳細画面
	 */
	@GetMapping("/user/{id}/delete")
	public String delete(@PathVariable Long id, Model model) {
		// ユーザー情報の削除
		userService.delete(id);
		return "redirect:/user/list";
	}
}

head.html
1<head th:fragment="head_fragment(title, scripts, links)">
2  <title th:text="${title}"></title>
3  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
4  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
5  <script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
6  <meta charset="utf-8" />
7</head>>
8

add.html
1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
3<head  th:replace="common/head :: head_fragment(title = 'ユーザー新規登録', scripts = ~{::script}, links = ~{::link})"></head>
4<body>
5  <div class="container">
6    <div th:if="${validationError}" th:each="error : ${validationError}">
7      <label class="text-danger" th:text="${error}"></label>
8    </div>
9    <h1>ユーザー新規登録</h1>
10    <form th:action="@{/user/create}" th:object="${userRequest}" th:method="post">
11      <div class="form-group">
12        <label>名前：<span class="text-danger">※</span></label>
13        <input type="text" th:field="*{name}" size="60">
14      </div>
15
16      <div class="form-group">
17        <label>郵便番号：</label>
18        <input type="text" th:field="*{zipcode}" name="zip21" size="4" maxlength="3"> － <input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','addr21','addr21');">
19 
20      </div>
21      <div class="form-group">
22        <label>住所：</label>
23        <input type="text"  name="addr21" size="60" th:field="*{address}"> 
24      </div>
25
26      <div class="form-group">
27        <label>電話番号：<span class="text-danger">※</span></label>
28        <input type="text" th:field="*{phone}" size="60">
29      </div>
30      <br />
31      <div class="text-center">
32        <a href="/user/list" class="btn btn-secondary">キャンセル</a>
33        <input type="submit" value="　登録　" class="btn btn-primary">
34      </div>
35      </form>
36    </div>
37</body>
38</html>

m.ts10806

2022/02/23 22:57 編集

ajaxzip3を利用するのでしたら本質的にはSpringもThymeleafも関係ない話と思います。

行動規範の内容に同意します

回答1件

ベストアンサー

ブラウザ表示したときのHTMLを確認してみればわかると思いますが、name属性、id属性がth:fieldの影響を受けているはずです。保持しておくフィールド名をajaxzipにあわせるか、ajaxzipのコードを改修するかどちらかになります（CDN利用されているようなので後者はajaxzip3.jsをダウンロードしてこないとできませんが）

投稿2022/02/23 21:52

編集2022/02/23 21:52

m.ts10806

総合スコア80850