【JavaScript入門】form.actionで送信先を動的に変更する方法｜ラジオボタン・条件分岐の実践サンプル付き

<script>
function sendForm() {
  const formElem = document.getElementById("form1");

  // 「感想」が選択された場合
  if (formElem.radio1[0].checked) {
    if (!confirm("送信内容はご感想でよろしいですか？")) return false;
    formElem.action = "impression.html";
  }

  // 「質問」が選択された場合
  if (formElem.radio1[1].checked) {
    if (!confirm("送信内容はご質問でよろしいですか？")) return false;
    formElem.action = "question.html";
  }
}
</script>

<form id="form1" onsubmit="return sendForm()">
  <p>
    <input type="radio" name="radio1" checked> 感想
    <input type="radio" name="radio1"> 質問
  </p>

  <p><textarea name="text" cols="30" rows="5"></textarea></p>

  <p>
    <input type="submit" value="送信">
    <input type="reset" value="クリア">
  </p>
</form>

const form = document.getElementById("form2");
const select = document.getElementById("category");

select.addEventListener("change", () => {
  if (select.value === "contact") {
    form.action = "contact.php";
  } else if (select.value === "support") {
    form.action = "support.php";
  }
});

if (message.length < 20) {
  form.action = "short.php";
} else {
  form.action = "long.php";
}