If input field has no value, add a new value using JavaScript

Question

Using JavaScript I'm trying to put together some validation for my form. What I'm trying to achieve is that if one input field is left blank, then a value is automatically added to that field upon hitting submit.

I will start off by saying I attempted by using the answer from this question: If input value is blank, assign a value of “empty” with Javascript.

However, this did not work.

I then tried to use the following in my external .JS file:

validateForm();
function validateForm() {
    "use strict";
//POSITION VALIDATION
    var numberOf = document.forms.themainform.numberOf.value;
    if (numberOf === "") {
        numberOf.value = "-5";
    }
}

and I also attempted to use a variation of the other questions answer:

var numberOf = document.forms.themainform.getElementById('numberOf');

if(numberOf.value.length === 0) {
    numberOf.value = "-5";
}

But as before, no luck. Below is the code to my HTML form:

<script>validateForm();</script>
<form action="" method="post" name="themainform" onsubmit="return validateForm()">
<table>
<tr><td>Number Of</td>
<td><input type="text" name="numberOf" id="numberOf" size="5" maxlength="5"/></td>
</tr>
</table>
<input type="submit" name="themainform" value="submit"/>
<hr/>
</form>

Any help would be greatly appreciated!

since id should be different among the whole page I would wrote something like : numberOf = document.getElementById('numberOf') || defaultNumberOf; — Victor Drouin
– Victor Drouin, Commented Dec 7, 2016 at 20:22

onzinsky · Accepted Answer · 2016-12-07 20:36:21Z

1

You should call the validateForm() after the form is rendered so the html file should look like this

<form action="" method="post" name="themainform" onsubmit="return validateForm()">
    <table>
        <tr><td>Number Of</td>
        <tr><td><input type="text" name="numberOf" id="numberOf" size="5" maxlength="5"/></td>
        </tr>
    </table>
    <input type="submit" name="themainform" value="submit"/>
    <table/>
</form>
<script>validateForm();</script>

and in you js file, you can't set numberOf.value = "-5"; since numberOf is just a string, it should be the dom elment.

function validateForm() {
    "use strict";
//POSITION VALIDATION
    var numberOf = document.forms.themainform.numberOf;
    if (numberOf.value === "") {
        numberOf.value = "-5";
    }
}

edited Dec 7, 2016 at 20:36

onzinsky

6012 gold badges8 silver badges23 bronze badges

answered Dec 7, 2016 at 20:25

Anthony C

2,1572 gold badges17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joe Over a year ago

Thanks for your help, although I managed to figure it out using a different method, I tested your method and it worked perfectly also. Thank you!

Joe · Accepted Answer · 2016-12-07 20:31:58Z

0

Thanks for your assistance everyone. But I managed to figure it out :) However, I also tested Anthony's method and it also worked, so accepted his answer.

I used:

if(document.forms.themainform.numberOf.value === "") {
    document.forms.themainform.numberOf.value = "-5";
}

This meant that if someone left this input field empty, on submit it would put -5 as the input.

edited Dec 7, 2016 at 20:31

answered Dec 7, 2016 at 20:26

Joe

4,9175 gold badges34 silver badges54 bronze badges

Collectives™ on Stack Overflow

If input field has no value, add a new value using JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related