I want to put function type submit in a button with CSS style and when the button is clicked the PHP code run.
This is my code:
</head>
<body>
<div class="container-contact100">
<div class="wrap-contact150">
<form class="contact150-form validate-form">
<div class="row">
<div>
<h1><br>HOME AUTOMATION</br></h1>
</div>
</div>
<div class="row">
<div>
<h3><br>LAMPU</br></h3>
</div>
</div>
<div class="row">
<div>
<td><p style=\"font-family:arial;color:red;font-size:35px;\">OFF</p> </td>
</div>
</div>
<div class="row">
<div>
<br><button class="contact100-form-btn">
On
</button></br>
</div>
<div class="col-sm-5">
<br><button class="contact100-form-btn">
Off
</button></br>
</div>
</div>
</form>
<?php
include 'connect.php';
function OnOne()
{
$sql = "UPDATE relay SET data_relay = '1' WHERE id = '1';
$result = mysqli_query($conn, $sql);
}
function OffOne()
{
$sql = "UPDATE relay SET data_relay = '0' WHERE id = '1';
$result = mysqli_query($conn, $sql);
}
if(isset($_POST['on_1']))
{
OnOne();
}
if(isset($_POST['off_1']))
{
OffOne();
}
?>
</div>
</div>
</body>
</html>
After I applied this code my web interface become messy. How I can fix this?
I want my CSS button run the PHP code to send a value to database.
Put your php code in seperate file, wrap button into form and add action="path-to-your-php-file"
Related
I need help writing this small piece of code. I need a function that creates a dropdown menu that is filled with names from a Database when a button is clicked. The names in the dropdown list will eventually be submitted to a different table in the database, so I need to know how to set the names as "vales" in the dropdown list also. What would be the best way to go about implementing these issues? I've commented out where I think things should go.
Javascript:
var room = 1;
function ReviewForm() {
room++;
var objTo = document.getElementById('ReviewForm')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass" + room);
var rdiv = 'removeclass' + room;
divtest.innerHTML =
'<hr>' +
'<h2>Student:</h2>' +
'<select>' +
//Instead of these three names, I need to use the DB's info go generate the text and values
'<option value="Adam">Adam</option> ' +
'<option value="Bob">Bob</option> ' +
'<option value="Cat">Cat</option>' +
'</select></h2>' +
objTo.appendChild(divtest)
PHP:
<?php
$NumberOfStudents = "";
// $NumberOfStudents=$_GET['SelectedStudents'];
$hostname = "host";
$username = "user";
$password = "pass";
$databaseName = "_db";
$conn ;
$connect = mysqli_connect($hostname, $username, $password, $databaseName);
/*if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
} */
//BELOW IS THE QUERY FROM THE DB THAT I AM TRYING TO GET TO REPRINT EACH TIME THE FUNCTION IS CALLED
$query = "SELECT concat (FirstName,' ', LastName) as StudentNames FROM `Student`";
$result = mysqli_query($connect, $query);
?>
HTML:
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Content -->
<section>
<!-- Form -->
<form method="post" action="#">
<div class="row uniform">
<!-- Break -->
<div class="12u$">
<div style="height:550px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;"><!-- container for reviews-->
<div id="ReviewForm">
<hr>
<h2>
Student:
<select>
<!-- It is hardcoded into the page here, which is fine, but I would rather it generate when the page is loaded, and then can
be called again each time a new dropdown is needed. -->
<?php while($row1 = mysqli_fetch_array($result)):;?>
<option value="<?php echo $row1['StudentNames'];?>"><?php echo $row1['StudentNames'];?></option>
<?php endwhile;?>
</select>
</h2>
</div>
</div>
</form>
<input type="hidden" name="count" value="1" />
<div class="control-group" id="fields">
<label class="control-label" for="field1"></label>
<div class="controls" id="profs">
<form class="input-group-btn">
<div>
<!--Here is the button that calls the function for a new dropdown menu-->
<button class="btn btn-success" type="button" onclick="ReviewForm();">Add another student</button>
</div>
</form>
<br>
<br>
</div>
</div>
</section>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
I made an input search to filter a list of users that is called with PHP. I'm trying to implement in Vue.js the filter so that when I search the name, the user appears filtered in the list.
Here is the searchbar HTML:
<div class="row" id="toprow">
<div class="col-md-6">
<div id="titlerow1">Users</div>
</div>
<div class="col-md-6">
<input class="searchbar" id="search1" placeholder="Search..."></input>
</div>
</div>
The users list HTML:
<div id="users" name="users">
<?php if(!empty($user))
{
foreach($user as $value)
{
?>
<div class="row oddEven usersElements userid" id=<?php echo $value->id;?> style="margin-top: -1vw;">
<div v-on:click="displayAgregators(<?php echo $value->id;?>)" class="col-md-10">
<span id="items<?php echo $value->id;?>"><?php echo ucfirst($value->username);?></span>
</div>
<div class="col-md-2">
<div class="colorsByUser" :style="{backgroundColor: randomColor()}"></div>
</div>
</div>
<?php }
}?>
</div>
Before it was in jQuery, here is the code:
$('#search1').keyup(function() {
var string1 = $(this).val().toLowerCase();
console.log("str1=" + string1);
$(".usersElements").each(function(index) {
var string = $(this).attr('id');
var string2 = $('#' + string).text().toLowerCase();
console.log("str2=" + string2);
var valtest = string2.indexOf(string1);
console.log("index value:" + valtest);
if (valtest >= 0) {
$('#' + string).show();
} else {
$('#' + string).hide();
}
});
});
I hope you guys can help! :)
Since you're stuck with PHP generating stuff, probably the best you can do is make each row a component. The HTML will look about like this:
<div id="users" name="users">
<?php if(!empty($user)) {
foreach($user as $value) {
?>
<user-component
name="<?php echo ucfirst($value->username);?>"
id="<?php echo $value->id;?>"
:match-pattern="searchPattern"
></user-component>
<?php }
}
?>
</div>
The template for your component will look about like this:
<div v-show="matches()" class="row oddEven usersElements userid" style="margin-top: -1vw;">
<div v-on:click="displayAgregators(id)" class="col-md-10">
<span>{{name}}</span>
</div>
<div class="col-md-2">
<div class="colorsByUser" :style="{backgroundColor: randomColor()}"></div>
</div>
</div>
and it will take three props: name and id come from the PHP stuff, while match-pattern comes from your parent Vue. it will have a method (or a computed) that tests whether it matches the pattern. Something like
matches() {
return this.name.toLowerCase().includes(this.matchPattern);
}
Your search bar should have v-model="searchPattern", and you should of course define a searchPattern variable in your Vue.
I'm creating a comment-reply function where I would like the reply-form to show up under its parent when users presses the "Reply"-button.
Right now my code makes the form show up under every comment and not only the specific "parent-comment-reply-button". How can I avoid the form on other comments?
My code looks like this:
HTML
<head>
<?php
include ('headCont.php');?>
</head>
<body>
<?php
include('navBar.php');?>
<div class="container">
<div class="row">
<div class="box">
<div>
<!------------container------->
<form action="" method ="POST">
Namn: <br>
<input type="text" name ="name"><br>
Kommentar: <br>
<textarea name="comment" placeholder="Ställ en fråga" rows="10" cols="20"></textarea><br>
<input type ="submit" name ="submit" value="Skicka">
</form><br>
</div>
<div>
<?php
include ('commentBox/storeComments.php');
include ('commentBox/getComments.php');?>
</div>
</div>
</div>
</div>
<!-- /.container -->
<footer>
<?php
include ('footer.php');
?>
</footer>
<!-- jQuery -->
<script src="jsOld/jquery.js"></script>
</body>
</html>
<script>
$(document).ready(function(){
$("#show").click(function(){
$(".reply-form").show();
});
$("#hide").click(function(){
$(".reply-form").hide();
});
});
</script>
getComments
<?php
include ('connectDB.php');
if($connect){
mysqli_select_db($connect, "comments");
$query2 = "SELECT * FROM data ORDER BY `id` DESC";
$result = mysqli_query($connect, $query2);
$comments = array();
while($row = mysqli_fetch_array($result)){
$name = $row['name'];
$comment = $row['comment'];
$date = $row['date'];
echo "
<div style='width:60%' class='col-lg-12'>
<div class='panel panel-default'>
<div class='panel-heading'>
<strong> $name </strong><span style='float:right'class='text-muted'>$date</span>
</div>
<div class='panel-body'>$comment
<button id='show' style='float:right'>Reply</button>
</div>
</div><!-- /panel panel-default -->
</div><!-- /col-sm-5 -->";
echo " <div class='col-lg-12 padd'>
<form method='POST' action='' class='reply-form'>
Namn:<br>
<input name='_method' type='text'</input><br>
Kommentar:<br>
<textarea name='reply_comment' cols='50' rows='10'></textarea>
<div class='button-group'>
<input type='submit' name='submit_reply' value='Skicka'></input>
<button id='hide' type='submit' name='close' value='Stäng'>Stäng</input>
</div>
</form>
</div>";
}
}
?>
Output
You need to create the form inside the parent DOM. Which means, the following like should be at the end of the your send echo statement. And the .reply-form should be hidden initially using css.
</div><!-- /col-sm-5 -->";
The HTML IDs show and hide can appear multiple times in your DOM, keep in mind that HTML ids should be unique. So it would be best to change it to classes.
Now to the answer your question you could try to add a counter, this basically connects the form to the show button, example:
<button id='show' style='float:right' data-counter="0">Reply</button>
<form method='POST' action='' class='reply-form reply-form-0'>
$("#show").click(function(){
var counter = $(this).data("counter");
$(".reply-form-"+counter).show();
});
OK, I have a multiple divs dynamically created in php depending on a variable and I would like to check for each of them if it has a certain class. When I upload an image which will then append the image in the <div id="img-pick">, and add a class allocated. I would like to check if one or any of the divs does not have the allocated class then do an alert and stop the form from being submitted when clicked on the submit button unless all the <div id="img-pick"> have the class allocated to them.
This is my code for the form:
<form action="" method="POST" id="image-form">
<div class="row options-heading"><h3>UPLOAD <?php echo $loopvalue; ?> IMAGES</h3></div>
<div class="row options-content">
<div class="grid-wrapper <?php echo $model; ?> <?php echo $option_style; ?> ui-sortable clearfix">
<?php for ($i = 1; $i <= $loopvalue; $i++) : ?>
<div class="<?php echo $col_setting; ?> grid-item">
<div id="img-pick" class="<?php echo $option_shape; ?>">
<div class="tools">
</div>
</div>
</div>
<?php endfor; ?>
</div>
</div>
<div class="row options-nav-btn">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"><input type="submit" class="btn btn-success pull-right" value="Continue" id="collectImages"></div>
</div>
</form>
And this is the javascript:
$('#collectImages').click(function()
if(!$('#img-pick').hasClass("allocated"))
{
sweetAlert("Oops...", "You haven't finished picking your images", "error");
return false;
}
});
With this script, the alert and the prevent of the submit works only when none of the <div id="img-pick"> has the allocated class, but if one or more, but not all of them, has the allocated class then the alert doesn't seem to work and the form gets submitted anyway...
Use a loop:
$('#collectImages').click(function(e) {
e.preventDefault();
var valid = true;
$('#img-pick').each(function(){
if(!$(this).hasClass("allocated"))
{
valid = false;
}
});
if (!valid) {
sweetAlert("Oops...", "You haven't finished picking your images", "error");
} else {$(this).closest('form').submit();}
});
or:
$('#collectImages').click(function()
if($('#img-pick').length != $("#img-pick.allocated").length)
{
sweetAlert("Oops...", "You haven't finished picking your images", "error");
return false;
}
});
Note: change the id with a class
I'm trying to get the id when I click different messages.
This is my javascript:
$(document).ready(function() {
$('#message-subject-result').click(function(){
var message = document.getElementById('message_id').value;
alert(message);
});
});
I am pulling it from a php function that is:
<div id="message-subject-result">
<div id="message-date">'.$date.'</div>
<input type="hidden" id="message_id" value="'.$row['mes_id'].'"><div id="message-sender-name">FROM: '.$row['firstname'].' '.$row['lastname'].'</div>
<div id="message-subject">SUBJECT: '.$row['subject'].'</div>
<div id="message-preview">'.$row['message'].'</div>
</div>
The javascript works but only when I click on the first echoed result. What am I doing wrong?
Replace duplicating ids with classnames and use find method:
$('.message-subject-result').click(function() {
var messageId = $(this).find('.message_id').val();
alert(messageId);
});
valid HTML should be:
<div class="message-subject-result">
<div clas="message-date">'.$date.'</div>
<input type="hidden" class="message_id" value="'.$row['mes_id'].'">
<div class="message-sender-name">FROM: '.$row['firstname'].' '.$row['lastname'].'</div>
<div class="message-subject">SUBJECT: '.$row['subject'].'</div>
<div class="message-preview">'.$row['message'].'</div>
</div>
You must have all unique ids. Something like this will give you unique id's:
<?php
$i = 0;
foreach($result as $row) { ?>
<div id="message-subject-result">
<div id="message-date">'.$date.'</div>
<input type="hidden" id="message_id<?php echo $i; ?>" value="'.$row['mes_id'].'"><div id="message-sender-name">FROM: '.$row['firstname'].' '.$row['lastname'].'</div>
<div id="message-subject">SUBJECT: '.$row['subject'].'</div>
<div id="message-preview">'.$row['message'].'</div>
</div>
<?php $i++;
} ?>