Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I am working on an invoicing system and the controller in my mvc framework, for now, uses strings enclosed in single quotes. I am new to javascript but I couldn't avoid it. I have function that works and validates in a window.onload declaration but the same declaration inside the form creates an error. The html output is:

onclick="verifyAccount('{"1":null,"2":null,"3":null,"4":null,"5":null,"8":null,"9":null,"10":null,"21":null,"22":null}');" >

all the values are null because none have been created. in Firebug I get the error " SyntaxError: unterminated string literal". I don't know what is needed to solve this. The line that causes the error is:

    <input type="radio" name="account" id="account" onclick="verifyAccount(\''.$accounts.'\');" >

    $form = '
    <script type="text/javascript">

    window.onload = function() {
    document.getElementById("addLabor").onclick = function(){ addLabor("labor"); }
    document.getElementById("addPart").onclick = function(){ addPart("parts"); }
    document.getElementById("addAdjustment").onclick = function(){ addAdjustment("adjustments"); }
    document.getElementById("customer_id").onchange = function() { verifyAccount(\''.$accounts.'\'); }
    addLabor("labor");

    }

    </script>
$form = '
<script type="text/javascript">

window.onload = function() {
    document.getElementById("addLabor").onclick = function(){ addLabor("labor"); }
    document.getElementById("addPart").onclick = function(){ addPart("parts"); }
    document.getElementById("addAdjustment").onclick = function(){ addAdjustment("adjustments"); }
    document.getElementById("customer_id").onchange = function() { verifyAccount(\''.$accounts.'\'); }
    addLabor("labor");

    }

    </script>

    <form method="POST" class="formTable" id="addInvoice" action="/invoices/save"
onsubmit="return(validate());">
        <table class="buttons" >
            <tr>
            <td><input type="button" id="addLabor" value="Add labor"/></td>
            <td><input type="button" id="addPart" value="Add part"/></td>
            <td><input type="button" id="addAdjustment" value="Adjust"/></td>
            <td><input type="submit" name="Save" value="Save" /></td>
        </tr>
    </table>
    <table id="invoiceTable">
        <tr>
            <td><label>Date:</label></td>
            <td><input type="text" id="date" name="date" maxlength="10" size="4" />
                <a href="javascript:NewCal(\'date\',\'MMDDYYYY\')">
                <img src="/images/cal.gif" width="16" height="16" alt="Pick a date"></a>
            </td>
        </tr>
        <tr>
            <td><label>Use Account?:</label></td>
            <td><input type="radio" name="account" id="account" onclick="verifyAccount(\''.$accounts.'\')" ></td>
        </tr>
        <tr>
            <td><label>Work Order Number:</label></td>
            <td><input type="text" name="number" id="number" maxlength="8" size="6" /></td>
        </tr>
        <tr>
            <td><label>Customer:</label></td>
            <td><select name="customer_id" id="customer_id" >'.$select.'</select></td>
        </tr>
        <tr>
            <td><label>Job Name:</label></td>
            <td><input type="text" name="job_name" id="job_name" /></td>
        </tr>
    </table>
    <table id="labor"></table>
    <table id="parts"></table>
    <table id="adjustments"></table>
    <table id="payment"></table>

    </form>';
        $this->component($form);
     <form method="POST" class="formTable" id="addInvoice" action="/invoices/save"
onsubmit="return(validate());">
    <table class="buttons" >
        <tr>
            <td><input type="button" id="addLabor" value="Add labor"/></td>
            <td><input type="button" id="addPart" value="Add part"/></td>
            <td><input type="button" id="addAdjustment" value="Adjust"/></td>
            <td><input type="submit" name="Save" value="Save" /></td>
        </tr>
    </table>
    <table id="invoiceTable">
        <tr>
            <td><label>Date:</label></td>
            <td><input type="text" id="date" name="date" maxlength="10" size="4" />
                <a href="javascript:NewCal(\'date\',\'MMDDYYYY\')">
                <img src="/images/cal.gif" width="16" height="16" alt="Pick a date"></a>
            </td>
        </tr>
        <tr>
            <td><label>Use Account?:</label></td>
            <td><input type="radio" name="account" id="account" onclick="verifyAccount(\''.$accounts.'\')" ></td>
        </tr>
        <tr>
            <td><label>Work Order Number:</label></td>
            <td><input type="text" name="number" id="number" maxlength="8" size="6" /></td>
        </tr>
        <tr>
            <td><label>Customer:</label></td>
            <td><select name="customer_id" id="customer_id" >'.$select.'</select></td>
        </tr>
        <tr>
            <td><label>Job Name:</label></td>
            <td><input type="text" name="job_name" id="job_name" /></td>
        </tr>
    </table>
    <table id="labor"></table>
    <table id="parts"></table>
    <table id="adjustments"></table>
    <table id="payment"></table>


</form>';
        $this->component($form);
share|improve this question
Get rid of the single quotes. That should not be too difficult. verifyAccount({"1":null,"2":null,"3":null,"4":null,"5":null,"8":null,"9":null,"‌​10":null,"21":null,"22":null});" > will be valid – mplungjan Jul 14 at 4:34
It's inside a single quoted string. Thats why the combination of single quotes and escaped single quotes exist. – Corey Ray Jul 14 at 4:36
One has to ask why you'd need to run a Javascript function on fixed data produced by PHP. Why not do the job in PHP and simply post the result into your HTML? – Mike W Jul 14 at 4:42
@MikeW, Good idea! What procedure would you recommend? – Corey Ray Jul 14 at 4:44
Pleas show the PHP that produces the input field – mplungjan Jul 14 at 4:44
show 2 more comments

3 Answers

up vote 2 down vote accepted

The problem are all the double-quotes, which keep starting and ending strings. This results in the onclick value being just:

onclick="verifyAccount('{"

With the rest being at best additional attributes or just junk.

The double-quotes that are part of the value need to be escaped/encoded, which can be done with htmlentities:

'... onclick="verifyAccount(\''.htmlentities($accounts).'\');" ...'

Though, another option is to take advantage of JSON's relation to JavaScript, outputting the string of JSON so that it's treated as a JavaScript Object literal:

'... onclick=\'verifyAccount('.$accounts.');\' ...'

Or, if $results still needs to be encoded as JSON:

'... onclick=\'verifyAccount('.json_encode($accounts).');\' ...'

Resulting in:

<... onclick='verifyAccount({"1":null,"2":null",...})'>

The dependency of this is that verifyAccount would need to be adjusted to expect an Object rather than a String.

share|improve this answer
That is the main issues, yes. +1 – mplungjan Jul 14 at 4:51
Thank you all! That gave me a different result. – Corey Ray Jul 14 at 5:01
Glad to be of assistance ;))) – mplungjan Jul 14 at 5:18

Here is my suggestion

javaScript:

var account = <?php echo json_encode($accounts)?>;

or if you for some reason cannot get rid of the single qutotes:

 var account = JSON.parse('{"1":null,"2":null,"3":null,"4":null,"5":null,"8":null,"9":null,"10":null,"21":null,"22":null}');

HTML:

<input type="radio" name="account" id="account" onclick="verifyAccount(account)" />

or with less change:

echo '<input  ... onclick=\'verifyAccount('.json_encode($accounts).');\' >';
share|improve this answer

I believe you're just missing the concatenation operators here.

So:

<input type="radio" name="account" id="account" onclick="verifyAccount(\''.$accounts.'\');" >

Becomes:

<input type="radio" name="account" id="account" onclick="verifyAccount('\'' + '.$accounts.' + '\'');" >

And you can correct me here, but I believe that is a PHP variable you're trying to insert there, so it really should become:

   

<input type="radio" name="account" id="account" onclick="verifyAccount('\'' + '.<?php echo $accounts ?>.' + '\'');" >
share|improve this answer
Don't you mean echo '<input type="radio" name="account" id="account" onclick=\'verifyAccount('.json_encode($accounts).');\' >' – mplungjan Jul 14 at 4:45
I was assuming the html was outside of PHP tags by design. However, @mplungjan your solution would be MUCH cleaner. – Myles Jul 14 at 4:47
It would be much cleaner but I am learning this as I go and didn't really plan much. I know it's a deviance on my part but I'm not a javascript expert by far. Thanks for the help! – Corey Ray Jul 14 at 5:03

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.