I am trying to make a simple validation in javascript for a foreach in php, but I don't know how to parse each row from view
<table>
<?php $i=1; ?>
<?php foreach($questions $row):
?>
<tr><td colspan="2"><?php echo $i++; ?><?php echo $row->question;?></td></tr>
<tr><td colspan="2"><?php echo $row->category;?></td></tr>
<tr><td colspan="2"><?php echo $row->id;?></td></tr>
<tr>
<td><input type="checkbox" id="r" value="<?php echo $row->var_1;?>"></td>
<td class="answer"><?php echo $row->var_a;?></td>
</tr><tr>
<td><input type="checkbox" id="r" value="<?php echo $row->var_2;?>"></td>
<td class="answer"><?php echo $row->var_b;?></td>
</tr><tr>
<td><input type="checkbox" id="r" value="<?php echo $row->var_3;?>"></td>
<td class="answer"><?php echo $row->var_c;?></td?
</tr>
<?php endforeach; ?>
</table>
<button type="button" id="submit">Send</button>
And in javascript I try to check every answer for each question .
<script>
$("#submit").on("click", function(){
var x=0;
if(document.getElementById("r").checked == true document.getElementById("r").value == 1){
x=x+1;
}
});
</script>
Each answer has value 1 or 0, and it can be multiple choice.
IDs need to be Unique - use class or name instead
if you have jQuery USE jQuery
$("#submit").on("click", function(e){
var x=$(".r:checked").length; // using class="r"
if (x < $(".r").length) {
alert("Please check all checkboxes");
e.preventDefault();
}
});
or using name="r"
$("#submit").on("click", function(e){
var x=$('input[name="r"]:checked').length;
if (x < $('input[name="r"]').length) {
alert("Please check all checkboxes");
e.preventDefault();
}
});
Related
I'm currently building a form, and using a PHP loop to build the elements in a table which hold the values I'm submitting after clicking a checkbox.
<form id="saveLineup">
#foreach($lists as $list)
<tr style="text-align:center;">
<td id="groupNumber">{{$list['product']}} - {{$list['product_NAME']}}</td>
<td id="detailColor">{{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}</td>
<td id="category">{{$list['CATEGORY']}}</td>
<td><input id="addToLineup"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo "checked='checked'"; ?>></td>
</tr>
#endforeach
</form>
My issue is, I have an id on the checkbox and id's on the values so I can only get the console log when I click the very first checkbox and it only logs the very first item. How can I change this so that I can submit with any checkbox in the table and it's associated values?
$("#addToLineup").click(function (e) {
var productNumber = document.getElementById("productNumber").innerHTML = productNumber;
var detailColor = document.getElementById("detailColor").innerHTML = detailColor;
var category = document.getElementById("category").innerHTML = category;
updatedata.productNumber = productNumber;
updatedata.detailColor = detailColor;
updatedata.category = category;
$.ajax({
url: "/test/addToLineup",
data: updatedata,
_token: phpVariables.csrfToken,
type: "POST",
beforeSend: function () {
showLoading(element);
},
success: function (data) {
location.reload();
},
});
});
Here is the solution to your problem, you need to use classes instead of IDs.
#foreach($lists as $list)
<tr style="text-align:center;">
<td class="groupNumber">{{$list['product']}} - {{$list['product_NAME']}}</td>
<td class="detailColor">{{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}</td>
<td class="category">{{$list['CATEGORY']}}</td>
<td><input class="addToLineup"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo "checked='checked'"; ?>></td>
</tr>
#endforeach
Now, in your JS section, you can fetch them by their class:
var productNumber = document.getElementsByClassName("productNumber").innerHTML = productNumber;
var detailColor = document.getElementsByClassName("detailColor").innerHTML = detailColor;
var category = document.getElementsByClassName("category").innerHTML = category;
Note: If you're applying CSS styles to those elements via their ID, you can change #productNumber to .productNumber in your CSS or you can leave the ID tag with the same name as your previous code.
In PHP code
<form id="saveLineup">
<?php $i=0; ?>
#foreach($lists as $list)
<?php $i+=1; ?>
<tr style="text-align:center;">
<td id="groupNumber<?php echo $i ?>">.
{{$list['product']}} - {{$list['product_NAME']}}
</td>
<td id="detailColor<?php echo $i ?>">.
{{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}.
</td>
<td id="category<?php echo $i ?>">.
{{$list['CATEGORY']}}
</td>
<td>
<input id="addToLineup<?php echo $i ?>"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo
"checked='checked'"; ?>>
</td>
</tr>
#endforeach
<input id="listcount"> type="hidden" value="<?php echo $i; ?>" >
</form>
Js function
$("#addToLineup").click(function (e) {
for(var i=1 ; i <= parseInt(document.getElementById("listcount").value); i++) {
Console.log(document.getElementById("productNumber"+i).innerHTML);
Console.log(document.getElementById("detailColor"+i).innerHTML);
Console.log(document.getElementById("category"+i).innerHTML);
}
});
I have the following php table and js function I've been working on. The problem is, the index ($ind) works correctly in the php, but I cannot figure out the syntax in the js function. The output of var ind= $('id')[ind]; is undefined. When I substitute and set var ind= ; it gives me the last index value in the array for each item. What can I set var ind equal to to capture the $ind value of the php in javascript?
<table id="manage-items" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr class="search">
<th> </th>
<th><?php echo $this->translate('Quantity');?></th>
<th><?php echo $this->translate('Status'); ?></th>
</tr>
</thead>
<?php $ind = 0; ?>
<?php foreach ($this->items as $item) {
$item_link = 'type=product';
?>
<div id="item_<?php echo $ind; ?>" style="display:none;">
<tr id="<?php echo $item['id']; ?>">
<td> </td>
<td class="Quantity">
<?php if ($item->item_quantity) { ?>
<span class="silvertext"><?php echo $item->item_quantity; ?></span>
<?php } else { ?>
<span class="silvertext">0</span>
<?php } ?>
</td>
<td class="Status">
<?php if (in_array($item['active'], array(0, 1))) { ?>
<div class="switch">
<label for="active[<?php echo $ind; ?>]"
class="switch-label switch-label-off">Active</label>
<input type="radio" class="switch-input"
id="active[<?php echo $ind; ?>]"
name="item[<?php echo $ind; ?>][status]"
value="1" <?php if ($item['active'] == 1) echo 'checked'; ?>>
<label for="inactive[<?php echo $ind; ?>]"
class="switch-label switch-label-on">Inactive</label>
<input type="radio" class="switch-input"
id="inactive[<?php echo $ind; ?>]"
name="item[<?php echo $ind; ?>][status]"
value="0" <?php if ($item['active'] == 0) echo 'checked'; ?>>
<span class="switch-selection"></span>
</div>
<?php } else { ?>
<?php echo $item['active']; ?>
<?php } ?>
</td>
</tr>
<?php $ind++; ?>
<?php } ?>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
if (typeof ind == "undefined") {
ind = 0;
}
$('input[type="radio"]').live('change', function () {
var status = this.value;
var id = $(this).parents('tr').attr('id');
var quantity = $(this).closest("tr").find(".Quantity > span").text();
var ind= $('id')[ind];
// a bunch of other javascript
});
});
</script>
var id contains the ID of the tr you want to access.
if you iterate through id with .find, you can access the span that you want to change.
var target = $("#"+id).find('span')[5];
Apply changes then on target
$(target).css("...", "...");
I have some javascript that creates a datetime picker on each row of a table. The function only works on the first row. I understand that the reason for this is that the datepicker shares the same ID on every row. How can I adjust my code to fix this?
<script type="text/javascript">
$(document).ready(function (){
$('#duedate').datetimepicker({
controlType: 'select',
timeFormat: 'hh:mm tt'
});
});
</script>
<?php $txtJob = $_GET['pickjob']; ?>
<?php
$query2 = "Select Work_Center, Sequence, Est_Total_Hrs from V_schedule WHERE job = '" . $txtJob . "'";
$results2 = sqlsrv_query($connPpp, $query2);?>
<form id="frmpromiseddate" name="frmpromiseddate" action="schedule_job_submit.php" method="POST">
<table class='table table-bordered table-condensed table-striped'>
<tr>
<td>Sequence</td>
<td>Work Center</td>
<td>Due Date</td>
</tr>
<?php while ($row2 = sqlsrv_fetch_array($results2)) {?>
<tr>
<td><?php echo $row2['Sequence']?></td>
<td><?php echo $row2['Work_Center']?></td>
<td><input type="text" name="duedate" id="duedate" value="" /> </td>
</tr>
<?php ;} //End of while ?>
</table>
Jquery treats idas unique identifier and apply on only one element at a time, where as it treats class as a group-identifier and can apply to multiple element at a time so change id to class both in html and Jquery code:-
<td><input type="text" name="duedate" class="duedate" value="" /></td>
And
$('.duedate').datetimepicker({
Use class(.) instead of id(#) for date picker
Javascript code :
$('.duedate').datetimepicker()
HTML code: making id unique
<?php $i=0;
while ($row2 = sqlsrv_fetch_array($results2)) {?>
<tr>
<td><?php echo $row2['Sequence']?></td>
<td><?php echo $row2['Work_Center']?></td>
<td><input type="text" name="duedate" class="duedate" id="duedate_<?php echo $i;?>" value="" /> </td>
</tr>
<?php $i++; } //End of while ?>
how to get the selected textbox id generated in while loop for updating the field as in phpmyadmin
<?php
while($fet=mysql_fetch_assoc($sql1))
{
?>
<tr>
<td><input type=text id='hello' name='hello' data-id="<?php echo $fet['username']?>" onchange='loadXMLDoc(this);' value=<?php echo $fet['username']?>>
<td><input type=text id='uid' name='uid' onchange='loadXMLDoc(this).' value=<?php echo $fet['id']?>>
</tr>
<?php
}
?>
Just append i and increment it till your while loop goes on..
<?php
$i=1;
while($fet=mysql_fetch_assoc($sql1))
{
echo '
<tr>
<td>
<input type="text" id="hello'.$i.'" name="hello'.$i.'" data-id="'.$fet['username'].'" onchange="loadXMLDoc(this.value,'.$i.')" value='.$fet['username'].' >
</td>
</tr>';
here write ur code for other fields
$i++;
}
?>
<script>
function loadXMLDoc(a,i)
{ var d= document.getElementById("hello"+i).value; }
</script>
Don't use foreach as bellow way.
foreach($sql1 as $value){
// don't generate html here
}
Because it may brake the html
Use foreach bellow way.
<?php
foreach($sql1 as $value):
?>
<tr>
<td><input type=text id='hello' name='hello' data-id="<?php echo $value['username']?>" onchange='loadXMLDoc(this);' value=<?php echo $value['username']?>>
<td><input type=text id='uid' name='uid' onchange='loadXMLDoc(this).' value=<?php echo $value['id']?>>
</tr>
<?php endforeach() ?>
use the uniqid() function
$str=uniqid("uid") it will make some thing like ti uid1hq7266
and print it in the input
I'm getting some problems trying to set order number if sequence of checkbox checked with javascript:
<?php
for ($x=0; $x<count($UnidadesServicio); $x++){
$idunidadserv = $UnidadesServicio[$x]['idunidadserv'];
$unidadserv = utf8_encode($UnidadesServicio[$x]['lugarunidad']);
$desunidad = utf8_encode($UnidadesServicio[$x]['desunidad']);
?>
<tr>
<td width="10%"><input type="checkbox" id="cbx_<?php echo $idunidadserv;?>" name="chk_unidadserv" value="<?php echo $idunidadserv;?>" onClick="AgregarUnidadServ()" /></td>
<td width="56%" height="28"> <?php echo $unidadserv;?> </td>
<td width="13%"> </td>
<td width="21%" align="center"> <input name="txt_orden_<?php echo $x;?>" type="text" id="txt_orden_<?php echo $idunidadserv;?>" value="" size="2" maxlength="1" class="txtorden" /> </td>
</tr>
<?php
}
?>
My JavaScript function:
<script>
function AgregarUnidadServ(){
var group = document.getElementsByName('chk_unidadserv');
var i;
for (i=0; i<group.length; i++){
if (group[i].checked == true){
var id = parseFloat(i+1);
$("#txt_orden_"+id).val(i);
}
}
}
</script>
What i need to to do:
When check any checkbox, set in input text the sequence number (1, 2, 3, etc.)
That code, display like this:
Greetings.
$("#txt_orden_"+id).val(id);
And sequence will start from 1.