Wrapping var value in quotes(to insert with JS) but custom date input not working

Question

I am trying to get something to work when I input it using JavaScript, I use a select element value to determine what inputs to display. When I add these inputs all work except the custom date ones I have created. they are this

<input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date-bought" name="dateBought">

While this code works alone or if I just insert it without JavaScript it fails when I have to make it look like this

<input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")"="" onblur="(this.type=" text")"="" id="date-bought" name="dateBought">

The only difference is the ' are changed to " in the second one but this seems to be causing some issues.

function typePicker() {
  var sel = document.getElementById("type");
  var typeInputs = document.getElementById("typeInputs");
  var aps = '<div class="form-group"><input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address"></div><!-- IP Address --><div class="form-group"><input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address"></div><!-- MAC Address --><div class="form-group"><input type="text" class="form-control" name="range" id="range" placeholder="Range in M"></div><!-- Range --><div class="form-group"><input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands" ></div><!-- Bands --><div class="form-group"><input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)"></div><!-- Channels --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div>  <br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input class="form-control"  id="location" placeholder="Location"></div><!-- Location --></div>';
  var cables = '<div class="form-group"><input type="text" class="form-control" id="type" name="type" placeholder="Type"></div><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity"></div><!-- Quantity --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location -->';
  var deskPhones = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="phoneNumber" name="phoneNumber" placeholder="Phone Number"></div> <!-- Phone Number --><div class="form-group"><input type="text" class="form-control" id="extension" name="extension" placeholder="Extension"></div><!-- Extension -->';
  var desktops = '<div class="form-group"><input type="text" class="form-control" id="cpu" name="cpu" placeholder="CPU"></div><!-- CPU --><div class="form-group"><input type="text" class="form-control" id="ram" name="ram" placeholder="RAM"></div> <!-- RAM --><div class="form-group"><input type="text" class="form-control" id="gpu" name="gpu" placeholder="GPU"></div><!-- GPU --><div class="form-group"><input type="text" class="form-control" id="vram" name="vram" placeholder="VRAM"></div><!-- VRAM --><div class="form-group"><input type="number" class="form-control" id="numDrive" name="numDrive" placeholder="Number of Drives"></div><!-- Number of Drives --><div class="form-group"><input type="number" class="form-control" id="sizeDrive name="sizeDrive" placeholder="Size of Drive(s)"></div><!-- Size of Drive(s) --><div class="form-group"><input type="text" class="form-control" id="sizeDrive" name="sizeDrive" placeholder="Type of Drive(s)"></div><!-- Type of Drives --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input type="number" class="form-control" id="usbPorts" name="usbPorts" placeholder="Number of USB Ports"></div><!-- Number of USB Ports --><div class="form-group"><input type="text" class="form-control" id="name" name="name" placeholder="Machine Name"></div><!-- Machine Name --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="btn-group" data-toggle="buttons"><label for="">Stand Alone</label><br><label class="btn btn-primary"><input type="radio" name="standAlone" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="standAlone" id="option2"> No</label></div>  <br><br><!-- Stand Alone -->';
  var laptops = '<div class="form-group"><input type="text" class="form-control"  id="cpu" name="cpu" placeholder="CPU"></div><!-- CPU --><div class="form-group"><input type="text" class="form-control" id="ram" name="ram" placeholder="RAM"></div><!-- RAM --><div class="form-group"><input type="text" class="form-control" id="gpu" name="gpu" placeholder="GPU"></div><!-- GPU --><div class="form-group"><input type="text" class="form-control" id="vram" name="vram" placeholder="VRAM"></div><!-- VRAM --><div class="form-group"><input type="number" class="form-control" id="sizeDrive" name="sizeDrive" placeholder="Size of Drive(s)"></div><!-- Size of Drive(s) --><div class="form-group"><input type="text" class="form-control" id="typeDrive"name="typeDrive" placeholder="Type of Drive(s)"></div><!-- Type of Drives --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input type="number" class="form-control" id="usbPorts" name="usbPorts" placeholder="Number of USB Ports"></div><!-- Number of USB Ports --><div class="form-group"><input type="text" class="form-control" id="name" name="name" placeholder="Machine Name"></div><!-- Machine Name --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="user" name="user" placeholder="User"></div><!-- User --><div class="btn-group" data-toggle="buttons"><label for="">Stand Alone</label><br><label class="btn btn-primary"><input type="radio" name="standAlone" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="standAlone" id="option2"> No</label></div>  <br><br><!-- Stand Alone -->';
  var mobilePhones = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="lifeExpectancy" name="lifeExpectancy" placeholder="Life Expectancy"></div><!-- Life Expectancy --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="phoneNumber" name="phoneNumber" placeholder="Phone Number"></div><!-- Phone Number --><div class="form-group"><input type="text" class="form-control" id="os" name="os" placeholder="Operating System"></div><!-- OS --><div class="form-group"><input type="text" class="form-control" id="simNumber" name="simNumber" placeholder="SIM Number"></div><!-- SIM Number -->';
  var monitors = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="text" class="form-control" id="cost" nameid="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="resolution" name="resolution" placeholder="Resolution"></div><!-- Resolution --><div class="form-group"><input type="text" class="form-control" id="panelType" name="panelType" placeholder="Panel Type"></div><!-- Panel Type -->';
  var printers = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input class="form-control" id="lifeExpectancy" name="lifeExpectancy" placeholder="Life Expectancy"></div><!-- Life Expectancy --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input class="form-control"  id="location" name="location" placeholder="Location"></div><!-- Location -->                        ';
  var projectors = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="resolution" name="resolution" placeholder="Resolution"></div><!-- Resolution -->';
  var routers = '<div class="form-group "><select class="custom-select form-control" id="sel-speed" name="router-speed" onchange="speed()"><option selected>Select Router Speed</option><option value="100">10/100 Mbps</option><option value="1000">10/100/1000 Mbps</option><option value="10000">10/100/1000/10000 Mbps</option><option value="other">Other</option></select></div><!-- Router Speed --><div class="form-group" id="speed" name="speed"></div> <!-- Router Speed other input only show when above "other" is selected --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div><br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date -->';
  var switches = '<div class="form-group "><select class="custom-select form-control" id="sel-speed" name="switch-speed" onchange="speed()"><option selected>Select Switch Speed</option><option value="100">10/100 Mbps</option><option value="1000">10/100/1000 Mbps</option><option value="10000">10/100/1000/10000 Mbps</option><option value="other">Other</option></select></div><!-- Switch Speed --><div class="form-group" id="speed"></div> <!-- Switch Speed other input only show when above "other" is selected --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input type="number" class="form-control" id="switch-ports" name="switch-ports" placeholder="Number of Ports" min="1"></div><!-- Number of Ports --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div><br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date -->';
  var tablets = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="text" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div>            <!-- Location --><div class="form-group"><input type="text" class="form-control" id="ram" name="ram" placeholder="RAM"></div><!-- RAM --><div class="form-group"><input type="text" class="form-control" id="resolution" name="resolution" placeholder="Resolution"></div><!-- Resolution -->';
  // var other = '<div class="form-group"><label for="customField" class="control-label">Custom Field</label><input type="text" class="form-control" id="customField" name="customField" placeholder="Custom Field"></div>';
  var other = '<div class="form-group"><label for="customField" class="control-label">Custom Field</label><input type="text" class="form-control" id="customField" name="customField" placeholder="Custom Field"> </div> <input type="button" class="btn btn-primary add" id="add" value="Add Field"/>';
  var type = '<div class="form-group"><input type="text" class="form-control" id="type" name="type" placeholder="Asset Type"></div>';

  if (sel.value == "aps") {
    typeInputs.innerHTML = aps;
  }

  if (sel.value == "cables") {
    typeInputs.innerHTML = cables;
  }

  if (sel.value == "deskPhones") {
    typeInputs.innerHTML = deskPhones;
  }

  if (sel.value == "desktops") {
    typeInputs.innerHTML = desktops;
  }

  if (sel.value == "laptops") {
    typeInputs.innerHTML = laptops;
  }

  if (sel.value == "mobilePhones") {
    typeInputs.innerHTML = mobilePhones;
  }

  if (sel.value == "monitors") {
    typeInputs.innerHTML = monitors;
  }

  if (sel.value == "printers") {
    typeInputs.innerHTML = printers;
  }

  if (sel.value == "projectors") {
    typeInputs.innerHTML = projectors;
  }

  if (sel.value == "routers") {
    typeInputs.innerHTML = routers;
  }

  if (sel.value == "switches") {
    typeInputs.innerHTML = switches;
  }

  if (sel.value == "tablets") {
    typeInputs.innerHTML = tablets;
  }

  if (sel.value == "other") {
    typeInputs.innerHTML = type + other;
  }


} // end typePicker


var warningType = document.getElementById("warningType");
var otherMessage = '<div class="alert alert-warning" role="alert">Limit of 5 custom fields for your plan!</div>';
var sel = document.getElementById("type");
var limit = 5;
var counter = 1;
$(document).on("click", ".add", function() {
  if (counter < limit) {
    if (sel.value != "other") {
      counter = 1;
    }
    counter++;
    if (counter == limit) {
      warningType.innerHTML = otherMessage;
    }
    var n = $(this).prev(".form-group").length + 1;
    var temp = $(this).prev(".form-group").clone();
    $('input:first', temp).attr('placeholder', 'Custom Field').val("");
    $(this).prev(".form-group").after(temp);
  }
});

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="type" class="control-label">Type</label>
  <select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
                                  <option value="aps">Access Point</option>
                                  <option value="cables">Cable</option>
                                  <option value="desktops">Desktop</option>
                                  <option value="laptops">Laptop</option>
                                  <option value="deskPhones">Desk Phone</option>
                                  <option value="mobilePhones">Mobile Phone</option>
                                  <option value="monitors">Monitor</option>
                                  <option value="printers">Printer</option>
                                  <option value="projectors">Projector</option>
                                  <option value="routers">Router</option>
                                  <option value="switches">Switch</option>
                                  <option value="tablets">Tablet</option>
                                  <option value="other">Other</option>
                                </select>
</div>

<div class="form-group" id="typeInputs">

</div>

<div class="form-gorup" id="warningType">

</div>

My issue is that the code above (very top one) works while the code below and in the snippet does not work. It is supposed to change from a text input into a date one on focus/select. This is to keep the look clean. I really don't want to have to accept dates in string format. How can I have it display as text and on focus go to date input type when I insert it using the JavaScript?

The code snippet appears to flag an error when I click the date field, console.log shows a unexpected } in the file new on line 2. I can not find any line 2 errors on any file I think I am calling. No other console.log errors. No script call errors in chrome.

I cannot even begin to describe the feeling I get when I see you innerHTML reams of html instead of showing/hiding various parts... — mplungjan, Oct 15 '17 at 20:09
Please don't put that much HTML in your JS code. Place it in the DOM and clone it if you must, or better yet, use a templating library. — Rory McCrossan, Oct 15 '17 at 20:11
onblur="(this.type="text")" will obviously fail due to quotes — mplungjan, Oct 15 '17 at 20:12
@RoryMcCrossan Templating library? Do you mean like swig? If so I am using it but am unaware of how I could use it in this case. What sort of syntax would it be if swig is what you are talking about? — , Oct 15 '17 at 20:12
@mplungjan I know it will fail, it has been failing for me. It must have to do with the quotes not working but how can I insert `'` without messing up my JS — , Oct 15 '17 at 20:14
You need to escape them onblur="(this.type=\’text\’)" or better: remove the html from the JS — mplungjan, Oct 15 '17 at 20:15
@mplungjan How do you suggest I remove the html from the JS? It is working just fine other than this one issue. What better way is there and why is it better? — , Oct 15 '17 at 20:16
@mplungjan I changed it to use the escape character and it works now, thank you. — , Oct 15 '17 at 20:20
It is considered very bad practice to insert such large amount of html into the Dom, not to mention the pain of updating it. Instead have the html display:none and show and hide it where you used to insert it. You can even leave it on the server and Ajax it in when needed. I see you even load jQuery but don’t use it. — mplungjan, Oct 15 '17 at 20:26
@mplungjan I can see what you mean method wise, and that was something I considered and I will change it now you mention it. I thought both were equal and this one was quicker for me to do. This is a project I am less concerned with on 100% best practices but more on the it needs to work and it needs to finish validating my idea. Think of it as my MVP / alpha build. I have a list of things to go back and redo later in ways that are better but require more time. This is one I have added to that list. I know this is not a proper way of coding and should be discouraged. — , Oct 15 '17 at 20:30

Wrapping var value in quotes(to insert with JS) but custom date input not working

0 Answers0