使用带有 POST 方法的 javascript

Question

对此感到抱歉，但我需要您的帮助： 我需要在 javascript 中获取我的值，因为它已填写在我的表单中，而且我不知道该怎么做，因为每当我尝试搜索时，它都是为至少对 javascript 有一定了解的人制作的。我没有，但我尽力了，我努力的结果在这里：

function validateForm() {
var x = form.('form').elements["sexe"];
 if (x == null) {
  alert("Un sexe doit être sélectionné");
  return false;
 }
}

我需要通过 POST 方法完成它，因为 get 是不允许的：

<form action="Monformulairedereferencement." method="post" id="sexe" name="form">
        <div id="BlueBorder1">
            sexe
            <input type="radio" id="Homme" name="sexe" value="Homme" aria-checked="true">
                <label for="Homme">Homme</label>
            <input type="radio" id="Femme" name="sexe" value="Femme" aria-checked="true">
                <label for="Femme">Femme</label>
            <input type="radio" id="Autre" name="sexe" value="Autre" aria-checked="true">
                <label for="Autre">Autre</label>
        </div>
        <div>
            <label for="civilite">civilite</label>
                <select name="civilite" id="civilite">
                    <option value="M.">M.</option>
                    <option value="Mme.">Mme.</option>
                </select>
        </div>
        <div>
            <label for="nom">nom</label>
                <input type="text" id="nom" name="nom" minlength="2">
        </div>
        <div id="BlueBorder2">
            <label for="email">email</label>
                <input type="email" id="email">
        </div>
        <div>
            <label for="telephone">telephone</label>
                <input type="tel" id="telephone" name="telephone">
        </div>
        <div>
            <label for="website">website</label>
                <input type="url" name="website" id="website">
        </div>
        <div id="BlueBorder3">
            <label for="datedenaissance">date de naissance</label>
                <input type="date" id="datedenaissance" name="date de naissance">
        </div>
        <div>
            hobbies
            <input type="checkbox" id="Jeuxvideo" name="hobbies">
                <label for="Jeuxvideo">Jeux video</label>
            <input type="checkbox" id="Cinema" name="hobbies">
                <label for="Cinema">Cinema</label>
            <input type="checkbox" id="Lecture" name="hobbies">
                <label for="Lecture">Lecture</label>
            <input type="checkbox" id="Sport" name="hobbies">
                <label for="Sport">Sport</label>
            <input type="checkbox" id="Informatique" name="hobbies">
                <label for="Informatique">Informatique</label>
        </div>
            <input id="token" name="token" type="hidden" value="my first website">
        <div>
            <label for="validation">validation</label>
                <input type="submit" value="Envoyer le formulaire" id="validation">

如果您有任何关于什么不起作用或什么的线索，那么我很乐意接受。我唯一的目标是提高，我目前非常糟糕。 祝您有美好的一天，感谢您的光临:)

Answer 1

要在 JS 中获取一个文本输入的值，你需要先获取这个输入然后获取它的值。

例如：<input type="text" id="nom" name="nom" minlength="2"> 要在 JS 中获取此输入值，您必须遵循 2 个步骤：

1. 将输入元素分配给变量 -> let nom = document.getElementById('nom');
2. 获取此输入元素的值 -> let nomValue = nom.value;

以前的方法可以应用于任何文本输入（文本、密码、电子邮件、...）、文本区域和选择菜单

对于复选框或单选按钮，您需要检查它们是否被选中，例如：<input type="radio" id="Homme" name="sexe" value="Homme" > 要检查这个，请按照2个步骤：

1. 将复选框或单选按钮分配给变量 -> let Homme = document.getElementById('Homme');
2. 检查此复选框或单选按钮是否被选中 -> if (Homme.checked) {console.log('Checked')} else {console.log('Checked')}

对于您的代码的简单验证方法，请遵循以下 sn-p：

<!-- HTML Form -->
<form action="x.php" method="post" id="sexe" name="form">
  <input type="text" id="nom" name="nom" minlength="2">
  <input type="radio" id="Homme" name="sexe" value="Homme">
  <input type="submit" value='Send' >
</form>

<!-- Validation Script -->
<script>
  // Get Form Itself 
  let myForm = document.getElementById('sexe');

  // Add Event To Form On Submit, Trigger The Validation Funcntion
  myForm.addEventListener('submit', validateForm)

  // Validate Form Function
  function validateForm(e) {
    // Get All Inputs In Your Form 
    let nom = document.getElementById('nom');      // Text Input
    let Homme = document.getElementById('Homme');  // Radio Input

    // Check Text Input Value If Not Empty
    if(nom.value === '') {
      // Prevent Form Submition
      e.preventDefault();
      // Alert Error Message
      alert('Name Can Not Be Empty');
    } 
    // Check If Radio Button Not Checked
    else if (!Homme.checked) {
      // Prevent Form Submition
      e.preventDefault();
      // Alert Error Message
      alert('Radio Button Is Required');
    }
    // If The Previous Two Validation Steps Is Done And No Errors, The Form Will Be Sent
  }
</script>          

Answer 2

在我看来，从表单中获取值的最简单方法是使用 addEventListners 和 Submit 事件。它看起来像一个 element.addEventListner('submit',function);

var forms = document.getElementsByTagName('form'); //we have selected whole form
function formSubmitted(){
  const emails = document.getElementsById('email');//select the email section 
  let emailValue = emails.value // it will give you the value of email after submitting 
}

forms.addEventListner('submit',formSubmitted);//eventlistern which run after submiting the data in form