Databases
StackOverflow2013
Postsdbo
POType of input fields in "form" doesnt work with Jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POType of input fields in "form" doesnt work with Jquery
    text
    copied!<p>I have a problem with my project. I have a timetable with a row, in which is possible to add more rows dynamically with Jquery.</p> <p>The codes are:</p> <pre><code>&lt;?php session_start(); ?&gt; &lt;html lang="es"&gt; &lt;head&gt; &lt;meta charset="iso-8859-1"&gt; &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="rows_management.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="elements"&gt; &lt;form id="data" action="timetable_processing.php" method="post"&gt; &lt;table border="1" id="table"&gt; &lt;thead&gt; &lt;tr&gt; &lt;td&gt;Hour&lt;/td&gt; &lt;td&gt;Monday&lt;/td&gt; &lt;td&gt;Tuesday&lt;/td&gt; &lt;td&gt;Wednesday&lt;/td&gt; &lt;td&gt;Thursday&lt;/td&gt; &lt;td&gt;Friday&lt;/td&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr class="first-row"&gt; &lt;td&gt;&lt;input type="time" name="hour[0]" placeholder="hour"&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="subject_mon[0]" placeholder="Subject"&gt;&lt;br&gt;&lt;input type="text" name="id_user_mon[0]"placeholder="Id_teacher"&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="subject_tue[0]" placeholder="Subject"&gt;&lt;br&gt;&lt;input type="text" name="id_user_tue[0]"placeholder="Id_teacher"&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="subject_wed[0]" placeholder="Subject"&gt;&lt;br&gt;&lt;input type="text" name="id_user_wed[0]"placeholder="Id_teacher"&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="subject_thu[0]" placeholder="Subject"&gt;&lt;br&gt;&lt;input type="text" name="id_user_thu[0]"placeholder="Id_teacher"&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="subject_fri[0]" placeholder="Subject"&gt;&lt;br&gt;&lt;input type="text" name="id_user_fri[0]"placeholder="Id_teacher"&gt;&lt;/td&gt; &lt;td class="remove"&gt;Remove&lt;/td&gt; &lt;/tr&gt; &lt;input type="hidden" name="year" id="year" value="&lt;?php echo $year ?&gt;"&gt; &lt;input type="hidden" name="class" id="class" value="&lt;?php echo $class ?&gt;"&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;input type="button" id="add" value="Add row" /&gt; &lt;input type="submit" id="submit" value="Submit"&gt; &lt;/form&gt; &lt;/div&gt; &lt;?php $connection = mysql_connect("localhost", "alonsosjumper", "alonsosjumper") or die('It´s not possible to connect: ' . mysql_error()); echo '&lt;br&gt;OK, all correct&lt;br&gt;'; mysql_select_db("project", $connection) or die('It´s not possible to open the database'); $query= "select id_user, name, surnames from users where user_type='teacher' order by id_user"; $result= mysql_query($query); echo ' &lt;p&gt;Teachers:&lt;/p&gt; &lt;table border="1" width="auto"&gt; &lt;tr&gt;&lt;td&gt;Id_user&lt;/td&gt;&lt;td&gt;Name&lt;/td&gt;&lt;td&gt;Surnames&lt;/td&gt;&lt;/tr&gt;'; while($row = mysql_fetch_array($result)) { echo "&lt;tr&gt;&lt;td&gt;".$fila['id_user']."&lt;/td&gt;&lt;td&gt;".$fila['name']."&lt;/td&gt;&lt;td&gt;".$fila['surnames']."&lt;/td&gt;&lt;/tr&gt;"; } ?&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>and:</p> <pre><code>$(document).ready(function(){ var countInputs = ($(".first-row").length); $("#add").on('click', function(){ $('#table &gt; tbody:last').after("&lt;tr&gt;&lt;td&gt;&lt;input type='time' name='hour['+countInputs+']' placeholder='Hour'&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='text' name='subject_mon['+countInputs+']' placeholder='Subject'&gt;&lt;br&gt;&lt;input type='text' name='id_user_mon['+countInputs+']' placeholder='Teacher'&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='text' name='subject_tue['+countInputs+']' placeholder='Subject'&gt;&lt;br&gt;&lt;input type='text' name='id_user_tue['+countInputs+']' placeholder='Teacher'&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='text' name='subject_wed['+countInputs+']' placeholder='Subject'&gt;&lt;br&gt;&lt;input type='text' name='id_user_wed['+countInputs+']' placeholder='Teacher'&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='text' name='subject_thu['+countInputs+']' placeholder='Subject'&gt;&lt;br&gt;&lt;input type='text' name='id_user_thu['+countInputs+']' placeholder='Teacher'&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='text' name='subject_fri['+countInputs+']' placeholder='Subject'&gt;&lt;br&gt;&lt;input type='text' name='id_user_fri['+countInputs+']' placeholder='Teacher'&gt;&lt;/td&gt;&lt;td class='remove'&gt;Remover&lt;/td&gt;&lt;/tr&gt;"); countInputs++; }); $(document).on("click",".remove",function(){ if (countInputs&gt;1) { var parent = $(this).parents().get(0); $(parent).remove(); countInputs--; } else alert("It´s not possible to remove the last row"); }); }); </code></pre> <p>My doubt is:</p> <p>The first row created works perfectly in hour with the input="date":</p> <pre><code>&lt;td&gt;&lt;input type="time" name="hour[0]" placeholder="hour"&gt;&lt;/td&gt; </code></pre> <p>However, in the Jquery code:</p> <pre><code>&lt;td&gt;&lt;input type="time" name="hour[0]" placeholder="hour"&gt;&lt;/td&gt; </code></pre> <p>it doesn´t work. It doesn´t accept the type time. I´ve tried with another types, like password or date and neither. I think Jquery doesn´t recognize the form.</p> <p>Can anybody give me a solution please?</p> <p>Thank you!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload