Question

我有以下 JavaScript 代码，但收到一条错误消息：

未捕获的类型错误：无法读取未定义的属性“值””

特别是在这一行：const parola=form.parola.value;

<%- include('partials/header') %>

<form action="/signup">
    <h2>Kullanıcı Oluştur</h2>
    <label for="email">email</label>
    <input type="text" name="email" required/>
    <div class="email error"></div>
    <label for="email">Parola</label>
    <input type="password" name="email" required/>
    <div class="password error"></div>
    <button type="submit">Oluştur</button>
</form>

<%- include('partials/footer') %>

<script>
    const form=document.querySelector('form');

    form.addEventListener('submit',async (e)=>{
        e.preventDefault();

        const email=form.email.value;
        const parola=form.parola.value;
       // console.log(email,parola);

        try {
            const res=await fetch('/signup',{
                method:'POST',
                body:JSON.stringify({email,parola}),
                headers:{'Content-Type':'application/json'}
            });
        } catch (error) {
            console.log(error);
        }


    });
</script>

有什么建议吗？

Answer 1

你可以使用 FormData :

<form action="/signup">
    <h2>Kullanıcı Oluştur</h2>
    <label for="email">email</label>
    <input type="text" name="email" required/>
    <div class="email error"></div>
    <label for="email">Parola</label>
    <input type="password" name="password" required/>
    <div class="password error"></div>
    <button type="submit">Oluştur</button>
</form>

<script>

function handleSubmit(e) {
  e.preventDefault();
  const formData = new FormData(e.target);
  console.log('Object.fromEntries(formData)', Object.fromEntries(formData));
  return Object.fromEntries(formData); 
}


const form=document.querySelector('form');

    form.addEventListener('submit',async (e)=>{
        var formData = handleSubmit(e);
 
    
        try {
            const res=await fetch('/signup',{
                method:'POST',
                body:JSON.stringify(formData),
                headers:{'Content-Type':'application/json'}
            });
        } catch (error) {
            console.log(error);
        }
 

    });
</script>

工作演示：https://jsfiddle.net/cse20x61/3/

Answer 2

问题是 document.querySelector 的结果是 HTMLElementObject 所以如果你想要你的电子邮件，你应该这样做：

form.querySelector('input[name=email]').value

未捕获的类型错误：无法在我的 Javascript 注册和登录页面上读取未定义的属性“值”

2 个答案: