Validate all the inputs of a table in jquery - javascript

I have a set of inputs that are dynamically generated and their id's incremented based on the number of items in an array
<table width="100%">
<?php $i = 1; ?>
<?php foreach ($products as $product) { ?>
<tr>
<td>
<p><b><?php echo $product['name']; ?></b></p>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<label class="control-label" for="firstname_<?php echo $i; ?>">First Name:</label>
<input name="firstname_<?php echo $i; ?>" id="firstname_<?php echo $i; ?>" required>
</div>
</td>
<td>
<div class="form-group">
<label class="control-label" for="lastname_<?php echo $i; ?>">Last Name:</label>
<input name="lastname_<?php echo $i; ?>" id="lastname_<?php echo $i; ?>" required>
</div>
</td>
<td>
<div class="form-group">
<label class="control-label" for="recipient_number_<?php echo $i; ?>"> Phone Number:</label>
<input name="recipient_number_<?php echo $i; ?>" id="recipient_number_<?php echo $i; ?>" required>
</div>
</td>
<td>
<div class="form-group">
<label class="control-label" for="recipient_email_<?php echo $i; ?>"> Email:</label>
<input name="recipient_number_<?php echo $i; ?>" id="recipient_email_<?php echo $i; ?>" required>
</div>
</td>
</tr>
<?php $i++; ?>
<?php } ?>
</table>
I am trying to look for a way using JQuery to loop through all the generated inputs to ensure they are not empty

Try this snippet.
This will allow you to validate the fields which are empty, and try to use the filter, that helps you to do it without any loop.
More information filter
$('#sender_container').on('submit',function(e)
{
e.preventDefault();
validate();
});
function validate()
{
$('#sender_container > input[type="text"]')
.removeClass('error')
.filter(function() {
// Remove error classes. Filter
return !$.trim(this.value);
})
.addClass('error');
}
.error {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="sender_container">
<input type="text" name="name[]" />
<input type="text" name="name[]" />
<input type="text" name="name[]" />
<input type="text" name="name[]" />
<input type="text" name="name[]" />
<input type="submit" name="submit" />
</form>

try using this -
you can replace table with a table Id here - $('#tableId :input')
$('table :input').each(function(){
//Enter your code to validate input
console.log($(this).attr('name') + " : " + $(this).val());
});

Related

How to get a input value from dynamic list

I don't know how to get the value, with js always show me the first input value! Thanks in advance!!!
<html>
<head>
</head>
<body>
<?php
while($i < $forid){
?>
<div id="mydiv">
<input type="text" id="myid" name="myid" value="<?php echo $arrayid[$i]; ?>">
<input type="text" id="myname" name="myname" value="<?php echo $arrayname[$i];?>">
<input type="text" id="myjob"name="myjob" value="<?php echo $arrayjob[$i]; ?>">
<input type="submit" value="get values" id="getvaluesbutton">
</div>
<?php
$i++;
}
?>
</body>
</html>
Get array access to elements by class/name in your js script by changing html:
<?php
while($i < $forid){
?>
<div id="mydiv">
<input type="text" name="myid[]" class="myid" value="<?php echo $arrayid[$i]; ?>">
<input type="text" name="myname[]" class="myname" value="<?php echo $arrayname[$i];?>">
<input type="text" name="myjob[]" class="myjob" value="<?php echo $arrayjob[$i]; ?>">
<input type="submit" value="get values" id="getvaluesbutton">
</div>
<?php
$i++;
}
?>
for javascript hints read this question

Populating form values based on selected option from drop down list

I have a form that needs to populate based on a selected value from a drop down list.
This is my HTML/PHP:
<div class="modal-body">
<div class="form-group">
<label for="prodName">Product Name</label>
<?php
$abc = "SELECT ItemCode, ItemName, CurrentPrice
FROM Table
ORDER BY ItemName";
$def = sqlsrv_query($sapconn, $abc);
?>
<select class="selectpicker" data-live-search="true" name="status" id="priceQuote">
<?php while($row = sqlsrv_fetch_array($def, SQLSRV_FETCH_ASSOC)) : ?>
<option data-tokens="<?php echo $row['ItemName']; ?>" value="<?php echo $row['ItemName']; ?>">
<?php echo $row['ItemName']; ?>
</option>
<?php endwhile; ?>
</select>
</div>
<div class="form-group">
<label for="prodCode">Product Code</label>
<input type="text" class="form-control" id="prodCode" placeholder="Product Code" value="<?php echo $row['ItemCode']; ?>">
</div>
<div class="form-group">
<label for="bandA">Current Price</label>
<input type="text" class="form-control" id="bandA" placeholder="Current Price" value="<?php echo $row['CurrentPrice']; ?>">
</div>
<div class="form-group">
<label for="newPrice">New Price</label>
<input type="text" class="form-control" id="newPrice" placeholder="New price">
</div>
</div>
But I need to populate the value of product code and price from whichever option is selected, in the select list can someone point me in the right direction?

Staff can only edit only few selected fields other fields will be readonly but admin can edit all the fields

Staff user can only edit some selected input fields, remaining input fields will be read-only, but Admin can edit all the fields. I am a beginner in PHP and i am trying to do it for the last few days but in-vain.
<div class="row">
<div class="col-lg-6" style="margin-bottom: 20px;">
<?php
if(isset($_POST['submit'])) {
if(($_POST['action']=='edit') || ($_POST['action2']=='edit')) { ?>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" class="form-horizontal" role="form" enctype="multipart/form-data">
<?php
$edit_id=$_POST['selector'];
$N = count($edit_id);
for($i=0; $i<$N; $i++) {
$result = mysql_query("SELECT * FROM ".TSURPHU." WHERE id='$edit_id[$i]'");
while($row = mysql_fetch_array($result)) { ?>
<input type="hidden" name="id[]" id="id" value="<?php echo $row['id'] ?>">
<div class="form-group">
<div style="float:left">
<label><span class="tibetan">ཨང་à¼</span> Receipt No:</label>
<input type="text" class="form-control" style="width: 60% !important; color:#999999;" name="receipt_no[]" value="<?php echo $row['receipt_no']; ?>" readonly>
</div>
<div>
<label><span class="tibetan">* ཟླ་ཚེསà¼</span> Date: (yyyy-mm-dd)</label>
<input class="form-control" style="width: 20% !important;" type="text" readonly="readonly" name="subDate[]" value="<?php echo $row['subDate']; ?>" >
</div>
</div>
<div class="form-group">
<label><span class="tibetan">* དད་དམ་མཆོག་à½à½´à¼‹à½¡à½„ས་པà¼</span> Received with thanks from:</label>
<input class="form-control" style="width: 40% !important" type="text" name="name[]" id="name" value="<?php echo $row['name'] ?>">
</div>
<div class="form-group">
<label><span class="tibetan">* à½à¼‹à½–ྱང་à¼</span> Address:</label>
<input class="form-control" style="width: 40% !important" type="text" name="address[]" id="address" value="<?php echo $row['address'] ?>">
</div>
Here is the form:
I want only (Receive from thanks) and (Address) can edit by staff user, but (Receipt) and (date) will be read-only, these fields can edited by admin only.
From your comment,
Admin level = 5 where as staff level = 2..
Assuming the fact that you have differentiated the admin and staff using $_SESSION i.e if an admin logs in, $_SESSION['user_level'] would be 5 and if a staff logs in, $_SESSION['user_level'] would be 2, your code inside while loop would be like this:
// your code
while($row = mysql_fetch_array($result)) { ?>
<input type="hidden" name="id[]" id="id" value="<?php echo $row['id'] ?>">
<div class="form-group">
<div style="float:left">
<label> Receipt No:</label>
<input type="text" class="form-control" style="width: 60% !important; color:#999999;" name="receipt_no[]" value="<?php echo $row['receipt_no']; ?>"<?php if($_SESSION['user_level'] == 2){ echo ' readonly="readonly"'; } ?>>
</div>
<div>
<label> Date: (yyyy-mm-dd)</label>
<input class="form-control" style="width: 20% !important;" type="text" name="subDate[]" value="<?php echo $row['subDate']; ?>"<?php if($_SESSION['user_level'] == 2){ echo ' readonly="readonly"'; } ?>>
</div>
</div>
<div class="form-group">
<label> Received with thanks from:</label>
<input class="form-control" style="width: 40% !important" type="text" name="name[]" id="name" value="<?php echo $row['name'] ?>">
</div>
<div class="form-group">
<label> Address:</label>
<input class="form-control" style="width: 40% !important" type="text" name="address[]" id="address" value="<?php echo $row['address'] ?>">
</div>

Javascript Function not recognized onclick

I have a javascript function named formApprove() and am calling that function within html onclick on a button. For some reason the javascript function is not being recognized because firebug tells me that the forApprove is not a function. Below is the code in the head:
<script type="text/javascript">
function formApprove() {
var TheTextBox = document.getElementById("formApprove");
TheTextBox.value = 'true';
alert("hellp");
return true;
}
</script>
Below is the code in the body:
<input type="submit" name="approve" value="Approve Membership" onclick="formApprove()" />
Any help on this would be greatly appreciated.
Full Code:
<head>
<script type="text/javascript">
function nextPrevious(txtElement, btnElement) {
switch(btnElement.name) {
case 'increase':
var numrows = document.getElementById("numOfRows");
if (txtElement.value < Number(numrows.value)) {
txtElement.value++;
} else {
alert('You are alread at the end of the members');
return false;
}
break;
case 'decrease':
if(txtElement.value > 1) {
txtElement.value--;
} else {
alert('You are alread at the begining of the members');
return false;
}
break;
case 'goto':
alert(txtElement.value);
break;
default:
}
return true;
}
function approve() {
var TheTextBox = document.getElementById("formApprove");
TheTextBox.value = 'true';
alert("hellp");
return true;
}
function formChange() {
var TheTextBox = document.getElementById("formSubmit");
TheTextBox.value = 'true';
return true;
}
function deleteRecord() {
var answer = confirm ("Are you sure you want to delete record?");
if (answer) {
var TheTextBox = document.getElementById("formDelete");
TheTextBox.value = 'true';
return true;
} else {return false;}
}
</script>
</head>
<body>
<form name="members_view" method="POST" action="viewpending.php">
<br />
<div id="buttons">
<input type="submit" name="update" value="Update Record" onclick="formChange(this.form.elements['formSubmit'].value)" /> -
<input type="submit" name="decrease" value="Previous" onclick="nextPrevious(this.form.elements['record'], this)" /> -
<input type="submit" name="increase" value="Next" onclick="nextPrevious(this.form.elements['record'], this)" /> -
<input type="submit" name="delete" value="Delete Record" onclick="deleteRecord(this.form.elements['formSubmit'].value)" /> -
<input type="submit" name="approve" value="Approve Membership" onclick="approve()" />
</div>
</div>
<div id="leftcase">
<div class="label">First Name:</div><div class="input"><input size="40" type="text" name="FNAME" value="<?php echo $row['FNAME']; ?>" /></div>
<div class="label">Middle Name:</div><div class="input"><input size="40" type="text" name="MNAME" value="<?php echo $row['MNAME']; ?>" /></div>
<div class="label">Last Name:</div><div class="input"><input size="40" type="text" name="LNAME" value="<?php echo $row['LNAME']; ?>" /></div>
<div class="label">Full Name:</div><div class="input"><input size="40" type="text" name="FULL_NAME" value="<?php echo $row['FNAME'].' '.$row['MNAME'].' '.$row['LNAME']; ?>" /></div>
<div class="label">Nick Name:</div><div class="input"><input size="40" type="text" name="NNAME" value="<?php echo $row['NNAME']; ?>" /></div>
<div class="label">Spouse/Partner Name:</div><div class="input"><input size="40" type="text" name="H_COUNTRY" value="<?php echo $row['H_COUNTRY']; ?>" /></div>
<div class="label">Anniversary Date:</div><div class="input"><input size="40" type="text" name="B_ZIP" value="<?php echo $row['B_ZIP']; ?>" /></div>
<div class="label">Primary Email:</div><div class="input"><input size="40" type="text" name="EMAIL" value="<?php echo $row['EMAIL']; ?>" /></div>
<div class="label">Second Email:</div><div class="input"><input size="40" type="text" name="B_CITY" value="<?php echo $row['B_CITY']; ?>" /></div>
<div class="label">Home Street:</div><div class="input"><input size="40" type="text" name="H_STREET" value="<?php echo $row['H_STREET']; ?>" /></div>
<div class="label">Home City:</div><div class="input"><input size="40" type="text" name="H_CITY" value="<?php echo $row['H_CITY']; ?>" /></div>
<div class="label">Home State:</div><div class="input"><input size="40" type="text" name="H_STATE" value="<?php echo $row['H_STATE']; ?>" /></div>
<div class="label">Home Zip:</div><div class="input"><input size="40" type="text" name="H_ZIP" value="<?php echo $row['H_ZIP']; ?>" /></div>
<div class="label">Home Phone:</div><div class="input"><input size="40" type="text" name="H_PHONE" value="<?php echo $row['H_PHONE']; ?>" /></div>
<div class="label">Cell:</div><div class="input"><input size="40" type="text" name="H_CELL" value="<?php echo $row['H_CELL']; ?>" /></div>
<div class="label">Birth Date:</div><div class="input"><input size="40" type="text" name="H_WEB" value="<?php echo $row['H_WEB']; ?>" /></div>
<div class="label">Membership Exp:</div><div class="input"><input size="40" type="text" size="40" name="MEMBER_INFO" value="<?php echo $row['MEMBER_INFO']; ?>" /></div>
<div class="label">Retired Mil Info:</div><div class="input"><input size="40" type="text" name="B_STATE" value="<?php echo $row['B_STATE']; ?>" /></div>
<div class="label">1st tour from:</div><div class="input"><input size="40" type="text" name="B_COUNTRY" value="<?php echo $row['B_COUNTRY']; ?>" /></div>
<div class="label">1st tour Rank/Rate:</div><div class="input"><input size="40" type="text" name="B_WEB" value="<?php echo $row['B_WEB']; ?>" /></div>
<div class="label">1st tour cruise Book:</div><div class="input"><input size="40" type="text" name="B_PHONE" value="<?php echo $row['B_PHONE']; ?>" /></div>
<div class="label">2nd tour from:</div><div class="input"><input size="40" type="text" name="B_FAX" value="<?php echo $row['B_FAX']; ?>" /></div>
<div class="label">2nd tour Rank/Rate:</div><div class="input"><input size="40" type="text" name="PAGER" value="<?php echo $row['PAGER']; ?>" /></div>
<div class="label">2nd tour cruise Book:</div><div class="input"><input size="40" type="text" name="B_COMPANY" value="<?php echo $row['B_COMPANY']; ?>" /></div>
<div class="label">3rd tour from:</div><div class="input"><input size="40" type="text" name="B_TITLE" value="<?php echo $row['B_TITLE']; ?>" /></div>
<div class="label">3rd tour Rank/Rate:</div><div class="input"><input size="40" type="text" name="B_DEPT" value="<?php echo $row['B_DEPT']; ?>" /></div>
<div class="label">3rd tour cruise book:</div><div class="input"><input size="40" type="text" name="OFFICE_LOC" value="<?php echo $row['OFFICE_LOC']; ?>" /></div>
</div>
<div id="rightcase">
<div class="label">Biography:</div><div class="input"><textarea rows="35" cols="80" name="NOTES" /><?php echo $row['NOTES']; ?></textarea></div>
<input type="hidden" id="record" name="record" value="<?php echo $_POST['record']; ?>"/>
<input type="hidden" id="formSubmit" name="formSubmit" value="<?php echo $_POST['formSubmit']; ?>" />
<input type="hidden" id="formApprove" name="formApprove" value="<?php echo $_POST['formApprove']; ?>" />
<input type="hidden" id="formDelete" name="formDelete" value="<?php echo $_POST['formDelete']; ?>" />
<input type="hidden" id="numOfRows" name="numOfRows" value="<?php echo $num_rows; ?>" />
<input type="hidden" id="ID" name="ID" value="<?php echo $_POST['ID']; ?>"/>
</div>
<div id="buttons">
<input type="submit" name="update" value="Update Record" onclick="formChange(this.form.elements['formSubmit'].value)" > - <input type="submit" name="decrease" value="Previous" onclick="nextPrevious(this.form.elements['record'], this)" > - <input type="submit" name="increase" value="Next" onclick="nextPrevious(this.form.elements['record'], this)" > - <input type="submit" name="delete" value="Delete Record" onclick="deleteRecord(this.form.elements['formSubmit'].value)" >
</form>
</body>
You probably have a name clash with the function and the name of the element.
Either rename the function or rename the textbox.

javascript to check checkbox when input box is ticked - checkbox array []

I have a simple javascript issue. I have a checkbox and a input box.
when the user inputs text into an input box (onkeydown) I want it to check the corresponding checkbox in the row.
My checkbox's all share the same name for an array checkbox[].
my simplified syntax is:
<table>
<?php if(isset($records)) : foreach ($records as $row) : ?>
<tr>
<td>
<input type=checkbox name="editcustomer[]" id="editcustomer[]" value="<?php echo $row->id ?>">
</td>
<td>
<input type="text" name="customer_name_<?php echo $row->id ?>" id="customer_name_<?php echo $row->id ?>" value="<?php echo $row->customer_name ; ?>" onclick="document.getElementById('editcustomer<?php echo $row->id ?>').checked = true;">
</td>
<tr>
<?php endforeach ; ?>
</table>
As the name of the checkbox is not unique, only the value thereof how do I tell the javascript which checkbox to check?
<input type="text" name="customer_name_<?php echo $row->id ?>" id="customer_name_<?php echo $row->id ?>" value="<?php echo $row->customer_name ; ?>" onclick="document.getElementById('editcustomer<?php echo $row->id ?>').checked = true;">
Help appreciated as always.
Thanks
HTML
<input type="checkbox" name="checkbox[]"/>
<input type="text" name="name1" id="name1" />
<br>
<input type="checkbox" name="checkbox[]"/>
<input type="text" name="name2" id="name2" />
<br>
<input type="checkbox" name="checkbox[]" />
<input type="text" name="name3" id="name3" />
Jquery
$(':text').change(function(){
$(this).prev(':checkbox').attr('checked','true');
});
Hope this helps.
Regards.

Categories

Resources