Question

i have the jquery accordion tabs. within those tabs, i have a hidden form which on click, is auto-filled with certain values displayed within that tab. It displays correctly within the accordion tab but when i pass those same variables as auto-fill values within the form, only the first word gets displayed if there is more than 1 word. the variable name that i have put as the value attribute of the text box is exactly the same so i don’t know why this happens.

echo "<tr><p><td>".$allCourses[$i][0]."</td> - <td>".$allCourses[$i][1]."</td>

it gets displayed correctly here. however, here, only the first word appears:

<form action='editCourse.php' method='post'>
<p id='edit-course-d' class='edit-accordion-tab'><img src='images/edit.png' title='Edit Course'/></p>
<p id='edit-course-f' style='display: none'>
Course ID: <input type='text' name='edit-course-id' value =".$allCourses[$i][0]."><br />
Course Name: <input type='text' name='edit-course-name' value=".$allCourses[$i][1]."><br />

(all this is within the echo “” in php)

Answer 1

You have to put quotes around the content of your value-attribute, otherwise the “other words” are interpreted as HTML-attributes. So what is rendered to the browser looks like:

<input value=hello world>

The browser interprets this as an input element which has two attributes:

1. value="hello"
2. world=""

So you have to put quotes ' or double-quotes " around the value of the attribute. Like that:

echo "
    <form action='editCourse.php' method='post'>
    <p id='edit-course-d' class='edit-accordion-tab'><img src='images/edit.png' title='Edit Course'/></p>
    <p id='edit-course-f' style='display: none'>
    Course ID: <input type='text' name='edit-course-id' value='".htmlspecialchars($allCourses[$i][0])."'><br />
    Course Name: <input type='text' name='edit-course-name' value='".htmlspecialchars($allCourses[$i][1])."'><br />";

I use htmlspecialchars to escape the quotes that might appear inside the values (this adds another layer of safety).