We Keep Coding

How to check if the user entered the first digits zero in the mobile number using javascript?

I have a mobile field and once the user enters the mobile number then it will display the next field.
I don't have an issue with 10 digits but when the user enters mobile no along with 0(zero) then my script not working because the digits are 11.
I tried index of
function activefields() {
var value = document.getElementById('mobileno').value;
var x = document.getElementsByClassName("showme");
if (value.length == 10 || ((value.indexOf('0')==0) && value.length == 11)) {
x[0].style.display = "block";
x[1].style.display = "block";
x[2].style.display = "block";
} else {
x[0].style.display = "none";
x[1].style.display = "none";
x[2].style.display = "none";
}
}
.showme {
display: none;
}
<form>
<input type="text" name="mobileno" id="mobileno" onblur="activefields()" placeholder="mobileno">
<input type="text" name="name" class="showme" placeholder="name">
<input type="email" name="email" class="showme" placeholder="email">
<input type="text" name="job" class="showme" placeholder="job">
</form>

Here you can remove the preceeding zeros from the value.
Also note you can pass the event to the method to retrieve the value. Saves another look up with document.getElementById('mobileno').value;
function activefields(evt) {
var value = evt.target.value
value = value.replace(/^0+/,'');
console.log('value =', value);
var x = document.getElementsByClassName("showme");
if (value.length == 10 || ((value.indexOf('0')==0) && value.length == 11)) {
//alert(x);
x[0].style.display = "block";
x[1].style.display = "block";
x[2].style.display = "block";
} else {
x[0].style.display = "none";
x[1].style.display = "none";
x[2].style.display = "none";
}
}
.showme {
display: none;
}
<form>
<input type="text" name="mobileno" id="mobileno" onblur="activefields(event)" placeholder="mobileno">
<input type="text" name="name" class="showme" placeholder="name">
<input type="email" name="email" class="showme" placeholder="email">
<input type="text" name="job" class="showme" placeholder="job">
</form>

Confusion with hiding some input fields using JS vanilla

I want to show hidden input fields when check "Buy on company" checkbox. It works, but if I uncheck it leaving "Is VAT exemt" checked and return: "VAT ID field" is shown with "Is VAT exemt" checkbox checked. So I want to avoid this situation.
Picture of situation:
document.getElementById('billing_company').style['display'] = 'none';
document.getElementById('billing_company_code').style['display'] = 'none';
document.getElementById('is_vat_exempt').style['display'] = 'none';
document.getElementById('is_vat_exempt_field').style['display'] = 'none';
document.getElementById('billing_vat_id').style['display'] = 'none';
document.getElementById('buy_on_company').onclick = function() {
if (this.checked) {
document.getElementById('billing_company').style['display'] = 'block';
document.getElementById('billing_company_code').style['display'] = 'block';
document.getElementById('is_vat_exempt').style['display'] = 'block';
document.getElementById('is_vat_exempt_field').style['display'] = 'block';
document.getElementById('billing_vat_id').style['display'] = 'block';
} else {
document.getElementById('billing_company').style['display'] = 'none';
document.getElementById('billing_company_code').style['display'] = 'none';
document.getElementById('is_vat_exempt').style['display'] = 'none';
document.getElementById('is_vat_exempt_field').style['display'] = 'none';
document.getElementById('billing_vat_id').style['display'] = 'none';
}
};
document.getElementById('is_vat_exempt').onclick = function() {
if (this.checked) {
document.getElementById('billing_vat_id').style['display'] = 'none';
} else {
document.getElementById('billing_vat_id').style['display'] = 'block';
}
};
<div id="buy_on_company_field">
<input type="checkbox" id="buy_on_company"><label>Buy on company</label>
</div>
<div id="billing_company_field">
<input type="text" id="billing_company" placeholder="Company name" style="display: block;">
</div>
<div id="billing_company_code_field">
<input type="text" id="billing_company_code" placeholder="Company code" style="display: block;">
</div>
<div id="is_vat_exempt_field">
<input type="checkbox" id="is_vat_exempt"><label>Is VAT exempt</label>
</div>
<div id="billing_vat_id_field">
<input type="text" id="billing_vat_id" placeholder="VAT ID field" style="display: block;">
</div>

The code for clicking on buy_on_company is always hiding or showing the billing_vat_id field. It needs to test that checkbox.
document.getElementById('billing_company').style['display'] = 'none';
document.getElementById('billing_company_code').style['display'] = 'none';
document.getElementById('is_vat_exempt').style['display'] = 'none';
document.getElementById('is_vat_exempt_field').style['display'] = 'none';
document.getElementById('billing_vat_id').style['display'] = 'none';
document.getElementById('buy_on_company').onclick = function() {
if (this.checked) {
document.getElementById('billing_company').style['display'] = 'block';
document.getElementById('billing_company_code').style['display'] = 'block';
document.getElementById('is_vat_exempt').style['display'] = 'block';
document.getElementById('is_vat_exempt_field').style['display'] = 'block';
if (document.getElementById('is_vat_exempt').checked) {
document.getElementById('billing_vat_id').style['display'] = 'none';
} else {
document.getElementById('billing_vat_id').style['display'] = 'block';
}
} else {
document.getElementById('billing_company').style['display'] = 'none';
document.getElementById('billing_company_code').style['display'] = 'none';
document.getElementById('is_vat_exempt').style['display'] = 'none';
document.getElementById('is_vat_exempt_field').style['display'] = 'none';
document.getElementById('billing_vat_id').style['display'] = 'none';
}
};
document.getElementById('is_vat_exempt').onclick = function() {
if (this.checked) {
document.getElementById('billing_vat_id').style['display'] = 'none';
} else {
document.getElementById('billing_vat_id').style['display'] = 'block';
}
};
<div id="buy_on_company_field">
<input type="checkbox" id="buy_on_company"><label>Buy on company</label>
</div>
<div id="billing_company_field">
<input type="text" id="billing_company" placeholder="Company name" style="display: block;">
</div>
<div id="billing_company_code_field">
<input type="text" id="billing_company_code" placeholder="Company code" style="display: block;">
</div>
<div id="is_vat_exempt_field">
<input type="checkbox" id="is_vat_exempt"><label>Is VAT exempt</label>
</div>
<div id="billing_vat_id_field">
<input type="text" id="billing_vat_id" placeholder="VAT ID field" style="display: block;">
</div>

One line was missing, to hide "billing_vat_id" in second 'else' statement.
document.getElementById('billing_vat_id').style['display'] = 'none';
https://i.imgur.com/QRpD12r.png

How to bind Dynamic variable in JavaScript in HTML

How should I bind the Id i am getting in a variable #item.ArticleId to a JavaScript code which gets the id dynamically?
My use case is that I have to show the Comment TextBox at the click on the Add A Comment Button.
Following is the code on how I am getting the Article ID:
<span id="addComment" onclick="AddaComment()"><i class="fa fa-comment" aria-hidden="true" ></i> Add a Comment</span>
<div id="Comment(#item.ArticleId)" style="display:none;">
<input type="hidden" name="ArticleId" id="ArticleId" />
<input type="text" name="Comments" />
<input type="submit" class="btn add-comment" value="Add Comment">
</div>
Below is my code for JavaScript:
function AddaComment() {
var x = document.getElementById("Comment()");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

This is how I solved it:
function AddaComment(id) {
var x = document.getElementById("Comment_"+id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

Getting divs to close if another one opens with Javascript

Basically I have signup and signin and I they're both divs which appear and disappear on the click of a link but I wish for one to close if the other is clicked and then opened.
Example:
signin area is open and signup button is clicked. I wish for signin area to disappear and for the signup content to be revealed.
Current Code:
<script language="javascript">
function toggle() {
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
ele2.style.display = "block";
text2.innerHTML = "hide";
}
}
function toggle2() {
var ele2 = document.getElementById("signup");
var text2 = document.getElementById("signuptext");
var ele = document.getElementById("signin");
var text = document.getElementById("signtext");
if(ele2.style.display == "block") {
ele2.style.display = "none";
text2.innerHTML = "show";
ele.style.display = "block";
text.innerHTML = "hide";
}
else {
ele2.style.display = "block";
text2.innerHTML = "hide";
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Html :
<div id="signin" style="display: none">
<form action="loginscript.php" method="post">
<p>Username:<input type="text" id="username"></p>
<p>Password:<input type="password" id="password"> <input type="submit" value="submit"></p>
</form>
</div>
<div id="signup" style="display: none">
<h1>peek-a-boo</h1>
</div>

Try this.There is no need of creating two different functions.Lesser the number of functions=Better the code + smarter is the coder!!!!
function toggle(id){
switch(id)
{
case 'signin':
document.getElementById('signin').style.display='block';
document.getElementById('signup').style.display='none';
break;
case 'signup':
document.getElementById('signup').style.display='block';
document.getElementById('signin').style.display='none';
break;
}
HTML
<div id="signin" onclick="toggle(this.id)"> SignIN</div>
<div id="signup" onclick="toggle(this.id)"> SignUp</div>

You can invoke a function on "onclick" event and hide the div using CSS:Visibility property
<a id="myLink" href="#" onclick="MyFunction();">link text</a>

Try this one:
function signUpIn(objId) {
document.getElementById('signin').style.display = 'none';
document.getElementById('signup').style.display = 'none';
document.getElementById(objId).style.display = 'block';
}
Your html changes:
<div id="signin" style="display: block">
</div>
<div id="signup" style="display: none">
</div>
Sign Up
Sign In
Check if it works for you.

Try to grab concept from this, may not be a perfect, but still contain some learning part -
Check this working Fiddle - http://jsfiddle.net/j7LDD/
Working Code -
HTML PART -
<form id="signup" method="get" style="display:none;">
<label>SignUp Name</label>
<input type="text" name="signupname" />
<input type="submit" name="signupsubmit" value="signup" />
</form>
<form id="signin" method="get" style="display:none;">
<label>SignIn Name</label>
<input type="text" name="signinname" />
<input type="submit" name="signinsubmit" value="signin" />
</form>
<button id="signupbutton" onclick="toggle(this.id);">SignUp</button>
<button id="signinbutton" onclick="toggle(this.id);">SignIn</button>
JS PART -
<script>
function toggle( val ) {
if( "signupbutton" == val ) {
document.getElementById("signup").style.display = 'block';
document.getElementById("signin").style.display = 'none';
}
else {
document.getElementById("signin").style.display = 'block';
document.getElementById("signup").style.display = 'none';
}
}
</script>

Registerscript (HTML and Javascript)

I'm working on a register script, but i'm stuck. I have an oppertunity to the user pay or free memberships. And when they choose "pay" the pay column becomes visible but if i after that choose "free" i see both the free and the pay column. But i only want one column be seen not both at the same time
Javascript
<script type="text/javascript">
function betal(value) {
if (value == 'show') { document.getElementById('betalversion').style.display = 'block'; }
else { document.getElementById('betalversion').style.display = 'none'; }
}
</script>
<script type="text/javascript">
function gratis(value) {
if (value == 'show') { document.getElementById('gratisversion').style.display = 'block'; }
else { document.getElementById('gratisversion').style.display = 'none'; }
}
</script>
HTML
<div class="FormGroup">
<h2 class="description">Vad skulle du vilja ha?</h2>
<label class="choice">
<input id="gratisVersion" name="field_Payment" type="radio" value="Gratis" class="required" onclick="gratis('show');">
Gratis Version</label>
<br />
<label class="choice">
<input id="betalVersion" name="field_Payment" type="radio" value="Betal" class="required" onclick="betal('show');">
Betal Version</label>
<br />
</div>
<div class="FormGroup" style="display: none" id="betalversion">
<br />
<h2 class="description">Fyll i dina uppgifter</h2>
<br>
<div class="explanation">Här är nåt</div>
<input type="text" name="paypal_address" id="Text1" size="40">
</div>
<div class="FormGroup" style="display: none" id="gratisversion">
<br />
<h2 class="description">Fyll i dina uppgifter</h2>
<br>
<label for="name">Användarnamn</label><input type="text" name="name" id="name"/>
<br />
<label for="pass">Lösenord</label><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)" />
<br />
<p>

<script type="text/javascript">
function betal(value) {
if (value == 'show') {
document.getElementById('betalversion').style.display = 'block';
document.getElementById('gratisversion').style.display = 'none';
}
else {
document.getElementById('betalversion').style.display = 'none';
document.getElementById('gratisversion').style.display = 'block';
}
}
</script>
<script type="text/javascript">
function gratis(value) {
if (value == 'show') {
document.getElementById('betalversion').style.display = 'none';
document.getElementById('gratisversion').style.display = 'block';
}
else {
document.getElementById('gratisversion').style.display = 'none';
document.getElementById('betalversion').style.display = 'block';
}
}
</script>

<script type="text/javascript">
var beta=document.getElementById('betalversion');
var grati=document.getElementById('gratisversion');
function betal(value) {
beta.style.display = 'none';
grati.style.display = 'none';
if (value == 'show') {
beta.style.display = 'block'; }
else { beta.style.display = 'none'; }
}
</script>
<script type="text/javascript">
function gratis(value) {
beta.style.display = 'none';
grati.style.display = 'none';
if (value == 'show') { grati.style.display = 'block'; }
else { grati.style.display = 'none'; }
}
</script>
hide both the divs on toggle