Using a name selector instead of an id - javascript

How can I change the following code to work off of a name selector instead of the id?
<div id="light" class="change_group_popup">
<a class="close" href="javascript:void(0)">Close</a>
JavaScript
$('.change_group').on('click',function(){
$("#light,.white_overlay").fadeIn("slow");
});
$('.close').on('click',function(){
$("#light,.white_overlay").fadeOut("slow");
});
UPDATE:
I added more of my code to show the loop to help explain what I am doing in more detail.
$runUsers2 = mysqli_query($con,"SELECT * FROM users ORDER BY id DESC");
$numrows2 = mysqli_num_rows($run2);
if( $numrows2 ) {
while($row2 = mysqli_fetch_assoc($run2)){
if($row2['status'] == "Approved"){
//var_dump ($row2);
$approved_id = $row2['user_id'];
$approved_firstname = $row2['firstname'];
$approved_lastname = $row2['lastname'];
$approved_username = $row2['username'];
$approved_email = $row2['email'];
if ($approved_firstname == true) {
echo "Name - ". $approved_firstname . " " . $approved_lastname . "</br>" .
"Username - ". $approved_username . "</br></br>"
?>
<div class="change_group_button">
<a class="change_group" href="javascript:void(0)">Change User Permission</a>
</div><br>
<div class="change_group_popup light">
<a class="close" href="javascript:void(0)">Close</a>
<div class="group_success" style="color: red;"></div><br>
<form class="update_group" action="" method="POST">
<div class="field">
<label for="group">Group</label>
<input type="hidden" value="<?php echo $approved_id; ?>" name="approved_id" />
<input type="hidden" value="<?php echo $approved_firstname; ?>" name="approved_firstname" />
<input type="hidden" value="<?php echo $approved_lastname; ?>" name="approved_lastname" />
<input type="hidden" value="<?php echo $approved_username; ?>" name="approved_username" />
<input type="hidden" value="<?php echo $approved_email; ?>" name="approved_email" />
<select name='group_id' required>

You can get any element by name attribute by:
$('[name="someName"]')

Use DOM traversal functions to find the related element.
$(".change_group").click(function() {
var light = $(this).closest(".change_group_button").nextAll(".light").first(); // Find the next .light DIV after the button
light.add($(".white_overlay")).fadeIn("slow");
}):

Related

Why I need to use history.back(); twice for cancel button

I created a cancel button using the method explained by macino in this thread
cancel button using php
But I have to use history.back(); twice to cancel the form. What is the reason for that? Thanks.
$post_counter=1;
foreach ($comment as $c) {
echo $c['comment'] . "<br>";
echo "By " . $c['first_name'] . "<br>";
if($c['uid'] == $current_user) { ?>
Edit<br>
<div id="<?php echo "post_edit_box" . $post_counter; ?>" style="display:none">
<form id="<?php echo "reply_form" . $post_counter; ?>" method="post" action="<?php echo site_url('Forum/update_comment'); ?>">
<input type="text" name="edit_comment" value="<?php echo $c['comment'];?>" class="form-control">
<input type='hidden' name='edit_cid' value='<?php echo $c['id']; ?>'/>
<button type="submit">Save Changes</button>
<input type="button" value="Cancel" onclick="history.back();history.back();" />
</form>
</div>
<script>
function show_postedit_box(clicked_edit_id){
let str_edit = clicked_edit_id;
str_edit.replace("post_edit_link", "");
//console.log('mylink' + str.replace("mylink", ""));
document.getElementById('post_edit_box' + str_edit.replace("post_edit_link", "")).style.display = "block";
document.getElementById('post_edit_link' + str_edit.replace("post_edit_link", "")).style.display = "none";
}
</script>
<?php
$post_counter++;
}

JSon array increment my id value from $_POST['id']

In my php script, I have managed to get all the data from a form into a json database, however everytime I submit my form, the id value is always == 1. How would I be able to change this, and add more values to my id value, like value++? How would I be able to do that?
<?php
$message = '';
$error = '';
if(isset($_POST["submit"]))
{
if(empty($_POST["title"]))
{
$error = "<label class='text-danger'>Enter title</label>";
echo $error;
}
else if(empty($_POST["decs"]))
{
$error = "<label class='text-danger'>Enter Gender</label>";
echo $error;
}
else if(empty($_POST["cont"]))
{
$error = "<label class='text-danger'>Enter Designation</label>";
echo $error;
}
else
{
if(file_exists('postbl.json'))
{
$current_data = file_get_contents('postbl.json');
$array_data = json_decode($current_data, true);
$extra = array(
'id' => $_POST['id'],
'title' => $_POST['title'],
'decs' => $_POST["decs"],
'cont' => $_POST["cont"]
);
$array_data[] = $extra;
$final_data = json_encode($array_data);
if(file_put_contents('postbl.json', $final_data))
{
$message = "<label class='text-success'>File Appended Success fully</p>";
echo $message;
}
}
else
{
$error = 'JSON File not exits';
}
}
}
?>
my form is like this
<?php session_start();
if(!isset($_SESSION['loggedin'])) header("Location: session.php");
if($_SESSION['loggedin']===FALSE) header("Location: session.php");
?>
<!DOCTYPE html>
<html><head><title>Secret Area</title></head>
<body>
<form action="/admin/form_process.php" method="POST">
<br />
<input type="hidden" name="id" value="1" />
<label>Title</label>
<input type="text" name="title" class="form-control" /><br />
<label>Description</label>
<input type="text" name="decs" class="form-control" /><br />
<label>Content</label>
<input type="text" name="cont" class="form-control" /><br />
<input type="submit" name="submit" value="Append" class="btn btn-info" /><br />
<?php
if(isset($message))
{
echo $message;
}
?>
</form>
<form action="logout.php" method="POST">
<input type="submit" name="logout" value="Log out">
</form>
<p>© 2017 Blog Message</p>
</body>
</html>
Your problem is here
<input type="hidden" name="id" value="1" />
Notice how the 1 is set as value.
Change the 1 with a variable. Something like
<input type="hidden" name="id" value="<?= $id ?>" />

Hide/Show toggle echo results in php

I am trying to toggle results i have echo'd out of table but i am having no luck.
I have tried the same code in HTML and it works perfectly.
Ive been working on this for a while now, and was wondering if someone could point me in the right direction.
What I've tired
Adding the javascript inside the php echo.
Adding a counter to the id, to make it unique on loop
Placing each line of the echo results in echo(""); tags.
adding a counter, to make the id unique on loop.
PHP
$i = 1;
while ($output = $fc_sel->fetch_assoc()) {
$fc_run .= $output['Food_Cat_name'] . $output['Food_Cat_Desc'] . '<br>';
$_SESSION['Food_Cat_name'] = $output['Food_Cat_name']; //echo out product name
$_SESSION['Food_Cat_Desc'] = $output['Food_Cat_Desc']; //echo out product desc
echo"
<div id='first_product'>
<button onclick='toggle_visibility('tog')'>Toggle</button>
<div id='tog'>
<div id='red_head'>
<p id='menu_title' class ='hidden' onclick='toggle_visibility('tog')'> Add your first menu item</p>
</div>
<h3 id='menu'>Menu Section</h3>
<form name='first_prod' id='first_prod' enctype='multipart/form-data' action='testing.php' method='POST' accept-charset='utf-8' >
<label id='cat_label' name='cat_label'>Name</label>
<input type='text' id='cat_name' name='cat_name' value=''>
<label id='desc_label' name='desc_label'>Description</label>
<input type='text' id='cat_desc' name='cat_desc' value=''>
</form>
</div>
</div>
";
}
}
JAVASCRIPT
<script>
//turn entire div into toggle
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block' || e.style.display == '')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
The single quotes in onclick='toggle_visibility('tog')' are conflicting with the outer single quotes. So either escape them or use double quotes in either the outer pair or the inner pair.
Then in PHP, remove the <?php echo. Just put the HTML in PHP. The echo only complicates things. If you need dynamic data in your HTML, just inject it at that place with <?php ... ?>. But so far I haven't seen any of that in your HTML: it is static.
Here is a working snippet, after having made that change in two places:
//turn entire div into toggle
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block' || e.style.display == '')
e.style.display = 'none';
else
e.style.display = 'block';
}
<div id='first_product'>
<button onclick="toggle_visibility('tog')">Toggle</button>
<div id='tog'>
<div id='red_head'>
<p id='menu_title' class ='hidden' onclick="toggle_visibility('tog')"> Add your first menu item</p>
</div>
<h3 id='menu'>Menu Section</h3>
<form name='first_prod' id='first_prod' enctype='multipart/form-data' action='testing.php' method='POST' accept-charset='utf-8' >
<label id='cat_label' name='cat_label'>Name</label>
<input type='text' id='cat_name' name='cat_name' value=''>
<label id='desc_label' name='desc_label'>Description</label>
<input type='text' id='cat_desc' name='cat_desc' value=''>
</form>
</div>
</div>
Edit after modification of the question
The code in the question was extended so the HTML is produced in a loop now.
You should now take care to produce unique id values only. So you'll probably want to add <?=$i?> at several places, like this:
<?php
session_start();
// ....
$i = 1;
while ($output = $fc_sel->fetch_assoc()) {
$fc_run .= $output['Food_Cat_name'] . $output['Food_Cat_Desc'] . '<br>';
$_SESSION['Food_Cat_name'] = $output['Food_Cat_name'];
$_SESSION['Food_Cat_Desc'] = $output['Food_Cat_Desc'];
?>
<div id='first_product<?=$i>'>
<button onclick="toggle_visibility('tog<?=$i>')">Toggle</button>
<div id='tog<?=$i>'>
<div id='red_head<?=$i>'>
...etc. Note that the PHP was closed before the HTML output started. Do this, instead of a large echo. Then at the end of it, open PHP tag again to end the loop:
<?php
}
?>
please modify your code
echo "
<div id='first_product'>
<button onclick='toggle_visibility(\"tog\")'>Toggle</button>
<div id='tog'>
<div id='red_head'>
<p id='menu_title' class ='hidden' onclick='toggle_visibility(\"tog\")'> Add your first menu item</p>
</div>
<h3 id='menu'>Menu Section</h3>
<form name='first_prod' id='first_prod' enctype='multipart/form-data' action='testing.php' method='POST' accept-charset='utf-8' >
<label id='cat_label' name='cat_label'>Name</label>
<input type='text' id='cat_name' name='cat_name' value=''>
<label id='desc_label' name='desc_label'>Description</label>
<input type='text' id='cat_desc' name='cat_desc' value=''>
</form>
</div>
</div>
"
<button value='tog' onclick='toggle_visibility(this)'>Toggle</button>
Just use "this" and assign value to button its working
Try this ;)
<?php
$i = 1;
while($output = $fc_sel->fetch_assoc()){
$fc_run .= $output['Food_Cat_name'] . $output['Food_Cat_Desc'] . '<br>';
$_SESSION['Food_Cat_name'] = $output['Food_Cat_name']; //echo out product name
$_SESSION['Food_Cat_Desc'] = $output['Food_Cat_Desc']; //echo out product desc
?>
<div id="first_product<?php echo $i; ?>">
<button onclick="javascript:toggle_visibility('tog<?php echo $i; ?>')">Toggle</button>
<div id="tog<?php echo $i; ?>">
<div id="red_head<?php echo $i; ?>">
<p id="menu_title<?php echo $i; ?>" class ="hidden" onclick="toggle_visibility('tog<?php echo $i; ?>')"> Add your first menu item</p>
</div>
<h3 id="menu<?php echo $i; ?>">Menu Section</h3>
<form name="first_prod" id="first_prod<?php echo $i; ?>" enctype="multipart/form-data" action="testing.php" method="POST" accept-charset="utf-8">
<label id="cat_label<?php echo $i; ?>" name="cat_label">Name</label>
<input type="text" id="cat_name<?php echo $i; ?>" name="cat_name" value="">
<label id="desc_label<?php echo $i; ?>" name="desc_label">Description</label>
<input type="text" id="cat_desc<?php echo $i; ?>" name="cat_desc" value="">
</form>
</div>
</div>
<?php
$i++;
}
?>

Javascript - change input value on click not working

Here's a div which represents cart item qty field:
<div class="cart_quantity_div">
<form action="cart.php" method="post">
<button class="cart_qty_controls" onclick="minusOne(qty_field_<?php echo $item_id; ?>)">-</button>
<input type="text" name="cart_item_qty" value="<?php echo $each_item['quantity']; ?>" size="1" maxlength="3" id="qty_field_<?php echo $item_id; ?>"/>
<input type="submit" name="qty_adjust_cart<?php echo $item_id; ?>" value="change" class="cart_qty_adjust_btn"/>
<input type="hidden" name="cart_item_to_adjust_qty" value="<?php echo $item_id; ?>"/>
</form>
</div>
It is a draft version so don't pay attention to submit and hidden inputs
And JS code:
function minusOne (input_id){
var subtracted_qty = document.getElementById(qty_field_id).value = document.getElementById(qty_field_id).value - 1;
document.getElementById(qty_field_id).value = subtracted_qty;
}
I want to change value of input text field by clicking minus button by -1. But for some reason it's not working.
Can you, please, review my code and find whats wrong with it. Or maybe there is some better ways to do such qty change..
Your code does not set the variable qty_field_id, nor does it use the variable input_id. If input_id is referring to the same value as PHP’s $item_id, then try adding the following line to the top of the JavaScript function:
var qty_field_id = "qty_field_" + input_id;
You shouldn't use inline javascript and you aren't referencing the correct element. Try this instead:
HTML:
<div class="cart_quantity_div">
<form action="cart.php" method="post">
<button class="cart_qty_controls" data-productId="<?php echo $item_id; ?>">-</button>
<input type="text" name="cart_item_qty" value="<?php echo $each_item['quantity']; ?>" size="1" maxlength="3" id="qty_field_<?php echo $item_id; ?>"/>
<input type="submit" name="qty_adjust_cart<?php echo $item_id; ?>" value="change" class="cart_qty_adjust_btn"/>
<input type="hidden" name="cart_item_to_adjust_qty" value="<?php echo $item_id; ?>"/>
</form>
</div>
JS:
[].slice.call(document.getElementsByClassName('cart_qty_controls')).forEach(function(el){
el.addEventListener('click', function(e) {
var id = e.target.getAttribute('data-productId');
document.getElementById('qty_field_' + id).value -= 1;
})
})

SESSION variable slow to update textfield in php

I have a form, contained 3 fields, which when the submit button in submitted,
it will changes the session variable values according to the fields, in this case there are 3 variables. then i echo back the variable onto the fields.
For the first time submit, it stores the value beautifully and display in the fields correctly, the problem is that, when i submit the second time, the values are still the same. after i refresh the page, then the values in the fields are changed.
this is partially the codes i'm using now.
<?php
session_start();?>
?>
<form name="form1" id="form1" action="">
<input type="text" name="acc1" value="<?php echo $_SESSION['acc_main']" />
<input type="text" name="acc2" value="<?php echo $_SESSION['acc_id']" />
<input type="text" name="acc3" value="<?php echo $_SESSION['acc_cat']" />
<input type="submit" name="submit">
</form>
<?php
if(isset($_POST['submit']) != '')
{
$_SESSION['acc_main'] = $_POST['acc1'];
$_SESSION['acc_id'] = $_POST['acc2'];
$_SESSION['acc_cat'] = $_POST['acc3'];
}
?>
After i refresh(F5), then the value changed. i want it to be, when i clicked the submit button, it will change to the new value.
PHP Code:
<?php
if(isset($_POST['submit']) != '')
{
$_SESSION['acc_main'] = $_POST['acc1'];
$_SESSION['acc_id'] = $_POST['acc2'];
$_SESSION['acc_cat'] = $_POST['acc3'];
echo '<script type="text/javascript">'
, 'jsfunctionToPrintUpdatedValues();'
, '</script>'
;
}
?>
Javascript Sample Code
function jsfunctionToPrintUpdatedValues()
{
/* retrieve the updated session variables in javascript variables */
var acc_main_js = <?php echo $_SESSION['acc_main']?>
var acc_id_js = <?php echo $_SESSION['acc_id']?>
var acc_cat_js = <?php echo $_SESSION['acc_cat']?>
document.getElementById("main").value=acc_main_js;
document.getElementById("id").value=acc_main_js;
document.getElementById("cat").value=acc_main_js;
}
in the input fields you have to write like this
`
Below
`
<input type="text" name="acc1" value="<?php if(isset($_SESSION['acc_main'])) echo $_SESSION['acc_main']" />
Use if(isset($_POST['submit']) != '') before the form. Change your code to this:
<?php
session_start();
if(isset($_POST['submit']) != '')
{
$_SESSION['acc_main'] = $_POST['acc1'];
$_SESSION['acc_id'] = $_POST['acc2'];
$_SESSION['acc_cat'] = $_POST['acc3'];
?>
<form name="form1" id="form1" action="">
<input type="text" name="acc1" value="<?php echo $_SESSION['acc_main']" />
<input type="text" name="acc2" value="<?php echo $_SESSION['acc_id']" />
<input type="text" name="acc3" value="<?php echo $_SESSION['acc_cat']" />
<input type="submit" name="submit">
</form>
<?php
}else{
?>
<form name="form1" id="form1" action="">
<input type="text" name="acc1" value="<?php echo $_SESSION['acc_main']" />
<input type="text" name="acc2" value="<?php echo $_SESSION['acc_id']" />
<input type="text" name="acc3" value="<?php echo $_SESSION['acc_cat']" />
<input type="submit" name="submit">
<?php } ?>

Categories

Resources