jQWidgets Forums

Tagged: datetimeinput, dynamically created date, javascript datetime, jquery datetime input, post problem

This topic contains 4 replies, has 2 voices, and was last updated by daltonmaurya 9 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

not able post dynamically created datetime input Posts
November 28, 2015 at 11:04 am not able post dynamically created datetime input #78644

daltonmaurya
Participant

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<style type=”text/css”>@import “style.css”;</style>
<!– Complusory jq refrences –>
<link rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.arctic.css” type=”text/css” />
<script type=”text/javascript” src=”jqwidgets/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/scripts/demos.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcore.js”></script>
<!– Date INput –>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/globalization/globalize.js”></script>
<!– for List Box –>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxbuttons.js”></script>
<!– Script for json files –>
<script type=”text/javascript”>
$(document).ready(function () {
// Create a jqxDateTimeInput
$(“#fdescription”).jqxInput({theme: ‘arctic’, height: 25, width: 200, minLength: 1 });
$(“#jqxcheckbox”).jqxCheckBox();
$(“#submit”).jqxButton({template: “primary”, width: ‘150’, height: ’45’});
$(“#fcrda”).jqxComboBox({ theme: ‘arctic’,autoDropDownHeight: true, width: 150, height: 25 });
$(“#listattendees”).jqxComboBox({ theme: ‘arctic’,selectedIndex: 0, width: ‘250px’, height: ’25px’ });
$(“#fpdc”).jqxDateTimeInput({ theme: ‘arctic’, width: 100, height: 25 });

var slno=0;
$(‘#addButId’).click(function(){
addRow(slno);
slno++;
});

});

function addRow(slno) {
var table = document.getElementById(‘t1’);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

// First Cell for CheckBox
var cell1 = row.insertCell(0);
var checkbox = document.createElement(‘input’);
checkbox.type = “checkbox”;
checkbox.name = “chk[]”;
checkbox.id = “chk” + slno;
cell1.appendChild(checkbox);

// Second Cell for Text Area
var cell2 = row.insertCell(1);
var textarea = document.createElement(‘textarea’);
textarea.name = “fdescription[]”;
textarea.cols = “50”;
textarea.rows = “4”;
textarea.id = ‘fdescription’ + slno;
cell2.appendChild(textarea);
$(“#fdescription” + slno).jqxInput({theme: ‘arctic’, height: 25, width: 200, minLength: 1 });

// Third CRDA Option
var cell3 = row.insertCell(2);
theSelect = document.createElement(‘select’);
theSelect.name = ‘fcrda[]’;
theSelect.id = ‘fcrda’ + slno;
var items = $(“#fcrda”).jqxComboBox(‘getItems’);
for(i=0;i<items.length-1;i++){
anOption = document.createElement(‘option’);
anOption.value = items[i].value;
anOption.innerHTML = items[i].label;
theSelect.appendChild(anOption);
}
cell3.appendChild(theSelect);
$(“#fcrda”+slno).jqxComboBox({ theme: ‘arctic’,autoDropDownHeight: true, width: 150, height: 25 });

// Fourth Responsibility
var cell4 = row.insertCell(3);
theSelect = document.createElement(‘select’);
theSelect.name = ‘listattendees[]’;
theSelect.id = ‘listattendees’ + slno;
var items = $(“#listattendees”).jqxComboBox(‘getItems’);
for(i=0;i<items.length-1;i++){
anOption = document.createElement(‘option’);
anOption.value = items[i].value;
anOption.innerHTML = items[i].label;
theSelect.appendChild(anOption);
}
cell4.appendChild(theSelect);
$(“#listattendees” + slno).jqxComboBox({ theme: ‘arctic’,selectedIndex: 0, width: ‘250px’, height: ’25px’ });

// Creating PDC
var cell5 = row.insertCell(4);
var t3=document.createElement(“div”);
t3.name= “fpdc[]”;
t3.id = “fpdc”+slno;
cell5.appendChild(t3);
$(“#fpdc” + slno).jqxDateTimeInput({ theme: ‘arctic’, width: 100, height: 25 });

}

function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;

for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 2) {
alert(“Cannot delete all the rows.”);
break;
}
table.deleteRow(i);
rowCount–;
i–;
}

}
}catch(e) {
alert(e);
}
}

</script>
<style>
table.t1 { margin: 1em 1em 5em 1em; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; }
.t1 th, .t1 td { padding: 4px 8px; }
.t1 thead th { background: #4f81bd; text-transform: uppercase; text-align: left; font-size: 12px; color: #fff; }
.t1 tr { border-right: 2px solid #95b3d7; font-size: 14px;}
.t1 tbody tr { border-bottom: 1px solid #95b3d7; }
.t1 tfoot th { background: #4f81bd; text-align: left; font-weight: normal; font-size: 10px; color: #fff; }
</style>
</head>
<body>
<div class=”wrap”>
<?php include ‘titleblock.php’; ?>
<?php
if (!($_SERVER[“REQUEST_METHOD”] == “POST”)) {

} else {
if(isset($_POST)==true && empty($_POST)==false){
$txtbox = $_POST[‘fpdc’];
echo count($txtbox) . “</br>”;
echo $txtbox . “</br>”;

PROBLEM is here and I am not getting the array of dates which was created dynamically. Please help me.

}
}

?>

<div id=”content-wrap”>
<!– Main Content –>
<div id=”main”>
<input id=”addButId” type=”button” value=”+Add ROW”/>
<input type=”button” value=”Del Row” onclick=”deleteRow(‘t1’)” />
<form action=”” method=”post”” enctype=”multipart/form-data”>
<table class = “t1″ id=”t1″>
<thead>
<tr>
<th> Check</th>
<th> Description</th>
<th> CRDA </th>
<th> Responsibility</th>
<th> PDC</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type=”checkbox” name=”chk[]” id=”jqxcheckbox”> </td>
<td> <textarea type=”text” name=”fdescription[]” id=”fdescription” rows=”4″ cols=”50″/></textarea> </td>
<td>
<select name=”fcrda[]” id=”fcrda”>
<?php
include(‘connect-db.php’);
$dbname =”xxxx”;
mysql_select_db(“$dbname”);
$tablename=”tblcrda”;
$res = mysql_query(“SELECT name,acronym FROM $tablename ORDER BY name”) or die(mysql_error());
$str1=””;
while($row = mysql_fetch_assoc($res)) {
$str1 = “<option value='{$row[‘acronym’]}'”;
// This if statement is valid for only sngle select option and not for multiple select option
if ($row[“place”] == $fcrda) {
$str1.= ” selected”;
}
$str1.= “>{$row[‘name’]}</option>”;
echo $str1;
}
?>
</select>
</td>
<td>
<select name=”listattendees[]” id=”listattendees” multiple>
<?php
include(‘connect-db.php’);
$dbname =”xxx”;
mysql_select_db(“$dbname”);
$tablename=”tbemp”;
$res = mysql_query(“SELECT id,name,designation,groupname FROM $tablename WHERE cadre = ‘DRDS’ ORDER BY name ASC”) or die(mysql_error());
$str1=””;
while($row = mysql_fetch_assoc($res)) {
$str1 = “<option value='{$row[‘name’]}'”;
// This if statement is valid for only sngle select option and not for multiple select option
if ($row[“name”] == $listattendees) {
$str1.= ” selected”;
}
$str1.= “>{$row[‘name’]}</option>”;
echo $str1;
}
?>
</select>
</td>
<td>
<div name=’fpdc[]’ id=’fpdc’> </div>
</td>
</tr>
</tbody>
</table>
<input type=”submit” name=”submit” id=”submit” value=”Submit” class=”classSubmit” />
</form>

</div>
<!– Side Menu –>
<?php include ‘mom_side_bar.php’; ?>
</div>
</div>
<?php include ‘footer.php’; ?>
</body>
</html>

November 30, 2015 at 9:03 am not able post dynamically created datetime input #78687

ivailo
Participant

Hi daltonmaurya,

Try to assign the value of the widget to hidden input.
Then you don’t have to find any problems with submitting your data.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

December 1, 2015 at 3:40 am not able post dynamically created datetime input #78723

daltonmaurya
Participant

thanks.
But please let me know how to do that “assign the value of the widget to hidden input” in this particular case by giving an example.

December 2, 2015 at 12:58 pm not able post dynamically created datetime input #78794

ivailo
Participant

Hi daltonmaurya,

Create hidden input in your form, assign it the value of the widget and when data is submitted to your PHP script use the value of the input.
Here is a demo how to assign value to the input.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

December 2, 2015 at 2:29 pm not able post dynamically created datetime input #78806

daltonmaurya
Participant

Thanks.

I have sorted this issue.
first i have created a hidden input (“jsarray”) in the main form of html.
second, I have use the following code:
$(‘#submit’).click(function(){
var x = document.getElementsByClassName(“fpdc”);
var arr=[];
for (var i = 0; i < x.length; i++) {
var element = x[i].id;
var d1 = document.getElementById(element).value;
arr[i]=d1;
}

document.getElementById(“jsarray”).value = arr;

});

Thirdly, I have used post method for hidden input.

Thanks again.
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.