javascript - 尝试使用javascript从表单中获取值

Question

我正在尝试从模态中获取值，但我没有得到我想要获取的值，控制台上的错误说我“无法读取 null 的属性'值'，在承诺中”，我'不明白发生了什么，一切看起来都很好，它应该可以工作。

这是我有表格的模态

 <!-- Modal Nombre y contraseña -->
    <div class="container">
      <div class="modal fade " id="completdetails">
        <div class="modal-dialog modal-md mw-80 ">
          <div class="modal-content border-0 rounded">
            <div class="modal-body mr-4 ml-4 pr-2 pl-2">
              <form id="completedetails" class="" >
                <div class="mb-5 mt-2">
                  <h3 class="text-center">
                    Completa los detalles de tu cuenta
                  </h3>
                </div>

                <div class="form-group ">
                  <label for="validationCustom01">Nombre completo</label>
                  <input maxlength="30" class="form-control " type="text" name="name" required />
                </div>

                <div class="form-group">
                  <label for="exampleInputPassword1">Contraseña</label>
                  <input maxlength="30" class="form-control " id="password" name="password" type="password" required />
                </div>

                <div class="form-group">
                  <label for="exampleInputPassword1">Nombre de tu empresa</label>
                  <input maxlength="30" class="form-control" id="company" name="company" type="text" required />
                </div>

                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" required />
                  <label class="form-check-label" for="defaultCheck1">
                    Acepto los términos de uso y política de privacidad
                  </label>
                </div>
                <input class="mt-3 mb-1 p-2 bg-warning font-weight-bold text-white border-0 rounded" id="btn_completedetails" type="submit" value="  Continuar  " />
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

这是我正在使用的 JS：

document.addEventListener('DOMContentLoaded', () => {
    console.log('Document is ready');
    const $form = document.querySelector('#completedetails');
    const $inputName = document.querySelector('#name');
    const $inputPassword = document.querySelector('#password');
    const $inputCompany = document.querySelector('#company');
    const $btn_completedetails = document.querySelector('#btn-completedetails');

    const url = "http://localhost:3000/register/";

    $form.addEventListener('submit', async (e) => {
        e.preventDefault();
        let name = $inputName.value;
        let password = $inputPassword.value;
        let company = $inputCompany.value;


        try {
            const response = await fetch(`${url}${company}${name}${password}`, { method: 'POST' });
            const result = await response.json();
            res.redirect('http://seth.com/dashboard.html?ftime=1');
        } catch (error) {
            $btn_completedetails.disabled = false;
            Swal.fire(
                'Correo no enviado',
                'Inténtelo más tarde',
                'error'
              );
        }
    })
})

标签： javascriptbootstrap-4bootstrap-modal

Answer 1

要匹配选择器，您需要在输入中添加 ID。例如，

<input maxlength="30" class="form-control " type="text" name="name" required />

需要id="name"这样document.querySelector('#name')才能找到它。