JavaScript附加中的单引号或双引号

Question

i am beginner in Jquery, confused about using single quote or double quote to call the value of myName Textbox, i want to catch the value of text box .

this is my code, calling function save_order is not working, because failure syntax in document.getElementById( 'myName' ).value

what is the right syntax ?

<script>
var param=3;
$('#saveList').append(
'<p>FullName : <input type="text" id="myName"></p>'+
'<p><input type="button" value="SAVE" onClick="save_order('+ param +',document.getElementById('myName').value)"></p>');
</script>

pls help me anybody thank you

Answer 1

The problem is in calling document.getelementById. With escaping, you can achieve your result.

<script>
var param=3;
$('#saveList').append(
'<p>FullName : <input type="text" id="myName"></p>'+
'<p><input type="button" value="SAVE" onClick="save_order('+ param +',document.getElementById(\'myName\').value)"></p>');
</script>

Check your part: document.getElementById('myName') ...

And my part: document.getElementById(\\'myName\\')

When you use ' as start and end character of string, you have to use \\' if you want to use ' inside as string literal.

Answer 2

<script>
var param=3;
$('#saveList').append(
'<p>FullName : <input type="text" id="myName"></p>'+
'<p><input type="button" value="SAVE" onClick="save_order('+ param +',document.getElementById(\'myName\').value)"></p>');
</script>

You can do this or just use double quotes as that should work too.

Answer 3

Having code within code within code is really just begging for quoting problems, to be honest. Instead of stacking these languages on top of each other, use the jQuery library that you're already using to create the click handler for your new element.

It's not entirely clear if these added elements are unique and can have id values, so let's go with a class value for the input button. And we'll use data- attributes for the dynamic values. Something like this:

var param=3;
$('#saveList').append(
    '<p>FullName : <input type="text" id="myName"></p>'+
    '<p><input type="button" class="orderButton" value="SAVE" data-name="myName" data-param="'+ param +'"></p>');

Your jQuery code can have a single click handler which responds to any "order button" click:

$(document).on('click', '.orderButton', function () {
    var nameElement = $(this).data('name');
    var name = $('#' + nameElement).val();
    var param = $(this).data('param');
    save_order(param, name);
});

Keep the HTML and the JavaScript reasonable separated and the code becomes a lot cleaner and easier to maintain. I'm sure this can be cleaned up quite a bit more, but this should at least be enough to get you started.