Change image according to id in mysql - javascript

Good Day, I am working on a simple project so that I could get used to php,mysql,
Here is my code
PHP
if(isset($_POST["edit"]))
{
$update_data = array(
'crit_1' => mysqli_real_escape_string($data->con, $_POST['crit_1']),
'crit_2' => mysqli_real_escape_string($data->con, $_POST['crit_2']),
'crit_3' => mysqli_real_escape_string($data->con, $_POST['crit_3']) ,
);
$where_condition = array(
'id' => $_POST["id"]
);
if($data->update("tbl_tabulation", $update_data, $where_condition))
{
header("location:index.php?updated=1");
}
}
if(isset($_GET["updated"]))
{
$success_message = 'Post Updated';
}
?>
And my HTML:
<div id="pagewrap">
<section id="content">
<script type = "text/javascript">
function pic1()
{
document.getElementById("img").src = "img/new.jpg";
}
function pic2()
{
document.getElementById("img").src ="img/new2.gif";
} </script>
<div class="table-responsive">
<div class="list-group">
cand1
cand2s
</table>
</div>
</section>
<section id="middle">
<img src="" id="img">
<img src="" id="img">
</section>
<aside id="sidebar">
<form method="post">
<?php
if(isset($_GET["edit"]))
{
if(isset($_GET["id"]))
{
$where = array(
'id' => $_GET["id"]
);
$single_data = $data->select_where("tbl_tabulation", $where);
foreach($single_data as $post)
{
?>
<label width="20%"><?php echo $post["cand_name"]; ?></label>
<br />
<!--CRITERIA -->
<label>Poise & Bearing</label>
<input type="text" name="crit_1" value="<?php echo $post["crit_1"]; ?>" class="form-control" width="20%" />
<br />
<label>Modeling</label>
<input type="text" name="crit_2" value="<?php echo $post["crit_2"]; ?>" class="form-control" width="20%"/>
<br />
<label>Overall Impact</label>
<input type="text" name="crit_3" value="<?php echo $post["crit_3"]; ?>" class="form-control" width="20%"/>
<br />
<input type="hidden" name="id" value="<?php echo $post["id"]; ?>" />
<input type="submit" name="edit" class="btn btn-info" value="Edit" />
<?php
}
}
}
else
{
}
?>
<span class="text-success">
<?php
if(isset($success_message))
{
echo $success_message;
}
?>
</span>
</form>
</aside>
<footer>
<h4>Footer</h4>
<p>Footer text</p>
</footer>
</div>
Problem is When I click cand1 or cand2the image will show only for a second. And the middle will be empty again as soon as the URL changes.
Is there any work around for this? any help would be appreciated.

Change this:-
<script type = "text/javascript">
function pic1()
{
document.getElementById("img").src = "img/new.jpg";
}
function pic2()
{
document.getElementById("img1").src ="img/new2.gif";
} </script>
<section id="middle">
<img src="" id="img">
<img src="" id="img1">
</section>
The id shouldn't be the same, id should be unique

Because you are using below code for immediate update and redirect page to updated=1 if you don't want to redirect then use ajax
if($data->update("tbl_tabulation", $update_data, $where_condition))
{
header("location:index.php?updated=1");
}

You need to prevent the default action of the link if you want just the image to change:
cand1
cand2s
If that isn't what you want, then you need to change the image by index.php when it loads the news page. Other options are to use event.preventDefault():

Related

Fill html input from sql query using button in PHP

I have 2 inputs with name and surname, from a database I bring all the values ​​and when pressing a button on the form I would like the inputs to be completed with the data. When there is no data left to show, it should throw a warning. I leave the code of what I have done so far.
<?php
function customersData(){
try {
$pdo = conect();
$sql = "Select CTE_LASTNAME,CTE_NAME
From customers
Where id_store= 1150";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$usuarios = $stmt->fetchAll(PDO::FETCH_ASSOC);
return $customers;
} catch(PDOException $e) {
echo 'Error: '.$e->getMessage();
}
}
$data=customersData();
?>
<html>
<body>
<form>
<div class="form-group">
<div class="col-xs-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="ficha">
</div>
<div class="mb-3">
<label for="lastname" class="form-label">Lastname</label>
<input type="text" class="form-control" id="ficha">
</div>
</div>
<button type="submit" class="btn btn-primary" id="btnData">Show Data</button>
</form>
<script>
var btnData = document.getElementById("btnData");
btnData.addEventListener("click",function(e){
e.preventDefault();
});
</script>
</body>
</html>
You probably want to use Ajax, I added JQuery to simplify it.
Try it, and manage your id_store variable.
<?php
function customersData($id) {
try {
$pdo = conect();
$sql = "Select CTE_LASTNAME,CTE_NAME
From customers
Where id_store=?";
$stmt = $pdo->prepare($sql);
$stmt->execute([$id]);
return $stmt->fetch(PDO::FETCH_ASSOC);
} catch(PDOException $e) {
echo 'Error: '.$e->getMessage();
}
}
if (!empty($_GET["get_data"])) {
$data = customersData(intval($_GET["get_data"]));
echo json_encode($data);
exit();
}
?>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
</head>
<body>
<form>
<div class="form-group">
<div class="col-xs-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="mb-3">
<label for="lastname" class="form-label">Lastname</label>
<input type="text" class="form-control" id="lastname">
</div>
</div>
<button type="button" class="btn btn-primary" id="btnData">Show Data</button>
</form>
<script>
$("#btnData").click(function (ev) {
$.get(window.location.href, {
"get_data": 1150
}, function (result) {
let obj = JSON.parse(result);
$("#name").val(obj.CTE_NAME);
$("#lastname").val(obj.CTE_LASTNAME);
});
});
</script>
</body>
</html>

div #id in foreach loop only selects last variable when trying to show/hide in function

I am navigating through a simple foreach loop to get "blog posts". It shows basic blog information, a reply and delete button. When I select the 'reply' button, a small form beneath the reply button appears to fill out. The problem is, the function I am passing the variable to, only gets the last id for the form. How do I change my function or div element to be unique for each instance?
I have tried setting up PHP #echo variable's on the "id" and function, I have checked all my opening and closing brackets 10-fold. I have tried using different GetElementBy ... methods. I started looking into Jquery but I wanted to get this finished with PHP/Javascript only.
<?php foreach ($mainentries as $entry) :
$subentryID = $entry['SubEntryID'];
if ($subentryID == "0")
{ ?>
<div><tr><td><?php echo ('#'.$entry['EntryID'].' - ')?></td>
<td><?php echo $entry['Body']; ?></td>
<br />
<?php foreach($subentries as $subentry) : ?>
<?php if ($subentry['SubEntryID'] == $entry['EntryID'])
{ ?>
<div id="subposts">
<td><td><td>#<?php echo $subentry['EntryID'];?></td><br>
<td>
<?php echo $subentry['Body']; ?>
</td></td></td>
</div>
<?php } endforeach; ?>
<br />
<td>
<button onclick="cookiechecksub()">Reply</button>
<?php echo $entry['EntryID'];
$subform = $entry['EntryID']; ?>
<div id="<?php echo $subform?>" style="display:none">
<form action="Add_subentry.php" method="post" id="Add_subentry">
<label>Title:</label><br />
<input type = "text" name="Title" class="Title"/> <br />
<label>Body</label><br />
<div class="area">
<input type = "textarea" name="Body" class="Body"/><br />
</div>
<input type="hidden" readonly="true" name="EntryID" value="<?php echo $entry['EntryID']; ?>" />
<input type=submit id="btnReply" value="Submit Reply"/>
</form>
</div></td>
<td>
<form action="Delete_entry.php" method="post" id="Delete_entry">
<input type="hidden" readonly="true" name="EntryID" value="<?php echo $entry['EntryID']; ?>" />
<?php if ($userid == 1)
{ ?>
<input type="submit" id="btnDelete" value="Delete Post"/>
<?php } ?>
<br /><br />
</form>
</td>
</tr>
</div>
<?php
} endforeach; ?>
<Script>
function cookiechecksub() {
if (!userid) {
if (confirm("Please log in first")) {
window.location.replace("http://localhost/alexdes/login-logout.php");
}
}
else {
TryAddSubPost();
}
}
function TryAddSubPost()
{
var x = document.getElementById("<?php echo $subform?>");
if (x.style.display === "none")
{
x.style.display="block";
}
else
{
x.style.display="none";
}
}
</Script>
this is because you used php echo in the js function especially in TryAddSubPost
change it to be like this:
<script>
function cookiechecksub(id) {
if (!userid) {
if (confirm("Please log in first")) {
window.location.replace("http://localhost/alexdes/login-logout.php");
}
}
else {
TryAddSubPost(id);
}
}
function TryAddSubPost(id)
{
var x = document.getElementById(id);
if (x.style.display === "none")
{
x.style.display="block";
}
else
{
x.style.display="none";
}
}
</script>
and use the id from php only when calling the function, like this:
<button onclick="cookiechecksub('<?php echo $entry['EntryID']?>')">Reply</button>
Give cookiechecksub an argument, and pass it to TryAddSubPost
<button onclick="cookiechecksub('<?=$entry['EntryID']?>')">

Same Value in the Dynamic jQuery Form

Hello to all users of the site, my intent was to create a dynamic form for a multiple association of multiple products to the same customer, and I had the idea to implement it with the help of jquery being able to create a dynamic form, so looking on the internet I came across an example on jsFiddle, which works perfectly. The only thing that I need would be not to have an empty input where you can write but an input that has a fixed value. For example, the word "TEST", and every time a new input is generated, the input generated always has the value = "TEST".
How can I do it?
Code (you can copy and paste in your test.html it works!):
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<form role="form" action="/wohoo" method="POST">
<label>impianti</label>
<div class="CLASSE_DA_SPECIFICARE-VARIABILE_DA_INZIALIZZARE">
<div class="CLASSE_DEL_DIV">
<div class="CLASSE_DA_SPECIFICARE">
<input type="text" name="impianti[]">
<input type="text" name="impianti[]">
<button type="button" class="RIMUOVI_INPUT">Remove</button>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
</form>
<script type="text/javascript">
$('.CLASSE_DA_SPECIFICARE-VARIABILE_DA_INZIALIZZARE').each(function () {
var $VARIABILE_DA_INZIALIZZARE = $('.CLASSE_DEL_DIV', this);
$(".add-field", $(this)).click(function (e) {
$('.CLASSE_DA_SPECIFICARE:first-child', $VARIABILE_DA_INZIALIZZARE).clone(true).appendTo($VARIABILE_DA_INZIALIZZARE).find('input').val('').focus();
});
$('.CLASSE_DA_SPECIFICARE .RIMUOVI_INPUT', $VARIABILE_DA_INZIALIZZARE).click(function () {
if ($('.CLASSE_DA_SPECIFICARE', $VARIABILE_DA_INZIALIZZARE).length > 1)
$(this).parent('.CLASSE_DA_SPECIFICARE').remove();
});
});
</script>
How to put into.val() <?php echo $row['impianto_id'] ;?>
I have this:
<?php
session_start();
include 'connessione.php';
$id = $_SESSION['id'];
$query_string = "SELECT * FROM impianti";
$impianti = mysqli_query($connessione, $query_string);
?>
<h4>IMPIANTO ID CAMPAGNA</h4>
<select name="impianto_id_campagna">
<?php
while ($row = mysqli_fetch_assoc($impianti)) { ?>
<option value="<?php echo $row['impianto_id']; ?>">
<?php echo $row['concessionaria']; ?>
</option>
<?php } ?>
</select>
I want to echo this in .val()
But it does not work...
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<form role="form" action="/wohoo" method="POST">
<label>impianti</label>
<div class="CLASSE_DA_SPECIFICARE-VARIABILE_DA_INZIALIZZARE">
<div class="CLASSE_DEL_DIV">
<div class="CLASSE_DA_SPECIFICARE">
<input type="text" name="impianti[]">
<input type="text" name="impianti[]">
<button type="button" class="RIMUOVI_INPUT">Remove</button>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
</form>
<script type="text/javascript">
var impianto_id = '<?php $row[' impianto_id ']; ?> ';
console.log (impianto_id);
</script>
<script type="text/javascript">
$('.CLASSE_DA_SPECIFICARE-VARIABILE_DA_INZIALIZZARE').each(function () {var $VARIABILE_DA_INZIALIZZARE = $('.CLASSE_DEL_DIV', this);
$(".add-field", $(this)).click(function (e) {
$('.CLASSE_DA_SPECIFICARE:first-child', $VARIABILE_DA_INZIALIZZARE).clone(true).appendTo($VARIABILE_DA_INZIALIZZARE).find('input').val(impianto_id).focus();
});
$('.CLASSE_DA_SPECIFICARE .RIMUOVI_INPUT', $VARIABILE_DA_INZIALIZZARE).click(function () {
if ($('.CLASSE_DA_SPECIFICARE', $VARIABILE_DA_INZIALIZZARE).length > 1)
$(this).parent('.CLASSE_DA_SPECIFICARE').remove();
});
});
</script>
$('.CLASSE_DA_SPECIFICARE-VARIABILE_DA_INZIALIZZARE').each(function() {
var $VARIABILE_DA_INZIALIZZARE = $('.CLASSE_DEL_DIV', this);
$(".add-field", $(this)).click(function(e) {
$('.CLASSE_DA_SPECIFICARE:first-child', $VARIABILE_DA_INZIALIZZARE).clone(true).appendTo($VARIABILE_DA_INZIALIZZARE).find('input').val('TEST').focus();});// here the test
$('.CLASSE_DA_SPECIFICARE .RIMUOVI_INPUT', $VARIABILE_DA_INZIALIZZARE).click(function() {
if ($('.CLASSE_DA_SPECIFICARE', $VARIABILE_DA_INZIALIZZARE).length > 1)
$(this).parent('.CLASSE_DA_SPECIFICARE').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" action="/wohoo" method="POST">
<label>impianti</label>
<div class="CLASSE_DA_SPECIFICARE-VARIABILE_DA_INZIALIZZARE">
<div class="CLASSE_DEL_DIV">
<div class="CLASSE_DA_SPECIFICARE">
<input type="text" name="impianti[]">
<input type="text" name="impianti[]">
<button type="button" class="RIMUOVI_INPUT">Remove</button>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
</form>
All you had to do is just add 'test' into the .val() of the input that you created.

After selecting the value from dropdown list then it shows no any value next time

Not working :- After selecting the value from dropdown list then after submitting it shows no any value next time.
Working :- But the last selected value is saved in session. If page is refreshed the session value shown as selected in dropdown list.
Working :- After any keyword is submited the value in dropdown must show.
Please give me solution to make first one work. I have done it using POST.
Here is my code:-
<?php
session_start();
$selected='';
$offer_type_selected='';
function get_options($select)
{
$incent_type=array('All'=>'none','Incent'=>'Incent','Non-Incent'=>'Non-Incent');
$options='';
while(list($k,$v)=each($incent_type))
{
if($select==$v)
{
$options.='<option value="'.$v.'" selected>'.$k.'</option>';
}
else
{
$options.='<option value="'.$v.'">'.$k.'</option>';
}
}
return $options;
}
if(isset($_POST['incent_type']))
{
$selected=$_POST['incent_type'];
echo $selected;
$_SESSION['incent_type']=$selected;
}
?>
<body link="white">
<div class="container">
<div class="content" >
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="POST">
<div class="label_div">Type a keyword :</div>
<div class="input_container">
<input type="text" name="subquery" id="name_id" onkeyup="autocomplet()">
<ul id="name_list_id"></ul>
</div>
<div class="lable_div" >
<input type="submit" class="submit_query" name="submit_id" value="Submit Query" >
Select Incent Type :<select class="custom-dropdown" name="incent_type" onchange="this.form.submit();">
<?php
$flag=0;
if(isset($_POST['subquery']))
{
if(strcmp("",$_POST['subquery'])!=0)
{
unset($_SESSION['incent_type']);
unset($_SESSION['offers_type']);
echo get_options('none');
$flag=1;
}
}
else if(isset($_SESSION['incent_type']) && $flag==0)
echo get_options($_SESSION['incent_type']);
else if($flag==0)
echo get_options('none');
?>
</select>
</div>
</form>
</div>
</div>
You have problem with checking $_POST['subquery'], you all time getting true this - if(isset($_POST['subquery'])), try change to if(!empty($_POST['subquery']))
Also you can remove session and some if:
<?php
function get_options($select=null)
{
$incent_type=array('All'=>'none','Incent'=>'Incent','Non-Incent'=>'Non-Incent');
$options='';
foreach($incent_type as $k=>$v){
$options.='<option value="'.$v.'" '.(!empty($select) && $select==$v?"selected":"").'>'.$k.'</option>';
}
return $options;
}
?>
<body link="white">
<div class="container">
<div class="content" >
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="POST">
<div class="label_div">Type a keyword :</div>
<div class="input_container">
<input type="text" name="subquery" id="name_id" onkeyup="autocomplet()">
<ul id="name_list_id"></ul>
</div>
<div class="lable_div" >
<input type="submit" class="submit_query" name="submit_id" value="Submit Query" >
Select Incent Type :<select class="custom-dropdown" name="incent_type" onchange="this.form.submit();">
<?php
echo get_options(empty($_POST['subquery'])?$_POST['incent_type']:null);
?>
</select>
</div>
</form>
</div>
</div>

Upload images to the chat function as the message - socialkit script

Sorry questions I might be confusing but this should reveal that I can help from the teacher teacher here. This script is part of the social network socialkit script.
How to keep the chat function directly upload images could serve as the messaging menu.
<div class="chat-textarea">
<textarea class="auto-grow-input" onfocus="SK_focusChat();" onkeyup="SK_sendChatMessage(this.value,<?php echo $sk['chat']['recipient']['id']; ?>,event);"></textarea>
<div class="advanced-options">
<i class="icon-smile cursor-hand" onclick="javascript:$('.chat-emoticons-wrapper').toggle();"></i>
<div class="chat-emoticons-wrapper">
<?php
$emoticons = SK_getEmoticons();
if (is_array($emoticons)) {
foreach ($emoticons as $emo_code => $emo_icon) {
echo '<img src="' . $emo_icon . '" width="16px" onclick="addEmoToChat(\'' . $emo_code . '\');">';
}
}
?>
</div>
</div>
<input class="message-photo-input hidden" name="photos[]" type="file" accept="image/jpeg,image/png" onchange="SK_uploadMessageForm();">
<div class="options-wrapper" style="float:left ; margin-top:5px">
<i class="icon-camera progress-icon cursor-hand" title="<?php echo $lang['upload_photo']; ?>" valign="middle" onclick="$('.message-photo-input').click();"></i>
</div>
</div>
<?php
}
?>
</div>
</div>
And this is the javascript on the chat.
<script>
function SK_sendChatMessage(text,recipient_id,e) {
document.title = document_title;
textarea_wrapper = $('.chat-textarea');
chat_messages_wrapper = $('.chat-messages');
if (e.keyCode == 13 && e.shiftKey == 0) {
e.preventDefault();
textarea_wrapper.find('textarea').val(''); chat_messages_wrapper.append('<div class="chat-text align-right temp-text" align="right"><div class="text-wrapper float-right">' + text + '<div class="marker-out"><div class="marker-in"></div></div></div><div class="float-clear"></div></div>');
$.post(SK_source() + '?t=chat&a=send_message', {text: text, recipient_id: recipient_id}, function (data) {
chat_messages_wrapper
.append(data.html)
.scrollTop(chat_messages_wrapper.prop('scrollHeight'))
.find('.temp-text')
.remove();
});
}
}
// upload photo chat
function SK_uploadMessageForm() {
document.title = document_title;
$('chat_messages_wrapper').submit();
SK_progressIconLoader($('.chat-textarea').find('.options-wrapper'));
}
</script>
It javascript to be able to send picture messages
function SK_sendMessageForm(e) {
document.title = document_title;
if (e.keyCode == 13 && e.shiftKey == 0) {
e.preventDefault();
$('form.send-message-form').submit();
SK_progressIconLoader($('.textarea-container').find('.options-wrapper'));
}
}
function SK_uploadMessageForm() {
document.title = document_title;
$('form.send-message-form').submit();
SK_progressIconLoader($('.textarea-container').find('.options-wrapper'));
}
It send the form of a message
<div class="textarea-container" align="center">
<form class="send-message-form" method="post" enctype="multipart/form-data">
<textarea class="message-textarea auto-grow-input" name="text" placeholder="<?php echo $lang['write_a_message_label']; ?>..." onkeyup="SK_sendMessageForm(event);" onfocus="SK_sendMessageForm(event);" data-height="22" disabled></textarea>
<input class="message-photo-input hidden" name="photos[]" type="file" accept="image/jpeg,image/png" onchange="SK_uploadMessageForm();">
<div class="options-wrapper">
<i class="icon-camera progress-icon cursor-hand" title="<?php echo $lang['upload_photo']; ?>" valign="middle" onclick="$('.message-photo-input').click();"></i>
</div>
<input name="timeline_id" value="<?php echo $sk['user']['id']; ?>" type="hidden">
<input id="recipient-id" name="recipient_id" value="0" type="hidden">
</form>
</div>
</div>
</div>
My questions, this code upload image not work on chat.
<input class="message-photo-input hidden" name="photos[]" type="file" accept="image/jpeg,image/png" onchange="SK_uploadMessageForm();">
<div class="options-wrapper" style="float:left ; margin-top:5px">
<i class="icon-camera progress-icon cursor-hand" title="<?php echo $lang['upload_photo']; ?>" valign="middle" onclick="$('.message-photo-input').click();"></i>
</div>
I look forward to help you all.

Categories

Resources