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.
Related
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
I want to display the inputted text only after submitting. textbox will not be visible.
<head><title>some title</title></head>
<body>
<form method="post" action="">
<input type="text" name="something" value="<?php
if(isset($_POST['submit'])) {echo ($_POST['something']);}?>" />
<input type="submit" name="submit" />
</form>
</body>
<html>
So. Since I understand now what you've tried, here is the code for what you're actually trying:
<body>
<form name="expense_report" method="POST">
<div align=center id="submitButtonDiv" >
<table border=1>
<tr>
<td><?php if(isset($_POST['submit'])) {echo $_POST['txtDate1'];}else {echo '<input type="text" name="txtDate1" size="7" id="datepicker" maxlength="20">';}?></td>
<td><?php if(isset($_POST['submit'])) {echo $_POST['txtOR1'];}else{echo '<input type="text" name="txtOR1" size="15" maxlength="20">';}?></td>
<td><?php if(isset($_POST['submit'])) {echo $_POST['txtTin1'];}else{ echo '<input type="text" name="txtTin1" size="15" maxlength="20">';}?></td>
<td><?php if(isset($_POST['submit'])) {echo $_POST['txtPart1'];}else{ echo '<input type="text" name="txtPart1" size="50" maxlength="80">';}?></td>
<td align=right><?php if(isset($_POST['submit'])) {echo $_POST['txtAmt1'];}else{ echo '<input type="text" name="txtAmt1" size="12" maxlength="20" onChange="add_amount(this.form)">';}?></td>
</tr>
</table>
</div>
<?php
if(empty($_POST['submit'])) {
echo'
<div align=center id="progressBar" style="display:block">
<input type="submit" name="submit" />
<input type=reset>
</div>';
}
?>
</form>
</body>
I tested it, it works. Well, I removed the Javascript part, but since there wasn't anything necessary in it (you can do everything with plain PHP) I think its fine.
Please note that you can't have a onSubmit function and a action="" at the same time. As you see, I removed the onSubmit and also the action="" since its posting to the page itself. If you want to post the data to another script, simply add action="link_to_script.php" acation in the form header.
If you've still any questions or something doesn't work, feel free to ask. :)
You nearly achieved it by yourself... You have your Control-Structure, so I'm not that sure if you wrote the code by yourself since if you were able to do this till now, you should also be able to find a solution for your problem. Anyway, as mentioned, simply use an IF-Else Statement and only print the whole form if submit isn't set.
<html>
<head>
<title>Some title</title>
</head>
<body>
<?php
if(isset($_POST["submit"])) {
echo $_POST["something"];
}
else {
echo'
<form method="POST">
<input type="text" name="something">
<input type="submit" name="submit" Value="Send">
</form>';
}
?>
</body>
</html>
<script type="text/javascript">
function onSubmitButton(){
document.getElementById('submitButtonDiv').style.display = "block";
document.getElementById('progressBar').style.display = "none";
return false;
}
</script>
<body>
<form name="expense_report" method="POST" onSubmit="return onSubmitButton()" action="sample.php">
<div align=center id="submitButtonDiv" >
<table border=1>
<tr>
<td><?php if(isset($_POST['submit'])) {echo $_POST['txtDate1'];}else {echo '<input type="text" name="txtDate1" size="7" id="datepicker" maxlength="20">';}?></td>
<td><?php if(isset($_POST['submit'])) {echo $_POST['txtOR1'];}else{echo '<input type="text" name="txtOR1" size="15" maxlength="20">';}?></td>
<td><?php if(isset($_POST['submit'])) {echo $_POST['txtTin1'];}else{ echo '<input type="text" name="txtTin1" size="15" maxlength="20">';}?></td>
<td><?php if(isset($_POST['submit'])) {echo $_POST['txtPart1'];}else{ echo '<input type="text" name="txtPart1" size="50" maxlength="80">';}?></td>
<td align=right><?php if(isset($_POST['submit'])) {echo $_POST['txtAmt1'];}else{ echo '<input type="text" name="txtAmt1" size="12" maxlength="20" onChange="add_amount(this.form)">';}?></td>
</tr></table>
</div>
<div align=center id="progressBar" style="display:block">
<input type="submit" name="submit" />
<input type=reset>
</div>
</body>
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());
});
I have a situation where I want to auto submit form in cakephp ctp file. Can anyone please help me? I know there are number of same or similar question have asked before this. It tried everything, but it doesn't work. Please have a look on my code:
SCRIPT PART:
<script>
window.onload = function() {
alert("reached here");
document.frmTransaction.submit();
}
</script>
HTML PART:
<form method="post" action="https://secure.ebs.in/pg/ma/sale/pay" name="frmTransaction" id="frmTransaction" onSubmit="return validate()" onLoad="javascript:autoSubmit();">
<input name="account_id" type="hidden" value="<?echo $_POST['account_id'] ?>" />
<input name="return_url" type="hidden" size="60" value="<?echo $_POST['return_url'] ?>" />
<input name="mode" type="hidden" size="60" value="<? echo $_POST['mode']?>" />
<table style="width:50%">
<tr>
<td>Reference: </td><td><input name="reference_no" type="text" value="<? echo $_POST['data']['reference_no'] ?>" readonly/></td>
</tr>
<tr>
<td>Amount: </td><td><input name="amount" type="text" value="<? echo $_POST['data']['amount'] ?>" readonly/>Rs.</td>
</tr>
</table>
<input name="description" type="hidden" value="<? echo $_POST['description'] ?>" />
<input name="name" type="hidden" value="<? echo $_POST['name'] ?>" />
<input name="email" type="hidden" value="<? echo $_POST['email'] ?>" />
<input name="phone" type="hidden" value="<? echo $_POST['phone'] ?>" />
<input name="address" type="hidden" value="<? echo $_POST['address'] ?>" />
<input name="country" type="hidden" value="IND" />
<input name="postal_code" type="hidden" value="<? echo $_POST['postal'] ?>" />
<input name="state" type="hidden" value="<? echo $_POST['state'] ?>" />
<input name="city" type="hidden" value="<? echo $_POST['city'] ?>" />
<input name="secure_hash" type="hidden" size="60" value="<? echo $secure_hash;?>" />
<br/><br/><br/><input name="submit" value="Submit" type="submit" id="submit" style="background:#ff6600;color:#fff;height:40px;width:150px;font-family:Calibri;font-size: 22px;"/>
</form>
You have to check form definition again.
Remove onload event statement.
<form method="post" action="https://secure.ebs.in/pg/ma/sale/pay" name="frmTransaction" id="frmTransaction" onSubmit="return validate()">
I got a page that contain X forms, in each form there is a number of checkboxes.
How do I make it so when I click on a checkbox (as displayed below), then all checkboxes in that specific form will be selected? (and un-selected if ... un-checked):
I tried the following, but it does not work (name="selectfile[]" must not be changed):
I'm not a JS king :(
function selectAll(){
t=document.forms[0].length;
for(i=1; i<t-1; i++) document.forms[0][i].checked=document.forms[0][0].checked;
}
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<input type='checkbox' name='checkall' style="margin-right: 15px;" onclick='selectAll(this.form.selectfile[]);'>
<input type="checkbox" name="selectfile[]" value="<? echo $file_fetch['id']; ?>" style="margin-right: 15px;" />
<input type="checkbox" name="selectfile[]" value="<? echo $file_fetch['id']; ?>" style="margin-right: 15px;" />
<input type="checkbox" name="selectfile[]" value="<? echo $file_fetch['id']; ?>" style="margin-right: 15px;" />
<input type="checkbox" name="selectfile[]" value="<? echo $file_fetch['id']; ?>" style="margin-right: 15px;" />
</form>
<script type="text/javascript">
function selectAll(val) {
var checks = document.getElementsByName("selectfile[]");
for (var i = 0; i < checks.length; i++) {
checks[i].checked = val;
}
}
</script>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<input type='checkbox' name='checkall' style="margin-right: 15px;" onChange="selectAll(this.checked)">
<input type="checkbox" name="selectfile[]" value="<? echo $file_fetch['id']; ?>" style="margin-right: 15px;" />
<input type="checkbox" name="selectfile[]" value="<? echo $file_fetch['id']; ?>" style="margin-right: 15px;" />
<input type="checkbox" name="selectfile[]" value="<? echo $file_fetch['id']; ?>" style="margin-right: 15px;" />
<input type="checkbox" name="selectfile[]" value="<? echo $file_fetch['id']; ?>" style="margin-right: 15px;" />
</form>
You can test the javascript part here: http://jsfiddle.net/protron/2t987/
Edit: Based on your comments about having multiple forms and all the checkboxes with the same name, I updated the code and added an extra parameter to the function indicating the form index, and then used document.forms[formIndex] to get the checks. This seems to be the only easy way for this requirement without using jQuery, although IMHO it's more error-prone this way.
Code here: http://jsfiddle.net/protron/2t987/1/