Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a question. I have for example list of div, i just want all these dives should be clickable. And after click on div, value from div should be pushed to on an other div. How I can do it in a best way?
<?php
define('HOST','xxxx');
define('USER','xxx');
define('PASS','xxxx');
define('DB','xxxxx');
$con = mysqli_connect(HOST,USER,PASS,DB);
$sql = "select * from users";
$res = mysqli_query($con,$sql);
$result = array();
while($row = mysqli_fetch_array($res)){
array_push($result,
array(
'email'=>$row[3],
));
}
echo json_encode(array("result"=>$result));
mysqli_close($con);
?>
<html>
<head>
<style>
#usersOnLine {
font-family:tahoma;
font-size:12px;
color:black;
border: 3px teal solid;
height: 525px;
width: 250px;
float: right;
overflow-y:scroll;
}
.container{
width:970px;
height:auto;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<div id="reciver"><h3>reciver</h3></div>
<div id="sender"><h3>sender</h3></div>
<h2 align="right"> all contacts </h2>
<div id="usersOnLine">
<?php
foreach($result as $key => $val)
{
echo $val['email'];
echo "<br>";
}
?>
</div>
</div>
</body>
</html>
here is useronline div in which many name are i want when i click on any name name push to reciver div how to made it i am new in php
You may do it with a Combination of Javascript and HTML. Below is how:
HTML, CSS & JAVASCRIPT - JQUERY
<!-- HTML-->
<html>
<head>
<!-- CSS-->
<style>
#usersOnLine {
font-family:tahoma;
font-size:12px;
color:black;
border: 3px teal solid;
height: 525px;
width: 250px;
float: right;
overflow-y:scroll;
padding: 10px;
}
.container{
width:970px;
height:auto;
margin:0 auto;
}
.clickAble{
display: inline-block;;
cursor:pointer; /* <== TO INDICATE TO USER THAT THIS IS CLICKABLE... */
}
</style>
</head>
<!-- HTML CONTENT -->
<body>
<div class="container">
<div id="receiver">
<h3>receiver</h3>
<!-- NOTICE THAT THIS IS NEW NOW... -->
<!-- IT'S IMPORTANT THAT YOU HAVE THIS PARAGRAPH EXACTLY AS IT IS HERE -->
<p class='bubbled-data'></p>
</div>
<div id="sender"><h3>sender</h3></div>
<h2 align="right"> all contacts </h2>
<div id="usersOnLine">
<?php
foreach($result as $key => $val){
echo "<span class='clickAble'>" . $val['email'] . "</span><br />";
}
?>
</div>
<!-- THE FORM -->
<form id="messageForm" action="<?php echo $_PHP_SELF; ?>" method="POST" >
<input type="text" name="data" id="message" placeholder="message" onFocus="fun1(this)" onBlur="fun2(this)" required="" /><br /><br />
<!-- NOTICE THAT WE ADDED A HIDDEN FIELD TO HOLD THE DATA -->
<input type="hidden" name="user_data" id="user_data" value="">
<input id="send" type="submit" value="Send">
</form>
</div>
<!-- JAVASCRIPT - JQUERY -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function (e) {
var receiver = $("#receiver");
var clickAbles = $(".clickAble");
// BIND THE clickAble SPAN TO AN ON-CLICK EVENT...
// SO THAT WITH EACH CLICK, YOU CAN SIMPLE APPEND THE CONTENT OF THAT SPAN TO THE RECEIVER DIV
clickAbles.on("click", function(evt){
var nameValue = $(this).text();
receiver.find(".bubbled-data").text(nameValue);
// ADD THE SAME VALUE TO THE HIDDEN INPUT ELEMENT: #user_data
$("#user_data").val(nameValue);
});
});
})(jQuery);
</script>
</body>
</html>
TEST & FIDDLE WITH IT HERE
https://jsfiddle.net/7eres0L0/
Related
So, my html page has content going under the footer. Can someone help me make the page get longer
so that you can scroll down to see the footer? or make it so that the footer begins where content ends(prefered)? Not sure what i did wrong.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>351 Project || Search Student Notes</title>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<?php include "advisor_header.html" ?>
<div>
<h1>Student Notes For <?php echo $student_first_name . " " . $student_last_name;?> </h1>
<div>
<div>
<textarea class="chunkybox" disabled="disabled" name="notes" rows="20" col = "15"><?php echo $student_notes;?></textarea>
</div>
</div>
<h3><center>End of Notes</center></h3>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<form name="activeadviseeform" class="centeredbutton">
<div>
<div>
<textarea style="height: auto;" class="chunkybox" name="notes" rows="20" col = "15" placeholder="Type notes to ADD"></textarea>
</div>
</div>
<button class="centeredbutton" type="submit">Add Notes</button>
</form>
<form action="advisor_edit_notes.php">
<button class="centeredbutton" type="submit">Edit Notes</button>
</form>
<?php if($_SERVER["REQUEST_METHOD"] == "POST"){
if ($student_notes == null) {
$appendednotes = $time . " " . $_POST['notes'];
}
if ($student_notes != null) {
$appendednotes = $student_notes . "\r\n" . $time . " " . $_POST['notes'];
}
$update = "UPDATE people SET notes = '$appendednotes' WHERE id = '$student_id'";
// update in database
$rs = mysqli_query($con, $update);
if($rs)
{
header("Refresh:0");
//printf("Notes Added to : %s Notes", $_SESSION["activeadvisee"]);
}
}
?>
</div>
</div>
<?php include "footer.html" ?>
</body>
</html>
footer.html:
<footer class='footer'>
Copyright © 2022 <br>
placeholder#temp.com :: Contact Form
</footer>
main.css:
.footer {
width: 100%;
height: 150px;
background: #3167b1;
position: fixed;
bottom: 0px; left: 0;
}
Position fixed may not be what you want from what it sounds like? Fixed would keep it on the page at all times with the scroll.
If you only want it to stay at the bottom I would think static is the position you would want - which is the default.
Is there something I'm misunderstanding?
https://www.w3schools.com/css/css_positioning.asp
position: fixed; An element with position: fixed; is positioned
relative to the viewport, which means it always stays in the same
place even if the page is scrolled. The top, right, bottom, and left
properties are used to position the element.
A fixed element does not leave a gap in the page where it would
normally have been located.
use any of the below
position: relative;
position: static;
.footer {
width: 100%;
height: 150px;
background: #3167b1;
position: relative;
bottom: 0px;
left: 0;
}
Try putting the footer.html code directly in your main PHP file after the </body> tag. also, have you added overflow attribute for making your page scrollable in the CSS file?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I'm new for the PHP & I begin the project which was involving the PHP. my firm has a dynamic drop down. I can't insert the dynamic drop down data to the database.
Here's my index.php form.
<?php
//index.php
include('database_connection.php');
$query = " SELECT * FROM first_level_category ORDER BY first_level_category_name ASC ";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?> <!DOCTYPE html> <style>
* { box-sizing: border-box; }
input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; }
label { padding: 12px 12px 12px 0; display: inline-block; }
/* Set a style for the submit button */ .registerbtn { background-color: #4CAF50; color: white; padding: 10px 10px; margin: 2px 0; border: none; cursor: pointer; width: 50%; opacity: 0.9; }
.registerbtn:hover { opacity: 1; }
.container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; }
.col-25 { float: left; width: 30%; margin-top: 6px; }
.col-35 { float: left; width: 25%; margin-top: 6px; }
.col-75 { float: left; width: 30%; margin-top: 6px; }
div.ui-datepicker{ font-size:20px; float: left; width: 30%; margin-top: 6px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; }
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */ #media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0; } </style>
<html> <head> <title>Bootstrap Multi Select Dynamic Dependent
Select box using PHP Ajax </title> <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" /> </head> <body> <br /> <div class="container"> <form action="action.php" method="post"> <h2 align="center">Multi Select Dynamic Dependent Select box using PHP Ajax</h2> <br /><br /> <div style="width: 500px; margin:0 auto">
<div class="form-group"> <div class="container"> <form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="policynumber">Policy Number</label>
</div>
<div class="col-75">
<input type="text" id="policynumber" name="pid" placeholder="Policy number...">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="date">Date</label>
</div>
<div class="ui-datepicker">
<input type="date" id="date" name="date" placeholder="date">
</div>
</div>
<div class="row">
<div class="col-25">
<label>Department</label> </div> <div class="col-75">
<select id="first_level" name="first_level" multiple class="form-control">
<?php
foreach($result as $row)
{
echo '<option value="'.$row["first_level_category_id"].'">'.$row["first_level_category_name"].'</option>';
}
?>
</select>
</div> </div>
<div class="row">
<div class="col-25">
<label>Supporting Documents</label> </div> <div class="col-75">
<select id="second_level" name="second_level" multiple class="form-control">
</select>
</div> </div>
<!--<div class="row">
<div class="col-25">
<label>First Level Category</label> </div> <div class="col-75">
<select id="third_level" name="third_level[]" multiple class="form-control">
</select> </div> </div>-->
<button type="submit" class="registerbtn">Submit</button> </div>
</form> </body> </html> <script> $(document).ready(function(){
$('#first_level').multiselect({ nonSelectedText:'Select First Level Category', buttonWidth:'400px', onChange:function(option, checked){ $('#second_level').html(''); $('#second_level').multiselect('rebuild'); $('#third_level').html(''); $('#third_level').multiselect('rebuild'); var selected = this.$select.val(); if(selected.length > 0) {
$.ajax({
url:"fetch_second_level_category.php",
method:"POST",
data:{selected:selected},
success:function(data)
{
$('#second_level').html(data);
$('#second_level').multiselect('rebuild');
}
}) } } });
$('#second_level').multiselect({ nonSelectedText: 'Select Second Level Category', buttonWidth:'400px', onChange:function(option, checked) { $('#third_level').html(''); $('#third_level').multiselect('rebuild'); var selected = this.$select.val(); if(selected.length > 0) {
$.ajax({
url:"fetch_third_level_category.php",
method:"POST",
data:{selected:selected},
success:function(data)
{
$('#third_level').html(data);
$('#third_level').multiselect('rebuild');
}
}); } } });
$('#third_level').multiselect({ nonSelectedText: 'Select Third Level Category', buttonWidth:'400px' });
}); </script>
Here's my Action.php code
//here's my action.php form
// Check connection if($connect === false){
die("ERROR: Could not connect. " . mysqli_connect_error()); }
if(isset($_POST["submit"]));
// Escape user inputs for security
$pid = $_POST['pid']; $date = $_POST['date']; $record1 = is_array('first_level'); $record2 = is_array('second_level');
// Attempt insert query execution $sql = "INSERT INTO saveditem (pid, date, department,supdoc) VALUES ('$pid', '$date','$record1','$record2')";
if(mysqli_query($connect, $sql)){
echo "Records inserted successfully."; } else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($connect); } // Close connection mysqli_close($connect); ?>
Can someone help me out?
try to var_dump($result) before you looping them to make sure your data is ready to use
<?php
var_dump($result);
foreach($result as $row)
{?>
<option value="<?php echo $row['first_level_category_id']; ?>"><?php echo $row['first_level_category_name']; ?></option>
<?php
}
?>
You can json_encode and json_decode. Encode the array and then insert into the database. if you need to fetch the array from the database, json_decode it.
More info:
https://www.php.net/manual/en/function.json-encode.php
https://www.php.net/manual/en/function.json-decode.php
I want to add a slider in the form tag. Right now all the pictures are together. i want to make it more user friendly. As you can see in my code i'm fetching all images from database. And i've override the input radio button on each image so that the user can select its image.
I've already tried to use the Slick library but its not good.
<style type="text/css">
/*
html, body {
margin: 0;
padding: 0;
}
*/
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.img{
width: 10%;
}
</style>
<style media="screen">
.input-hidden {
position: absolute;
left: -9999px;
}
input[type=radio]:checked + label>img {
border: 1px solid #fff;
box-shadow: 0 0 3px 3px #090;
}
input[type=radio]:checked + label>img {
transform:
rotateZ(-10deg)
rotateX(10deg);
}
/* Stuff after this is only to make things more pretty */
input[type=radio] + label>img {
width: 115px;
height: 115px;
transition: 500ms all;
}
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<form action="preview.php" method="post" >
<?php
$result_model = mysqli_query($conn, "SELECT * FROM model ORDER BY id DESC ");
$result_metal = mysqli_query($conn, "SELECT * FROM metal ORDER BY id DESC ");
$result_stone = mysqli_query($conn, "SELECT * FROM stone ORDER BY id DESC "); ?>
<div >
<div class="input-group">
<p>Choose your Model:</p>
</div>
<div class="regular slider">
<?php
while($model = mysqli_fetch_assoc($result_model)){
?>
<!-- <input type="radio" name="model" id="model<?= $model['id'] ?>" class="input-hidden" value="<?= $model['id'] ?>" />-->
<!--
<label for="model<?= $model['id'] ?>">
-->
<img
src="images/<?= $model['image'] ?>"
alt="<?= $model['name'] ?>" style="width:50%;" />
<!-- </label>-->
<?php
}
?>
<!-- </div>-->
<!-- <br>-->
<div>
<!--
<div class="input-group">
<p>Choose your Metal:</p>
</div>
-->
<!--
-->
</div>
<br>
</div>
<div class="input-group">
<p>Choose your Metal:</p>
</div>
<div class="regular slider">
<?php
while($metal = mysqli_fetch_assoc($result_metal)){
?>
<!--
<input type="radio" name="metal" id="metal<?= $metal['id'] ?>" class="input-hidden" value="<?= $metal['id'] ?>" />
-->
<!-- <label for="metal<?= $metal['id'] ?>">-->
<img
src="images/<?= $metal['image'] ?>"
alt="<?= $metal['name'] ?>" />
<!-- </label>-->
<?php
}
?>
?>
<!-- </div>-->
<!-- <br>-->
<div>
<!--
<div class="input-group">
<p>Choose your Metal:</p>
</div>
-->
<!--
-->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
</script>
</div>
</form>
I have a query from mysql, I am getting one row at the time randomly, I am teaching and I want the row to just show one field at the time. for example, I want my students to see the title of the book, I will ask them Who is the author and after they finish guessing I will click the button that says author or Theme and they will see the author name or the theme of the title. As of right now I am able to see all the fields with the information that they contain, but I haven't been able to hide the author and theme to just display them with the click of each of the button.
<form action="index3.php" method="get">
<?php while($row = mysqli_fetch_array($result2)): ;?>
Title of book : <?php echo $row[3];?>
<br/><br/>
<input type="button" value="Author" name="publish">
<?php echo $row[0];?>
<br/><br/>
<input type="button" value="Group"><?php echo $row[1];?>
<br/><br/>
<input type="button" value="Theme"> <?php echo $row[2];?>
<br/><br/>
<input type="submit" value="Next">
</form>
Some JavaScript is required to show hidden fields. A helpful tip here, use associative arrays on this, it's not readable when you use numeric arrays (I am guessing the names below):
jsFiddle of below: https://jsfiddle.net/4sg5wjm3/
<form action="index3.php" method="get">
<!-- use mysqli_fetch_assoc here instead of mysqli_fetch_array -->
<?php while($row = mysqli_fetch_assoc($result2)): ?>
<div class="book-group">
<h3>Title of book : <?php echo $row['book_title'] ?></h3>
<div class="hide pad-bottom author">
<?php echo $row['author'] ?>
</div>
<div class="hide pad-bottom group">
<?php echo $row['book_group'] ?>
</div>
<div class="hide pad-bottom theme">
<?php echo $row['book_theme'];?>
</div>
Reveal Author
Reveal Theme
Reveal Group
NEXT
</div>
<?php endwhile;?>
</form>
<!-- Need jQuery library -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
// Document ready
$(function(){
// When user clicks reveal button
$(".reveal").on('click', function(e) {
// Stop normal action of <a> tag
e.preventDefault();
// Find the parent div, then find the appropriate child div based on
// what the data- attribute is of the clicked button
$(this).parents('.book-group').find('.'+$(this).data('reveal')).fadeIn('fast');
});
});
</script>
<!-- Some styles to make the show/hide work -->
<style>
* {
font-family: Arial;
}
.hide {
display: none;
}
.pad-bottom {
padding-bottom: 1em;
}
a:link,
a:visited {
background-color: green;
float: left;
clear: both;
padding: 0.5em;
font-size: 1.2em;
border-radius: 3px;
text-decoration: none;
color: #FFF;
transition: background-color 0.5s;
margin: 0.2em;
}
.book-group {
display: flex;
flex-direction: row;
margin: 0.5em;
padding: 0.5em;
border-top: 1px solid #ccc;
}
</style>
Note, I have not done anything with the next button, it can have JS applied to it as well in the same manor as to show and hide the book-group classes so only one book shows at a time.
Here I am using drag and drop in jQuery.
I get the set of questions and set of answers from Database in array(article->question, article->answers), where answers be drag and dropped in the questions text box. On refresh the page the dragged values are comes to the original place not in that particular text box were I dropped.
Here My coding.
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="/resources/demos/style.css" /> -->
<style>
/*#draggable { width: 50px; height: 20px; padding: 0.5em; } */
.drag_ans {
background: none repeat scroll 0 0 transparent;
border: 0 none;
width: 100px;
}
#draggable {
width: 50px;
height: 20px;
background: white;
}
#droppable {
float: left;
margin: 50px;
width: 500px;
height: 300px;
border: green;
}
#ques {
background: none repeat scroll 0 0 #FFFFFF;
padding: 10px;
width: 100px;
}
</style>
<script>
$(document).ready(function(){
$("#answer").click(function(){
// alert('find a score');
});
});
</script>
</head>
<body>
<div class="container_inner">
<?php
foreach($data as $article)
{
echo "<p>";
echo "<b>";echo $article->article_name;
echo"</b>";
echo "</p>";
echo "<p>";
echo $article->description;
echo "</p>";
echo $article->video; echo "<br>";
}
?>
<?php
$add=1;
foreach($question as $article)
{
?>
<!-- <div id="drop"> -->
<p>
<?php echo $article->question; ?>
<input type ="text" id="ques_<?php echo $add; ?>" name="" class="ui-widget-content" />
</p>
<!--</div> -->
<?php
$add++;
}
?>
<?php
$counter=1;
foreach($question as $article)
{
?>
<script>
$(function() {
$("#draggable_<?php echo $counter; ?>").draggable({ revert: 'invalid' });
$("#ques_<?php echo $counter; ?>").droppable({
drop: function( event, ui ) {
$(this).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
<div id="draggable_<?php echo $counter; ?>" class="ui-widget-content drag_ans">
<p>
<?php echo $article->answer; ?>
</div>
</p>
<?php
$counter++;
}
?>
<p> <input class="green_but" type="submit" name="NEW_SUBMIT" value="Submit" id="answer"/> </p>
</div>
</body>
</html>
Drag and Drop working fine and on refresh the page values all empty in the question text box.
How to validate question and answer in jquery as this answer should store in DB after it dropped the question text box. And when clicking submit button, if answer to the question wrong the score should reduce. EX: If user answer set correct answer 4 out of 10 then the score should 4 out of 10.
I'm not sure what we are suppose to do...you say the answer in your post....the settings need to be saved. Obviously they are not getting saved so you have two methods to do so...
1) Submit a form and save the values there
2) Save the values via ajax attached to the one of the event handlers (probably the drop one : http://api.jqueryui.com/draggable/#event-stop)
My recommendation is not to do the whole drag and drop functionality while you are still learning the basics of web development.