Q&A
＞画像をSubmitボタンの代わりに使用したいため、Submitの処理をJavascriptで作りました。
JavaScriptのコードを提示してください。
ただinput type=imageにすればsubmitボタンになりますが、それでは代用できませんか？
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/image
前提
現在Spring boot + Thymeleafで開発をしています。
初心者のため、詳しくご教授頂けると幸いです。
実現したいこと
画像をSubmitボタンの代わりに使用したいため、Submitの処理をJavascriptで作りました。
Eclipseで作成し、ローカルで動かしたときはうまくSubmit処理ができました。
しかし、Webサーバに移行し、Apache＋Tomcatで動かすと
Not Found
The requested URL was not found on this server.
のエラー画面になり、Submitできません。
Eclipseで動かすのと、Webサーバで動かすのは何が違うのでしょうか？
発生している問題・エラーメッセージ
Not Found The requested URL was not found on this server.
2022-09-02 15:27:39.023 DEBUG 12332 --- [0:1-8009-exec-8] o.s.web.servlet.DispatcherServlet : GET "/web-euctools/images/spacer.gif", parameters={} 2022-09-02 15:27:39.023 DEBUG 12332 --- [0:1-8009-exec-1] o.s.web.servlet.DispatcherServlet : GET "/web-euctools/images/btn_sakujo.gif", parameters={} 2022-09-02 15:27:39.023 DEBUG 12332 --- [0:1-8009-exec-8] o.s.w.s.handler.SimpleUrlHandlerMapping : Mapped to ResourceHttpRequestHandler [Classpath [META-INF/resources/], Classpath [resources/], Classpath [static/], Classpath [public/], ServletContext [/]] 2022-09-02 15:27:39.039 DEBUG 12332 --- [0:1-8009-exec-8] o.s.web.servlet.DispatcherServlet : Completed 304 NOT_MODIFIED 2022-09-02 15:27:39.039 DEBUG 12332 --- [0:1-8009-exec-8] o.s.web.servlet.DispatcherServlet : GET "/web-euctools/images/btn_kosin.gif", parameters={} 2022-09-02 15:27:39.039 DEBUG 12332 --- [0:1-8009-exec-8] o.s.w.s.handler.SimpleUrlHandlerMapping : Mapped to ResourceHttpRequestHandler [Classpath [META-INF/resources/], Classpath [resources/], Classpath [static/], Classpath [public/], ServletContext [/]] 2022-09-02 15:27:39.039 DEBUG 12332 --- [0:1-8009-exec-8] o.s.web.servlet.DispatcherServlet : Completed 304 NOT_MODIFIED 2022-09-02 15:27:39.039 DEBUG 12332 --- [0:1-8009-exec-1] o.s.w.s.handler.SimpleUrlHandlerMapping : Mapped to ResourceHttpRequestHandler [Classpath [META-INF/resources/], Classpath [resources/], Classpath [static/], Classpath [public/], ServletContext [/]] 2022-09-02 15:27:39.054 DEBUG 12332 --- [0:1-8009-exec-1] o.s.web.servlet.DispatcherServlet : Completed 304 NOT_MODIFIED
該当のソースコード
HTML
1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4 <meta charset="UTF-8"> 5 <link th:href="@{/css/style.css}" rel="stylesheet"> 6 <script th:src="@{/js/common.js}"></script> 7 <title>EUCtools</title> 8<title>ユーザー編集</title> 9</head> 10<body> 11<div id="Layer0" class="titleArea"> </div> 12<div id="Layer1" class="dateArea"><span th:text="${today}"></span></div> 13<div id="Layer2" class="userArea" rendered="#{gamenKyotu.syainName!=null}">ログインユーザー：<span th:text="${loginname}"></span></div> 14<div id="Layer3" class="endBtnArea"><a onclick="return closeWindow();"><img src="../../images/btn_end.gif" alt="終了" class="imgBtn"></a></div> 15<div id="Layer4" class="screenNaviArea"><span value="#{gamenKyotu.navigationBar}">ユーザー編集画面</span></div> 16<div id="Layer5" class="screenTitleArea1"></div> 17<div id="Layer6" class="screenTitleText"></div> 18<div id="Layer7"><span>X99-99-99G</span></div> 19<div id="Layer8" class="bodyAreaNew"> 20 <div class="container"> 21 <div th:if="${validationError}" th:each="error : ${validationError}"> 22 <label class="text-danger" th:text="${error}"></label> 23 </div> 24<form th:action="@{/userList/update}" th:object="${userDto}" th:method="post"> 25 <table cellpadding="0" cellspacing="0"> 26 <col style="width:150px"> 27 <col style="width:250px"> 28 <tr> 29 <td colspan="2" class="spacer"><img src="../../images/spacer.gif" height="20"></td> 30 </tr> 31 <tr> 32 <th>ユーザーＩＤ</th> 33 <td colspan=2 class="left"> 34 <p th:text="*{userid}"></p><input type="hidden" th:field="*{userid}" th:value="*{userid}"></input> 35 </td> 36 </tr> 37 <tr> 38 <th>パスワード</th> 39 <td colspan=2 class="left"> 40 <input type="text" size="10" maxlength="10" th:field="*{pswd}" th:value="*{pswd}" class="inputn"></input> 41 </td> 42 </tr> 43 <tr> 44 <th>パスワード再入力</th> 45 <td colspan=2 class="left"> 46 <input type="text" size="10" maxlength="10" th:field="*{repswd}" th:value="*{repswd}" class="inputn"></input> 47 </td> 48 </tr> 49 <tr> 50 <th>氏 名</th> 51 <td colspan=2 class="left"> 52 <input type="text" size="40" maxlength="30" th:field="*{user_name}" class="inputn"></input> 53 </td> 54 </tr> 55 <tr> 56 <th>グループＩＤ</th> 57 <td colspan=2 class="left"> 58 <select th:field="*{groupid}"> 59 <option value=""></option> 60 <option th:each="grouplist : ${grouplist}" th:value="${grouplist.groupid}" th:text="${grouplist.group_name}"></option> 61 </select> 62 </td> 63 </tr> 64 <tr> 65 <th>権限レベル</th> 66 <td colspan=2 class="left"> 67 <select th:field="*{permit}"> 68 <option value=""></option> 69 <option value="A">管理者</option> 70 <option value="B">利用ユーザ</option> 71 </select> 72 </td> 73 </tr> 74 </table> 75 </form> 76 </div> 77</div> 78<div id="Layer11" class="btnArea"> 79<table> 80<tr> 81<td width="10" class="nonp"> </td> 82<td width="110" class="nonp"><a onclick="formSubmit('/userList/update');"><img src="../../images/btn_kosin.gif" alt="更新" class="imgBtn" /></a></td><td width="10" class="nonp"> </td> 83<td width="110" class="nonp"><a onclick="formSubmit('/userList/delete');"><img src="../../images/btn_sakujo.gif" alt="削除" class="imgBtn" /></a></td><td width="10" class="nonp"> </td> 84<td width="110" class="nonp"> </td><td width="10" class="nonp"> </td> 85<td width="110" class="nonp"> </td><td width="10" class="nonp"> </td> 86<td width="110" class="nonp"> </td><td width="10" class="nonp"> </td> 87<td width="110" class="nonp"> </td><td width="10" class="nonp"> </td> 88<td width="110" class="nonp"> </td><td width="10" class="nonp"> </td> 89<td width="110" class="nonp"> </td><td width="10" class="nonp"> </td> 90<td width="110" class="nonp"><a th:href="@{/userList}"><img src="../../images/btn_modoru.gif" alt="戻る" class="imgBtn"/></a></td><td width="10" class="nonp"> </td> 91<td width="10" class="nonp"> </td> 92</tr> 93</table> 94</div> 95</body> 96</html>
Java（@Controller）
1@Controller 2public class UserController { 3 @Autowired 4 HttpSession session; 5 @Autowired 6 UserService userService; 7 @Autowired 8 GroupService groupService; 9 10 @PostMapping(value = "/userList/update") 11 public String update(@Validated @ModelAttribute UserDto userDto, BindingResult result, Model model){ 12 System.out.println(userDto.getUser_name()); 13 if (result.hasErrors()) { 14 List<String> errorList = new ArrayList<String>(); 15 for (ObjectError error : result.getAllErrors()) { 16 errorList.add(error.getDefaultMessage()); 17 } 18 model.addAttribute("validationError", errorList); 19 return "userEdit"; 20 } 21 // ユーザー情報の更新 22 userService.update(userDto); 23 return "redirect:/userList"; 24 } 25 26 /** 27 * ユーザー削除 28 * @param userRequest リクエストデータ 29 * @param model Model 30 * @return ユーザー情報詳細画面 31 */ 32 @GetMapping("/userList/delete") 33 public String delete(@PathVariable String userid) { 34 // ユーザー情報の削除 35 userService.delete(userid); 36 return "redirect:/userList"; 37 } 38}
Javascript
1function formSubmit(path){ 2 if(!path){ 3 alert('パスを指定してください'); 4 return; 5 } 6 let form = document.getElementsByTagName('form')[0]; 7 if(!form){ 8 alert('フォームが取得できませんでした'); 9 return; 10 } 11 form.action=path; 12 form.method="post"; 13 form.submit(); 14}
補足情報（FW/ツールのバージョンなど）
WebサーバはWindowsです。
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
ビルドの設定等々が分からないので何とも言えない部分はありますが
formSubmit('/userList/update');
コンテキストパスがあるのでしたら、これではパスが合いません。
th:actionと同じように@{}でURLを生成しましょう。
ただ、本当に「画像をSubmitボタンの代わりに使用したいため」だけでJavaScriptを使用する必要はないと思います。
先にコメントしたように、input type=imageにすればsubmitボタンになりますし、
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/image
JavaScriptを使いたいというのでしたら、imageのクリックイベントでform.submitすれば、わざわざリクエストURLを引数で渡さずともformのactionの設定値で送信できるので、先に回答したような対応も不要になります。
投稿2022/09/02 07:10
編集2022/09/02 07:12総合スコア80850
あなたの回答
tips
プレビュー
