How to hide submit button when required fields are empty?

Question

0.00/5 (No votes)

See more:

I have a working code that i use to validate empty fields, of which are required fields.
If fields are empty i hide the submit button. But on-load of the page, the button is hidden even if there is info inside input fields.

HTML CODE

HTML

<label for="firstname"><span class="starRequired">* </span>First name:</label><br><input  type="text" name="firstname" required  id="firstname" autofocus="autofocus" pattern ="{3,50}" >">

<label for="lastname"><span class="starRequired">* </span>Last name:</label><br><input type="text" name="lastname" required id="lastname"  pattern ="{3,50}" >">


 <label for="mobilenumber"><span class="starRequired">* </span>Mobile Number:</label><input type="text" name="mobilenumber" required  id="mobilenumber" >">


<label for="idnumber">ID Number:</label><br/>
<input type="text" name="idnumber"required  id="idnumber"  >">

PHP

if ($status != "2") { ?>

HTML

<input type="submit"  id="apply" name="apply"  value="Apply"  
/>
									
<div class="agreement">					
<input type="checkbox" id="terms" name="terms" >
<label for="terms">I accept the Reseller Agreement</label>

PHP

<?php } ?>

JavaScript

inputlastName = document.getElementById("lastname"); 
inputfirstName = document.getElementById("firstname");
inputmobileNumber = document.getElementById("mobilenumber");
inputidNumber = document.getElementById("idnumber");

inputSubmit = document.getElementById("apply"); 

function submitChange()
{
     if(inputfirstName.value == "" || inputlastName == "" || inputmobileNumber.value == "" || inputidNumber.value == "")
     {
          inputSubmit.style.display = "none";
     }
     else
     {
          inputSubmit.style.display = "block";
     }
	 
}

I want to prevent it form disappearing if I have values in fields on-load of the page.
How can I accomplish this?

Posted 1-Dec-15 22:36pm

iDoKin

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jaket-cp · Accepted Answer · 2015-12-01T23:19:00

Solution 1

What you need to do is get submitChange() to be executed when the document/window has loaded.

This can be performed in a few ways on client side.
HTML:

HTML

<body onload="submitChange()">
</body>

JavaScript:

JavaScript

window.onload = function() {
  submitChange();
};

jQuery:

JavaScript

$(document).ready(function() {
    submitChange();
});

I believe the above 3 techniques should work.

Posted 1-Dec-15 23:19pm

jaket-cp

Comments

iDoKin 2-Dec-15 5:39am

This do not work for me.

jaket-cp 2-Dec-15 5:40am

which one did you try?

jaket-cp 2-Dec-15 5:46am

Just had another look a your javascript
inputlastName is missing value

iDoKin 2-Dec-15 5:48am

I fixed that one.

jaket-cp 2-Dec-15 5:50am

okay on that fix.
Which one of the 3 did you try to get the submitChange() to get executed after page load?

iDoKin 2-Dec-15 5:54am

I tried <body >
</body>

and

window.onload = function() {
submitChange();
};

iDoKin 2-Dec-15 5:58am

After i played with it i worked like a charm

<<body onload="submitChange">
<script>
window.onload = function() {
submitChange();
};
</script>>

jaket-cp 2-Dec-15 6:00am

okay that is good, you only require one or the other, not both.

iDoKin 25-Feb-16 3:28am

I now get an error that says "Uncaught ReferenceError: submitChangej is not defined"

I changed the method from submitChange() to submitChangej()

jaket-cp 25-Feb-16 9:32am

Did you change the function name to submitChangej?

iDoKin 25-Feb-16 9:43am

Yes i did
//On-load script
<script>
window.onload = function() {
submitChangej();
};
</script>

<script type="text/javascript">

function submitChangej(){

//my variables

}

jaket-cp 25-Feb-16 10:13am

Looks correct to me.
It could be a browser cache issue.
You may have to perform a hard-refresh
ctrl+F5 or ctrl+R
http://refreshyourcache.com/en/cache/

iDoKin 25-Feb-16 10:17am

I got it fixed, I don't know if it was cache or cookies.

Thanks

jaket-cp 25-Feb-16 10:18am

Good that is good :)

iDoKin 2-Dec-15 5:59am

Thanks a lot.

jaket-cp 2-Dec-15 6:00am

glad to help

jaket-cp 2-Dec-15 6:02am

also mark it as solved to remove from pool of unanswered questions.

iDoKin 2-Dec-15 6:07am

Thanks a lot. But now its hiding the submit button only. Is the a good way to hide the submit button and that text label, but shows both the submit button, checkbox and label if them fields have values?

jaket-cp 2-Dec-15 6:11am

If I get what you are asking.
You could get submitChange to be called everytime one of the input textbox or checkbox gets changed/modified.

iDoKin 2-Dec-15 6:42am

Check box and label are not been hidden. I also what them to be hidden label is just a text and checkbox will show user the rules of the agreement

jaket-cp 2-Dec-15 6:45am

you can use style.display on those elements you want to display, block and none - as has been implemented with inputSubmit

iDoKin 2-Dec-15 7:29am

I did try to do it, but seem not to work for checkbox and label.

jaket-cp 2-Dec-15 7:48am

I have created a simple jsfiddle so you can see that show and hide works for checkbox and label.
http://jsfiddle.net/zg2kbe01/
Hope that helps you out

iDoKin 3-Dec-15 4:28am

Okay thanks, but I want it not to show at all. I will continue to find a way to win on this one. The button, check-box and the label must all be hidden if the fields are missing or incorrect.

iDoKin 3-Dec-15 4:41am

I saw you used the links on your demo. I don't want to use links. Cause my i have a label not a-link

jaket-cp 3-Dec-15 5:18am

That jsfiddle was to show that label and checkbox can be hidden in the same way as your code does with the submit button.

What you need to do is add an event or something to the input test and trigger the submitChange function.

Here is an update jsfiddle:
http://jsfiddle.net/zg2kbe01/1/
It should get you the idea of how it can be done
An onblur has been added to the input textbox.
When a blur event occurs on the input textbox then the submitChange is called.
This in turn validates the input text box values and will show or hide the Container accordingly.

Hope that gets you on your way.

jaket-cp 3-Dec-15 5:22am

have a read of
http://www.w3schools.com/jsref/dom_obj_event.asp
https://developer.mozilla.org/en-US/docs/Web/Events

for a possible list of events possible

iDoKin 3-Dec-15 5:54am

I got to make it hide the check-box and label here http://jsfiddle.net/zg2kbe01/3/

But now when i click check-box, nothing happens.

jaket-cp 3-Dec-15 7:23am

I assume it has something to do with the css selector:
input:not(:checked) ~ textarea

Have a read of these, they may help you out:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
https://css-tricks.com/almanac/selectors/c/checked/

iDoKin 3-Dec-15 7:23am

I remove the display: none on my textarea, but I didn't want to go that rude. I will see if I can make it work the way i want it.

For now I use it like this: http://jsfiddle.net/zg2kbe01/4/

Thanks you your help hey.

How to hide submit button when required fields are empty?

1 solution

Solution 1

Add your solution here

Preview 0

How to hide submit button when required fields are empty?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us