javascriptで値取得し、その結果を画面に出力したい

Question

疑問点
javascriptの値反映について
検索ボタン押下すると、javascript記載のOnclick()メソッドが呼ばれます。
formタグのname属性「checkForm」を受け取り、
checkboxにチェックした項目を「,（カンマ）」で繋げています。

その結果を、pタグのid属性「result」に出力しようとしています。

ですが、結果が出力されません。
検索ボタンを連続で押下すると、一瞬「1,2」などと出力されます。

どのような実装を施せば、実現するかご教示願います。

<form name="checkForm" method="post">
		<!-- <input id="search" type="text" th:action="@{/}" placeholder="検索">-->
		<input type="checkbox" name="skill" value="1">java
		<input type="checkbox" name="skill" value="2">sql
		<input type="checkbox" name="skill" value="3">css
		<input type="button" value="検索" onclick="Onclick()">
	</form>
<p id="result"></p>

function Onclick(){
	//フォームのnameから取得
	let fn = document.forms["checkForm"];
	let check = document.getElementsByName("skill");
	let result ="";

	for(let i=0; i<check.length; i++){
		if(check[i].checked){
			result += check[i].value + ",";
		}
	}
	let re = document.getElementById("result");
	re.textContent = result;
	fn.action = "/index/form";
	fn.submit();
}

@RequestMapping("/index")
@Controller
public class Main {

	@GetMapping()
	public String top(Model model) {

		return "toppage";
	}

	@PostMapping("form")
	public String form(Model model) {
		return "toppage";
	}

}

Answer 1

すでに回答があるとおりsubmitしなければいいだけですが
jsももう少し書きようがあると思います
Onclickという名前のユーザー関数は流石にまずそうです

<script>
click_func=()=>{
  const check = document.querySelectorAll("[name=skill]:checked");
  result = [...check].map(x=>x.value).join(",");
  document.querySelector('#result').textContent=result;
}
</script>
<form name="checkForm" method="post">
<input type="checkbox" name="skill" value="1">java
<input type="checkbox" name="skill" value="2">sql
<input type="checkbox" name="skill" value="3">css
<input type="button" value="検索" onclick="click_func()">
</form>
<p id="result"></p>

Answer 2

submitしてるから画面更新がはしってるため消えている

値を保持したままの表示にしたいのであれば
レスポンスに画面表示用の値をセットしなくてはならないと思います。