1

I'm trying to replace the "save" value of the submit button with an ASCII character code like — (—), except it's displaying the literal code instead of its translation.

$("#myform").on("submit", function(){
    $("input#commit").attr('readonly', true).val("—");
});

Yields a button like this:

[ — ]

I also tried .prop('value', '—'); but same problem. Is this even possible?

nathanhleung
  • 506
  • 6
  • 14
cbmtrx
  • 591
  • 8
  • 16

4 Answers4

3

Just use the character in the value, like this:

$("#myform").on("submit", function(){
    $("input#commit").attr('readonly', true).val("—");
});

or alternatively, use the unicode value like this:

$("#myform").on("submit", function(){
    $("input#commit").attr('readonly', true).val('\u2014');
});
Adam Konieska
  • 2,805
  • 3
  • 14
  • 27
  • I was going to downvote your answer but luckily i saw the edit. Although your option works, it does not display visually correct. E.g. http://jsfiddle.net/g9ers0kz/1/ – SaurabhM Nov 23 '15 at 21:05
  • i attached a jsfiddle in my previous comment. Nothing about your code.. it might need a little css styling though. but +1 for your and nathan's solution – SaurabhM Nov 23 '15 at 21:06
  • Can you be more specific? I'm not seeing anything visually incorrect. Maybe unicode \u2014 looks better? – Adam Konieska Nov 23 '15 at 21:11
  • with no formatting/css styles, the '-' tends to consume the right side of the button. Please refer to this: jsfiddle.net/g9ers0kz/1 – SaurabhM Nov 23 '15 at 21:13
  • I don't see what you are describing in your JS fiddle. The button is updated with the 2014 character, and is centered. There is no "consuming" of the right side of the button that I can see. Screenshot: http://imgur.com/FHNpN2k – Adam Konieska Nov 23 '15 at 21:18
  • Simply using the unicode value was the solution--nothing else needed changing. (I was just using the — character as an example--I actually needed to try/use several different ones that weren't as easy as dashes or em-dashes.) Thanks @AdamKonieska! – cbmtrx Nov 23 '15 at 21:19
  • That's weird. This is what i am seeing on the mac right now: http://imgur.com/63HMLUk. – SaurabhM Nov 23 '15 at 21:22
  • @SaurabhM thanks for the screenshot. Technically that is the correct display method, since thats exactly how the browser is handling it without any styles being applied. The look could certainly be changed with CSS. – Adam Konieska Nov 23 '15 at 21:25
1

$("button[type='submit']").on("click", function(e){
    $("button[type='submit']").attr('readonly', true).html("—");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="#myform">
  <button type="submit">Save</button>
<form>
Stepan Lylak
  • 81
  • 4
0

Pretty much, what you need to do is create an element with the ASCII entity and read that element's innerText.

$("#myform").on("submit", function(){
  var d = document.createElement("div");
  d.innerHTML = "&#151;";
  var ascii = d.innerText;
  $("input#commit").attr('readonly', true).val(ascii);
});

For more information, see this answer: How do i unescape HTML Entities in JS? (change &lt; to <)

Community
  • 1
  • 1
nathanhleung
  • 506
  • 6
  • 14
  • This is the same as using `.val("—")`, only it uses extra code to assign that html entity to a div first, then retrieves the value "—" from a div. – Adam Konieska Nov 23 '15 at 21:08
  • Yes, but with this method you can use the actual HTML entity (as the questioner asked). – nathanhleung Nov 23 '15 at 21:10
  • Using the html entity is incorrect entirely. The correct method for javascript should use the unicode character \u2014 or the character itself. – Adam Konieska Nov 23 '15 at 21:19
0

Tried using String.fromCharCode and Even though this works...Doesn't when setting the value???

alert(String.fromCharCode('151'));

http://jsfiddle.net/k6pphr88/

When i try to assign the value through jquery or just using plain javascript. The character doesn't appear using String.fromCharCode('151')

//doesnt work
$("input#commit").val(String.fromCharCode('151'));    
//doesnt work
$("input#commit")[0].value = String.fromCharCode('151');
//doesnt work
document.getElementById('commit').value = String.fromCharCode('151');

Best way i found to work around is by creating a temporary div. Setting the html() and returning the text() using jQuery;

//works
    $("input#commit").attr('readonly', true).val($('<div/>').html('&#151;').text());

http://jsfiddle.net/vtmryLbp/

Sean Wessell
  • 3,490
  • 1
  • 12
  • 20
  • This is the same as using `.val("—")`, it uses extra code to assign that html entity to a div first, then retrieves the value "—" from a div. – Adam Konieska Nov 23 '15 at 21:08
  • Correct, but if you need to assign the values based off the html code — this is a way around it. I would also hardcode .val("—") instead of using the html code for ASCII 151 – Sean Wessell Nov 23 '15 at 21:14
  • Right on! :-) Users should note that javascript does not use html entities, and should use unicode characters. In this case, \u2014 – Adam Konieska Nov 23 '15 at 21:22
  • Yeah sorry guys--I had you going off on a wild goose chase for a "—" character that's actually quite easy to fake. I was thinking more along the lines of bullets/circles etc. The unicode value was the solution. – cbmtrx Nov 23 '15 at 21:24