translate jQuery to pure javascript

Question

I have to fix some form validation but there's no jQuery included in the host page. I'd normally do something like this...

if ($("#contactNameAdd").val() !== '' || $("#contactPhoneAdd").val() !== '') {
    $("#contactForm").show()
};

How can I re-write that in normal js?

Its almost as if jQuery makes people lazy ... this is very simple ... any JavaScript developer should really know this kind of stuff .... — Manse
– Manse, Commented Nov 28, 2011 at 9:16

hungryMind · Accepted Answer · 2011-11-28 09:13:04Z

1

var name = document.getElementById("contactNameAdd");
var phone = document.getElementById("contactPhoneAdd");
var form = document.getElementById("contactForm");

if(name.value != '' || phone.value != '') {
   form.style.display = "block";
}

answered Nov 28, 2011 at 9:13

hungryMind

7,0214 gold badges32 silver badges46 bronze badges

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

Comments

Ben Lee · Accepted Answer · 2011-11-28 09:13:10Z

1

if (document.getElementById('contactNameAdd').value !== '' || document.getElementById('contactPhoneAdd').value !== '') {
    document.getElementById('contactForm').style.display = 'block';
}

In plain javascript, you use document.getElementById('id') to get DOM nodes based on the id attribute. You use .value on a DOM Input element to get its value. And you use .style on any DOM element to set css attributes. In this case "show" means "display: block;".

answered Nov 28, 2011 at 9:13

Ben Lee

53.5k15 gold badges129 silver badges146 bronze badges

Comments

Manse · Accepted Answer · 2011-11-28 09:12:22Z

0

if (document.getElemenById('contactNameAdd').value != '' || document.getElementById('contactPhoneAdd').value != '') {
    document.getElementById('contactForm').style.display = 'block';
}

Try this - checks the 2 values then changes the style.display property of the 'contactForm'

answered Nov 28, 2011 at 9:12

Manse

38.1k11 gold badges88 silver badges112 bronze badges

Comments

TheGeekYouNeed · Accepted Answer · 2011-11-28 09:25:57Z

0

This should do the trick.

var contactNameAdd = document.getElementById("contactNameAdd");
var contactPhoneAdd = document.getElementById("contactPhoneAdd");

if((contactNameAdd !== null && contactNameAdd.value !== '') || (contactPhoneAdd !== null && contactPhoneAdd.value !== ''))
{
    document.getElementById("contactForm").style.display = 'block';
}

edited Nov 28, 2011 at 9:25

answered Nov 28, 2011 at 9:13

TheGeekYouNeed

7,5412 gold badges29 silver badges43 bronze badges

3 Comments

Manse Over a year ago

getElementById <- lowercase 'g'

TheGeekYouNeed Over a year ago

Thanks ManselUK, didn't notice my typo at the top.

Manse Over a year ago

i didnt want to edit you post - thought it was a bit cheeky !

pnuts · Accepted Answer · 2011-11-28 09:47:36Z

0

var contactName = document.getElementById('contactNameAdd');
var contactPhone = document.getElementById('contactPhoneAdd');
if(contactName.value !== '' || contactPhone.value !== '') {
  // Different as JQuery, there will be no animation.
  // I assume you use 'display:none' to hide the form.
  var form = document.getElementById('contactForm');
  form.style.display = 'block';
}

edited Nov 28, 2011 at 9:47

answered Nov 28, 2011 at 9:18

pnuts

2761 silver badge5 bronze badges

Collectives™ on Stack Overflow

translate jQuery to pure javascript

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related