I'am trying to pass the value of the textbox (id = msg) to js but the output is always the first textbox value on the foreach loop. Please Help me. Here is the code.
JS:
function sub() {
var name = document.getElementById('msg').value;
alert(name);
}
HTML:
<?php
foreach($messages->result() as $msg):
foreach($agentname->result() as $agnt):
if($msg->message_status == 1):
$message_status = "<font class='icon-exclamation-sign'></font> <font class='purple'>New message!</font>";
else:
$message_status = "";
endif;
?>
<div class="accordion-wrapper" style="margin-top:0">
<a id="message" onclick="return sub();" rel="msg<?php echo $msg->message_id;?>" id = "button_id" style="background-color:#C2E4CD" href="javascript:void(0)" class="accordion-title blue"><span><?php echo $message_status; ?> <font class="icon-comment"></font> <font class="orange" >From:</font> <?php echo $agnt->agent_shortname;?> | <font class="icon-envelope-alt"></font> <font class="orange">Subject:</font> <?php echo $msg->message_title;?></span></a>
<div class="accordion-content">
<input type="text" id="msg" value="<?php echo $msg->message_id;?>" />
<p><?php echo $msg->message;?></p>
</div>
</div>
<?php endforeach; ?>
<?php endforeach; ?>
You are putting value of outer loop in the textbox.
As per my knowledge, you should put inner loop's value in the textbox.
<input type="text" id="msg" value="<?php echo $msg->message_id;?>" />
Did you mean $agnt instead of $msg?
I have added name attribute to your input and a button clicking on which it will display the values of the inputs one by one, so now you can try this code
JS:
function check() {
var inputs = document.getElementsByName('messages[]');
alert(inputs.length);
for (var x = 0; x < inputs.length; x++) {
inp_val = inputs[x].value;
alert(inp_val);
}
}
HTML :
<?php
foreach($messages->result() as $msg):
foreach($agentname->result() as $agnt):
if($msg->message_status == 1):
$message_status = "<font class='icon-exclamation-sign'></font> <font class='purple'>New message!</font>";
else:
$message_status = "";
endif;
?>
<div class="accordion-wrapper" style="margin-top:0">
<a id="message" onclick="return sub();" rel="msg<?php echo $msg->message_id;?>" id = "button_id" style="background-color:#C2E4CD" href="javascript:void(0)" class="accordion-title blue"><span><?php echo $message_status; ?> <font class="icon-comment"></font> <font class="orange" >From:</font> <?php echo $agnt->agent_shortname;?> | <font class="icon-envelope-alt"></font> <font class="orange">Subject:</font> <?php echo $msg->message_title;?></span></a>
<div class="accordion-content">
<input type="text" id="msg" name="messages[]" value="<?php echo $msg->message_id;?>" />
<p><?php echo $msg->message;?></p>
</div>
</div>
<?php endforeach; ?>
<?php endforeach; ?>
<input type="button" value="check" onclick="check()">
Related
This form contains a dropdown list that has multiple options with checkboxes, now when a user selects 1 or more checkboxes and presses submit, the values should be processed with the matching search results. Previously, I had a select tag with an option tag that was used to get the results. Now, since I added the functionality of searching for more than one option, I added checkboxes, but now I am not sure how to get the results.
Html and Php Code
<form action="<?php the_permalink() ?>" class="ajax-search-form leaders-header" id="searchform" method="post" role="search">
<?php get_template_part( 'blocks/leaderboard/search-form' ) ?>
<div class="sort">
<body>
<?php if ($departments = get_field_object('field_5da06da87ae0f')) : ?>
<div class="sort-item">
<div id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor" style="font-size: small">All Departments</span>
<ul id="items" class="items" name="department" >
<label for="test">
<?php foreach ($departments['choices'] as $key => $department) : ?>
<input type="checkbox" name="check" id="test" value="unchecked" /> <option style="font-size: small" <?php if ( isset($_REQUEST['role']) and $_REQUEST['role'] == $key) echo 'selected' ?> value="<?php echo $key; ?>">
<?php echo $department; ?></option></label></br>
<?php endforeach; ?>
<input style="font-size: small" type="submit" value="Submit" "/>
</ul>
</div>
</div>
<?php endif ?>
</body>
JavaScript:
<script type="text/javascript">
var checkList = document.getElementById('list1');
var items = document.getElementById('items');
var isChecked = document.getElementById('items').checked;
checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
if (items.classList.contains('visible')){
items.classList.remove('visible');
items.style.display = "none";
}
else{
items.classList.add('visible');
items.style.display = "block";
}
}
items.onblur = function(evt) {
items.classList.remove('visible');
}
</script>
Problem is that every checkbox will have the same name and id so you will be not able to recognize which option belongs to which checkbox but you can try something like this
<?php foreach ($departments['choices'] as $key => $department) : ?>
<input type="checkbox" name="<?= $department ?>" id="<?= $department ?>" value="unchecked" />
Objective Inserting name(input-text) and info(textarea-contains multiple lines) into the database, and after submission of the form, at the same page, 2 columns are for displaying the same data in columns, name & info, but under info column. I have made buttons for each row in front of the names, which is used as slideToggle for showing/hiding which contains the data retrieved from the 'info' column
Problem - when I am clicking the button of 1st row, instead of displaying the info related to 1st entry only, it is sliding and showing all info(s) related to all entries at only click.
*others - one more input has been added to the form but as hidden used for id(auto increment)
----index.php-----
<?php include('php_code.php'); ?>
<?php
if (isset($_GET['edit'])) {
$id = $_GET['edit'];
$update = true;
$record = mysqli_query($db, "SELECT * FROM records WHERE id=$id");
if (count($record) == 1 ) {
$n = mysqli_fetch_array($record);
$name = $n['name'];
$acc = $n['acc_no'];
$info = $n['info'];
}
}
?>
<html>
<head>
<title>JSK</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('form').hide();
$('p').hide();
$('#sp').hide();
$("#inf").click(function(){
$("p").slideToggle();
$('#sp').slideToggle();
});
$("#fo").click(function(){
$("form").slideToggle();
});
});
</script>
</head>
<body>
<div class="container">
<div class="left">
<?php if (isset($_SESSION['message'])): ?>
<div class="msg">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</div>
<?php endif ?>
<?php $results = mysqli_query($db, "SELECT * FROM records"); ?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Account No</th>
<th>Info</th>
<th colspan="2">Action</th>
</tr>
</thead>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['acc_no']; ?></td>
<td><button id="inf" onclick="myFunction()">show</button></td>
<td>
<a href="index.php?edit=<?php echo $row['id']; ?>" class="edit_btn" >Edit</a>
</td>
<td>
Delete
</td>
</tr>
<tr id="sp"> <td colspan="4"><p> <?php echo $row['info']; ?> </p></td>
</tr>
<?php } ?>
</table>
<div id="fotable" align="center">
<button id="fo">Add New/Edit</button>
</div>
<form method="post" action="php_code.php" >
<input type="hidden" name="id" value="<?php echo $id; ?>">
<div class="input-group">
<label>Name</label>
<input type="text" autocomplete="off" name="name" value="<?php echo $name; ?>">
</div>
<div class="input-group">
<label>Account No</label>
<input type="text" name="acc" value="<?php echo $acc; ?>">
</div>
<div class="input-group">
<label for="info">Info</label>
<textarea class="form-control" rows="8" name="info" id="info"><?php echo $row['info']; ?></textarea>
</div>
<div class="input-group">
<?php if ($update == true): ?>
<button class="btn" type="submit" name="update" style="background: #556B2F;" >update</button>
<?php else: ?>
<button class="btn" type="submit" name="save" >Add Account</button>
<?php endif ?>
</div>
</form>
</div><!-- left closed -->
<div class="right">
hello
</div> <!-- right closed -->
</div> <!-- container closed -->
</body>
</html>
---php_code.php-----
<?php
session_start();
$db = mysqli_connect('localhost', 'root', '', 'jskrecords');
// initialize variables
$name = "";
$acc = "";
$info = "";
$id = 0;
$update = false;
if (isset($_POST['save'])) {
$name = $_POST['name'];
$acc = $_POST['acc'];
$info = $_POST['info'];
mysqli_query($db, "INSERT INTO records (name, acc_no, info) VALUES ('$name', '$acc', '$info')");
$_SESSION['message'] = "Account saved";
header('location: index.php');
}
if (isset($_POST['update'])) {
$id = $_POST['id'];
$name = $_POST['name'];
$acc = $_POST['acc'];
$info = $_POST['info'];
mysqli_query($db, "UPDATE records SET name='$name',acc_no='$acc',info='$info' WHERE id=$id");
$_SESSION['message'] = "Account updated!";
header('location: index.php');
}
if (isset($_GET['del'])) {
$id = $_GET['del'];
mysqli_query($db, "DELETE FROM records WHERE id=$id");
$_SESSION['message'] = "ACC deleted!";
header('location: index.php');
}
?>
Concept:
If you are creating multiple form from same mysql table using php script, You need to give each form a unique id.
e.g.
<form method="post" action="php_code.php" id="form<?= $id ?>">
Then add data-target="#form" to button with class 'inf'. It will store id of form.
<button class="inf" data-target="#form<?= $id ?>">show</button>
When button is clicked we know which form to open from data-target.
<script>
$('.container').on('click','button.inf',function(e){
e.preventDefault();
var formid=$(this).attr('data-target'); //get value of data-target attribute
//...proceed to play toggle with this form 'formid'
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("...", "...");
In the following code, I've generated a php form that takes in values from a user for an arp network attack I'm working on. However, I'm trying to display the number of packets sent "$loops" in the javascript alert, when I run the code the number of packets is not displayed in the alert, and I don't know what went wrong so if someone could go through and flow of my code I'd appreciate it very much.
<form method ='post' action ="<?php echo $_SERVER['PHP_SELF'];?>">
<?php $loops = "";?>
<b> <p>Number of packets to be sent:</p>
<input type="text" name="loops" value="<?php echo $loops;?>">
<br><br></b>
<?php
$php_var = $loops;?>
<p style="text-align: center;">
<button onclick="myFunction()">Submit</button></p><br>
<script>
function myFunction() {
var js_var = "The number of packets sent is: <?php echo $php_var; ?>";
alert(js_var);
}
</script>
</font>
</form>
<?php
if($_SERVER["REQUEST_METHOD"]== "POST"){
if(isset($_POST["loops"])){
$loops=$_REQUEST['loops'];
}
?>
You are assigning $php_var to blank here.
<?php $loops = "";?>
<?php $php_var = $loops;?>
So, its displaying no value.
I think you need to take value input by user in textbox.
<input type="text" name="loops" value="<?php echo $loops;?>" id="loops"> // Observe the added `id` attribute.
You can do it like:
<script>
function myFunction() {
//var js_var = "The number of packets sent is: <?php echo $php_var; ?>";
var val = document.getElementById('loops').value;
var js_var = "The number of packets sent is: " + val;
alert(js_var);
}
</script>
try this code
<form method ='post' action ="<?php echo $_SERVER['PHP_SELF'];?>">
$loops = isset($_POST["loops"])?$_POST["loops"]:"";
<b> <p>Number of packets to be sent:</p>
<input type="text" name="loops" value="<?php echo $loops;?>">
<br><br></b>
<?php
$php_var = $loops;?>
<p style="text-align: center;">
<button onclick="myFunction()">Submit</button></p><br>
<script>
function myFunction() {
var js_var = "The number of packets sent is: <?php echo $php_var; ?>";
alert(js_var);
}
</script>
</font>
</form>
<?php
if($_SERVER["REQUEST_METHOD"]== "POST"){
if(isset($_POST["loops"])){
$loops=$_REQUEST['loops'];
}
?>
You should use PHP at the starting of the page always. Its required so that you can get the variables available in HTML.
<form method ='post' action ="<?php echo $_SERVER['PHP_SELF']; ?>">
<?php $loops = ''; ?>
<?php if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (isset($_POST["loops"])) {
$loops = $_REQUEST['loops'];
}
}
?>
<b>
<p>Number of packets to be sent:</p>
<input type="text" name="loops" value="<?php echo $loops; ?>">
<br><br>
</b>
<?php $php_var = $loops; ?>
<p style="text-align: center;">
<button onclick="myFunction()">Submit</button>
</p>
<br>
<script>
function myFunction() {
var js_var = "The number of packets sent is: <?php echo $php_var; ?>";
alert(js_var);
}
</script>
</form>
you should check if there is any $_REQUEST['loops'] after $loop variable initialization.
so the code should be
<?php
$loops = "";
if($_SERVER["REQUEST_METHOD"]== "POST"){
if(isset($_POST["loops"])){
$loops=$_REQUEST['loops'];
}
}
?>
<form method ='post' action ="<?php echo $_SERVER['PHP_SELF'];?>">
<b> <p>Number of packets to be sent:</p>
<input type="text" name="loops" value="<?php echo $loops;?>">
<br><br></b>
<?php
$php_var = $loops;?>
<p style="text-align: center;">
<button onclick="myFunction()">Submit</button></p><br>
<script>
function myFunction() {
var js_var = "The number of packets sent is: <?php echo $php_var; ?>";
alert(js_var);
}
</script>
</font>
</form>
try like
<?php $loops = "123";?>
function myFunction() {
var js_var = "The number of packets sent is: <?php echo $php_var; ?> ";
alert(js_var);
}
I have a form which has some text fields. Text fields may increase or decrease according to database table. If there are 3 warehouses in database it will show 3 text boxes with available quantity as place holder. Now user have to enter quantity no more than given in placeholder in each box. How can I do validation if user enter a value more than available (which will be shown as place holder) ?. Problem is validation should be according to foreach loop. My code is below,
<?php
if (!empty($ware_details)) {
foreach ($ware_details as $data) {
?>
<div class="form-group">
<label for="exampleInputEmail1"><?php echo $data->warehouse_name; ?></label>
<input type="number" id="return_pro" class="form-control" base_url="<?php echo site_url(); ?>" name="<?php echo $data->wh_warehouse_id;?>" placeholder="<?php echo $data->wh_product_qty; ?> Available">
<div class="dataDrop"></div>
<input type="hidden" id="quantity" value="<?php echo $data->wh_product_qty; ?>"/>
</div>
<?php } }?>
Here as you see text boxes number is depending upon foreach loop. So how can I validate? Javascript or Ajax is ok.
I tried something like this,
<?php foreach ($ware_details as $data) {?>
<script>
function check()
{
var stock = document.getElementById('quantity').value;
var return_stock = document.getElementById('return_pro').value;
if (parseFloat(stock) < parseFloat(return_stock))
{
alert("Return product can't be more than total stock");
document.getElementById('return_pro').focus();
return false;
}
//alert(return_stock);
return false;
}
But I know it is fully wrong. Any idea?
Try to use html5 required attribute. This set of code may help you.
<input type="number"
min="1"
max="<?php echo $data->wh_product_qty; ?>"
name="<?php echo $data->wh_warehouse_id;?>"
required="required"
placeholder="<?php echo $data->wh_product_qty; ?> Available" />
You cannot use an id multiple times in the document, it needs to be unique. Either use classes to identify/group elements, or enumerate the ids:
<?php
$i = 0;
if (!empty($ware_details)) {
foreach ($ware_details as $data) {
?>
<div class="form-group">
<label for="exampleInputEmail1"><?php echo $data->warehouse_name; ?></label>
<input type="number" id="return_pro<?php echo $i; ?>" class="form-control" base_url="<?php echo site_url(); ?>" name="<?php echo $data->wh_warehouse_id;?>" placeholder="<?php echo $data->wh_product_qty; ?> Available">
<div class="dataDrop"></div>
<input type="hidden" id="quantity<?php echo $i; ?>" value="<?php echo $data->wh_product_qty; ?>"/>
</div>
<?php
$i++;
} }?>
<script>
function check(i) {
var stock = document.getElementById('quantity'+i).value;
var return_stock = document.getElementById('return_pro'+i).value;
if (parseFloat(stock) < parseFloat(return_stock))
{
alert("Return product can't be more than total stock");
document.getElementById('return_pro'+i).focus();
return false;
}
//alert(return_stock);
return false;
}
// then in the validation trigger:
for (var i=0; i< <?php echo $i; ?>; i++)
check(i);