Losing text after a space setting the value in a new field

Question

I am having an odd issue when using Javascript to create a new field. I have button that, when clicked, will create two text fields. I give those text fields a string as a value. However, it is only working correctly if I give it a string with no spaces. If my string contains a space then it makes the value equal to the text before the space occurs.

function nameField() {
  $('#nameArea').html("<br/>First Name:<input type='text' id='fnField' value=" + $('#firstName').text() + ">Last Name:<input type='text' id='lnField' value=" + $('#lastName').text() + "></input><button id='bName' onclick='updateName(fnField.value, lnField.value)'>Save Changes</button>");
  $('#firstName').html("");
  $('#lastName').html(""); 
}

So for example, if the firstName value is David E, it is currently only putting David in the field as the value. However, I have used alert and can confirm that $('#firstName').text(); does contain the full David E. How can I make sure that the text after the space doesn't get slashed out?

Answer 1

The issue is because you don't have any string delimiters around the value. Note the double quotes (") around the values of the attributes in this example:

$('#nameArea').html('<br/>First Name:<input type="text" id="fnField" value="' + $('#firstName').text() + '">Last Name:<input type="text" id="lnField" value="' + $('#lastName').text() + '"></input><button id="bName" onclick="updateName(fnField.value, lnField.value)">Save Changes</button>');

Alternatively you can avoid the string concatenation completely by using a Template Literal, but be aware this is unsupported in IE.

$('#nameArea').html(`<br/>First Name:<input type="text" id="fnField" value="${$('#firstName').text()}">Last Name:<input type="text" id="lnField" value="${$('#lastName').text()}"></input><button id="bName" onclick="updateName(fnField.value, lnField.value)">Save Changes</button>`);

Finally, you can tidy this HTML further by removing the onclick attribute and using unobtrusive event handlers instead. You can use data attributes to contain the necessary metadata with the element.

Answer 2

This is a logical error caused by the lack of quotes around the value you give.

You set the html to value=First Lastname instead of value='First Lastname'. In the first case most browsers parse the string till the whitespace and therefor only the firstname shows up.

Try

$('#nameArea').html("<br/>First Name:<input type='text' id='fnField' value='" + $('#firstName').text() + "'>Last Name:<input type='text' id='lnField' value='" + $('#lastName').text() + "'></input><button id='bName' onclick='updateName(fnField.value, lnField.value)'>Save Changes</button>");