HTML 表单返回 NULL 字段答案

【问题标题】：HTML form returns NULL fieldsHTML 表单返回 NULL 字段
【发布时间】：2015-08-08 02:41:35
【问题描述】：

我有一个包含几个字段的基本表单，我想在提交代码之前对其进行验证。但是，当我将表单数据传递给 js 时，它说字段为空。请问有什么帮助吗？我是 JS 的新手，所以请耐心等待。相关表格。有一个按钮可以切换表单显示，但我认为这对此没有任何影响。

<div id = "new_bk" style="display: none;">
    <form id = "New_Book" onsubmit = "javscript: return(FormValidate());">
        Book Name:<br>
        <input type="text" name="book_name">

        <br>
        Author name:<br>
        <input type="text" name="author_name">

        <br>
        ISBN:<br>
        <input type="text" name="ISBN">

        <br>
        Release Date:<br>
        <input type="text" name="release_date">

        <br>
        Price:<br>
        <input type="text" name="price">

        <br>
        Stock:<br>
        <input type="text" name="stock">

        <br>
        Sold:<br>
        <input type="text" name="sold">

        <br>
        Restock amount:<br>
        <input type="text" name="restock">

        <br>
        Rating:<br>
        <input type="text" name="rating">

        <br>
        Reviews:<br>
        <input type="text" name="reviews">

        <br>
        <input type="submit" value="Submit">
    </form>
</div>

和js

function FormValidate(){
    // if(document.getElementById("book_name").value.length>0){
    //     alert("ok");
    // }else{
    //     alert("not ok");
    // }
    alert("Name is: "  + document.getElementById('book_name').value);
    if(document.New_Book.book_name.value == ""){
        alert("sdkg");
        return false;
    }
    return true;
}

但是这不会触发警报框。如果我把它切换到

alert(document.getElementById('book_name'));

它给了我一个空值。

任何和所有的帮助将不胜感激。哦，万一这很重要。该 js 位于一个外部文件中，该文件在 html 文件的 body 标记末尾引用。

更新

表单现在可以正确发送数据。但现在发生了一些奇怪的事情。

alert("1");

if(document.New_Book.book_name.value == ''){
    alert("Input book name please");
    return false;
}

alert("2");

此代码段只会触发 alert("1") 然后结束。失败场景警报和警报（“2”）都不会被触发。任何想法为什么？

【问题讨论】：

我不认为你可以直接引用表单Id...我不会推荐它
@BrianMains 抱歉。这只是我使用 Java 时的习惯 :( 天哪，我感到很尴尬。问这些愚蠢的问题。再次感谢您为我解决问题

标签： javascript html forms

【解决方案1】：

对于此代码：

alert(document.getElementById('book_name'));

请注意，文本框没有您尝试跟踪的 id 属性。

<input type="text" name="book_name">

更改添加ID属性：

<input type="text" id="book_name" name="book_name">

它会起作用的。

【讨论】：

天哪。我觉得自己像个傻瓜。我怎么没看到？太感谢了！我会尽快接受这个作为答案。
每个人都会遇到这种情况?。谢谢
请帮忙？
你为什么使用new_book？我建议反对并使用 document.getElememtById('book_name').value

【解决方案2】：

您在此处列出了“名称”表单 - 这对 PHP 来说更好。如果你通过 id 来拉它，你需要指定 id="[your value here]" 让它工作。为您的标签添加一个额外的字段

【讨论】：

【解决方案3】：

您正在尝试通过其ID 获取元素，但您没有为您的元素设置任何 ID，因此您需要添加

<input type="text" name="book_name" id="book_name">

但是，我认为更聪明的做法是一次选择所有输入，然后循环通过它们进行验证。例如，您可以使用 querySelectorAll 来做到这一点：

var allInputs = document.querySelectorAll('form > input');
for (var i = 0; i<allInputs.length;i++) {
    if (allInputs[i].value == ''){ 
        alert(allInputs[i].getAttribute('name') + ' is not filled');
    }
}

【讨论】：

【解决方案4】：

将您的代码更改为 document.getElementByName('book_name') 或者如果您想按 ID 选择 html 应该如下所示 <input type="text" id="book_name">

按名称属性检索元素：document.getElementByName('book_name') 参考：http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp

通过 id 属性检索元素：document.getElementById('book_name') 参考：http://www.w3schools.com/jsref/met_document_getelementbyid.asp

【讨论】：