CODEWITHSUNDEEP
javascripthtmlforms
Irtza.QC
Irtza.QC

Reputation: 1136

HTML form returns NULL fields

I have a basic form with several fields that i want to validate before submitting the code. However when i pass the form data to the js it says that the fields are null. Any help please? Im new at JS so please be patient with me. The relevant form. Theres a button to toggle the forms display but i dont think that has any effect on this. 

<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>

and the 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;
}

However this does not trigger the alert box. and if i switch it to 

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

it gives me a null.

Any and all help would be much appreciated. Oh and in case this matters. The js is in an external file that is referenced at the end of the body tag of the html file.

UPDATE

the form sends the data correctly now. but now something odd happens. 

alert("1");

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

alert("2");

this code segment will only trigger alert("1") then end. Neither the fail scenario alert nor alert("2") are triggered. any ideas why?

Upvotes: 0

Views: 5250

Answers (4)

Katie
Katie

Reputation: 21

You have the form "name" listed there - that's better for PHP. If you're pulling it by the id you need to specify id="[your value here]" to get it to work. Add an additional field to your tags

Upvotes: 1

Tatarin
Tatarin

Reputation: 1298

Change your code to document.getElementByName('book_name') or if you want to select by ID html should look like this <input type="text" id="book_name">

Retrieving element by name attribute: document.getElementByName('book_name') Reference: http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp

Retrieving element by id attribute: document.getElementById('book_name') Reference: http://www.w3schools.com/jsref/met_document_getelementbyid.asp

Upvotes: 0

baao
baao

Reputation: 73291

You are trying to get an element by its ID, but you do not have any IDs set to your elements, so you need to add 

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

However, I think more clever would be to select all inputs at once and then loop through them for validation. You can do that with querySelectorAll for example:

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');
    }
}

Upvotes: 0

Brian Mains
Brian Mains

Reputation: 50728

For this code:

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

Notice the textbox has no id attribute that you are trying to traget.

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

Change to add an ID attribute:

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

and it will work.

Upvotes: 3

Related Questions