CODEWITHSUNDEEP
javascriptjqueryplaceholder
Katy H.
Katy H.

Reputation: 224

placeholder text in form breaks when add radio buttons

I have used the below script to use placeholders but when I add radio buttons the script breaks. What is missing?

var labels = document.querySelectorAll("label");
var i = labels.length;
while (i--) {
  var label = labels.item(i);
  var text = label.textContent;
  label.parentNode.classList.contains("required") && (text += " *");
  var nextElement = label.nextElementSibling;

  if (nextElement.tagName == 'SELECT') {
    nextElement.options[0].text = text;
   } else {
    nextElement.setAttribute("placeholder", text);
   }
  label.parentNode.removeChild(label);
}
var elements = document.querySelectorAll('.errors, .no-label');
Array.prototype.forEach.call(elements, function(el, i) {
  el.parentNode.removeChild(el);
});

Here is the jsfiddle: https://jsfiddle.net/katyhege/zdqLtmsn/

Upvotes: 0

Views: 326

Answers (2)

Katy H.
Katy H.

Reputation: 224

to leave the labels for the radio/checkbox fields I used: 

var labels = document.querySelectorAll("p.pd-text label, p.pd-select label, p.pd-textarea label");

Upvotes: 0

Manoj Lodhi
Manoj Lodhi

Reputation: 988

It seems that when script breaks it shows nextElement undefined, so you can have check for this. Try this once if it works for you,

var labels = document.querySelectorAll("label");
    var i = labels.length;
    while (i--) {
    var label = labels.item(i);
    var text = label.textContent;
    label.parentNode.classList.contains("required") && (text += " *");
    var nextElement = label.nextElementSibling;

      // This is what I changed:
     if(nextElement){
       if (nextElement.tagName == 'SELECT') {
        nextElement.options[0].text = text;
       } else {
        nextElement.setAttribute("placeholder", text);
       }
     label.parentNode.removeChild(label);
     }
  }
var elements = document.querySelectorAll('.errors, .no-label');
Array.prototype.forEach.call(elements, function(el, i) {
el.parentNode.removeChild(el);
});

Or you can do one more solution, Just replace 

var i = labels.length;

with 

var i = labels.length-2;

Also you can make it work properly by changing in your HTML, Which cause the problem basically, You can see for your last two labels(used for radio buttons), you did not put your inputs (radio buttons) next to label but you put them before labels, So it can not find the next sibling there. If you will write your radio inputs next to label (as u did for other inputs) then it will work properly. Thanks.

Best of luck :)

Upvotes: 1

Related Questions