How to Have Quotation Marks in HTML Input Values

How to have quotation marks in HTML input values

Yes, using " works:

<input type="text" name="last_name" value=""My quote!"" />

Literal quote mark in HTML input value

Thank you for everyone's suggestions. I did find the problem. I actually had to first collect the values from the options, then build the radio buttons with a blank value attribute and add that to the page. Then loop back through and just the $(fieldid).val(value) to set the values.

The other issue with saving the value then putting our page back into edit mode and the value not being re-selected. The ultimate problem is a bug in the core of the software where its not correctly comparing the stored value to the value in the list.

input value formation with double quotation marks and single quotes

If you don't need to support IE use template literals. TL are strings that have an easier syntax and extra properties. Here's a comparison between TL and SL (String Literal):

Syntax

SL: Wrap strings in double or single quotes. If the content of string has quotes as well, they should either be escaped by being prefixed with a backslash:

\" and \'

OR use HTML entities:

• ‘ or ‘ (Left Single QUOtation mark)

• ’ or ’ (Right Single QUOtation mark)^/sup>

• “ or “ (Left Double QUOtation mark)

• ” or ” (Right Double QUOtation mark)

Note: These particular quotes represented by HTML entities are the curvy or smart quotes type and can only be used in plain text not code. The quotes used in code are straight, do not confuse them as universally accepted they are as different as a comma is to a period.

^{/sup> It's ok to use ’ as an apostrophe - Unicode9.0.0, ch06, pg. 276}

TL: Wrap strings in backticks, also called grave accent, On a QWERTY keyboard the key is located at the top left corner `.

`template literal`

---

Concatenation vs. Interpolation

SL: A mess of single quotes, double quotes, and pluses:

var str = '<input id="'+ID+'" class="form-control">';

TL: Wrap variables and expressions in: ${...}:

var str = `<input id="${ID}" class="form-control">`;

---

Demo

var infoCard = {
  text: "that aren’t on the battlefield have flash."
};

$("#printCard0").append(`<input type='hidden' name='textCard' value='that aren’t on the battlefield have flash.' id='texting0'>`);

$("#printCard1").append(`<input type='hidden' name='textCard' value='${infoCard.text}' id='texting1'>`);

<main id='core'>

  <figure id='printCard0'></figure>

  <figure id='printCard1'></figure>

</main>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Input field containing double quotes value

Use htmlentities:

<input value="<?php echo htmlentities($value);?>">

HTML Text Inputs Value Contains Quote Marks

<input type="text" id="condition" name="condition" value="<?php print htmlentities($conditionSearchValue, ENT_QUOTES); ?>">

More info on htmlentities in the documentation here.

How do I properly escape quotes inside HTML attributes?

" is the correct way, the third of your tests:

<option value=""asd">test</option>

You can see this working below, or on jsFiddle.

alert($("option")[0].value);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select>  <option value=""asd">Test</option></select>

How do I put a string containing double quotes into an HTML input element's value tag so that it properly renders on the page?

Since you didn't provide any html I assumed one !

HTML

<div id="div"></div>

JS

Using document.createElement method to first create an input element add some attributes and finally append it to main div. (RECOMMENDED)

  const div = document.querySelector("#div")
  let value = '"Abc" : b';
  let input = document.createElement('input')
  const attributes = {
    type : "text",
    value : value
  }
  Object.entries(attributes).forEach( pair => input.setAttribute(pair[0], pair[1]))
  div.appendChild(input)
 
 

Using innerHTML without escaping string , the hack is just wrap the value string with the same qoute ( double or single) as the value attribute qoute used ! ( NOT RECOMMENDED )

  const div = document.querySelector("#div")
  let value =  '"Abc" : b';
  div.innerHTML += `
    <input type="text"  value='${value}' />
  `

---

Related Topics