Update empty form field before submitting

Question

When the user clicks the button to submit an HTML form, I would like to check if one of the inputs (used to capture an email address) has any content. (ie Has the user entered their email address?)

If so, submit the form.

If not, fill the input with something (eg hello@hello.com) that is hidden for the user and then submit the form.

I have tried a number of things, but whatever I do seems to interrupt the submit part of the form.

Answer 1

Just listen to the submit event of the form, check the field is not empty. If it is, you can store data in input[type="hidden"] that will send to the server to.

I'm using e.preventDefault so the form will not submitted.

 document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); var email = e.target.email.value; if (!email) { document.querySelector('#hidden').value = 'hello@hello.com'; } console.log(document.querySelector('#hidden').value); }); 

 <form> <input type="hidden" id="hidden" /> <input name="email" type="text" placeholder="email" /> <button>Submit</button> </form> 

Answer 2

You may also use the defaulValue property of the input element which, as the name suggests, will asignn a default value to the input element if nothing is entered

 document.querySelector('form') .addEventListener('submit', function(e){ var rem = Array.from({length:15}) .reduce(r => Math.floor(Math.random()*10) + r,"@hello.com"); e.target.em.defaultValue = rem; console.log(e.target.em.value); }); 

 <form> <label>email:</label> <input name="em" type="email" placeholder="abc@xyz.com" /> <button type="submit">Submit</button> </form> 

and once the form is submitted it's refreshed anyways.

I have modified the code to include a random email generator whose result is assigned to the rem variable. It's quite simple;

var rem = Array.from({length:15}) // generate an empty array of length 15
               .reduce(r => Math.floor(Math.random()*10) + r,"@hello.com");

It generates an array of length 15 ( Array.from({length:15}) ) and then reduces with an initial value of "@hello.com" which is the r in the callback. In each turn it prepends an random integer among 0-9 to the initial value ( "@hello.com" ) and returns an email address string like 642273534410880@hello.com .

Answer 3

• Handle the onClick of the button (which makes the server call) in client side
• Perform your validations inside that handler function
• Return true (continue with the server call) if you are happy with the validations
• Return false (cancel the server call) if you are not happy with the validation.

Now when the validation fails, if you want to continue the server call with some default values, you should write them in the click handler before returning true .

Answer 4

I suppose you have a submit button in your HTML, may be something like this :

<input type="submit" value="submit" onClick="checkInputFields()" />

Pay attention to checkInputFields function , within this you can add logic something along these lines :

function checkInputFields() {
   // your usual submit logic
    var emailAddress;
    emailAddress = document.getElementById("emailAddressID").value;
    if (emailAddress == "") {
        //email address is not present
        // create a unique dummy email address
        var emailAddress = "DummyEmail" + Math.floor((1 + Math.random()) * 0x10000)
     .toString(16)
      .substring(1)+ "@hello.com"

    };
}

Please note that emails IDs are not actually unique but this should give you a starting point.