I've recently completed a simple login form with php and mysql.
Now I am heading onto the styling part which I am not too familiar with.
Login form code:
<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action="" method="post">
<div class="form-group has-feedback"><input class="form-control"
name="user_key" placeholder="XXXX-XXXX-XXXX-XXXX" type="text" /></div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck"><label><input type="checkbox" /> Remember Me
</label></div></div>
<!-- /.col -->
<div class="col-xs-4"><button class="btn btn-primary btn-block btn-flat"
name="submit" type="submit">Sign In</button></div>
<!-- /.col --></div>
</form>
Login form screenshot:
http://prntscr.com/afrajr
I was thinking maybe echoing it to display an outline around the box which is red when their is no valid key in the mysql table but i'm not sure how to.
Related
I am writing a php file, where I want to display a different content within an existing html element when a get variable is set.
Now what i want is to set the word " Password Reset Was Success" instead of "Enter your Email to reset the password" or add a new <p> tag containing the required words by hiding current <p> tag when the GET variable is set. But I have no idea of how to do this. I checked different times, but I failed. I really appreciate if some one can help me to do this.
here is my code.
<div class="login-box-body">
<!--Want to replace this text as Password Reset Was Success or add a new <p> tag containing the required words by hiding current <p> tag -->
<p class="login-box-msg">Enter your Email to reset the password</p>
<?php require '_inc/msg.php' ?>
<!-- Check if GET variable is set or not -->
<?php if (isset($_GET['code'])) {
echo '<style>.formPsw{ display:none;}</style>';
} ?>
<form action="" method="post" class="formPsw">
<div class="form-group has-feedback emailBox" >
<input type="email" name="email" class="form-control" placeholder="Email" data-validation="email required">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
</div>
<!-- /.col -->
<div class="col-xs-4 sendEmailBtn">
<input type="submit" name="send" class="btn btn-primary btn-block btn-flat" value="send"/>
</div>
<!-- /.col -->
</div>
</form>
<?php if (!empty($_POST['send'])) {
echo 'Please check your email ('.$_POST['email'].'). We send password reset link to your email.';
} ?>
</div>
You just need to wrap inside if condition:
<div class="login-box-body">
<?php if(isset($_GET['the_get_var_you_are_expecting'])){ ?>
<p class="success">Password Reset Was Success</p>
<?php } else { ?>
<!--Want to replace this text as Password Reset Was Success or add a new <p> tag containing the required words by hiding current <p> tag -->
<p class="login-box-msg">Enter your Email to reset the password</p>
<?php require '_inc/msg.php' ?>
<!-- Check if GET variable is set or not -->
<?php if (isset($_GET['code'])) {
echo '<style>.formPsw{ display:none;}</style>';
} ?>
<form action="" method="post" class="formPsw">
<div class="form-group has-feedback emailBox" >
<input type="email" name="email" class="form-control" placeholder="Email" data-validation="email required">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
</div>
<!-- /.col -->
<div class="col-xs-4 sendEmailBtn">
<input type="submit" name="send" class="btn btn-primary btn-block btn-flat" value="send"/>
</div>
<!-- /.col -->
</div>
</form>
<?php if (!empty($_POST['send'])) {
echo 'Please check your email ('.$_POST['email'].'). We send password reset link to your email.';
} ?>
<?php } ?>
</div>
I have 8 buttons, each button can be clicked, when you made your selection you go search, after you searched I need to show pictures based on what buttons are clicked before searching. I already have button that has be choosen in a array in PHP, but I dont know how to show the picture that has to be showed of depending on what buttons are used.
<form id="search" action="programmer.php" method="get">
<div data-toggle="buttons">
<div class="container">
<div class="row">
<div class="col-sm-4">
<label class="btn btn-primary btn-block btn-lg-lg">
<input type="checkbox"style="display: none;" name="lang[]" value="html" autocomplete="off">HTML
</label>
</div>
<div class="col-sm-4">
<label class="btn btn-primary btn-block btn-lg-lg">
<input type="checkbox" style="display: none;" name="lang[]" value="css" autocomplete="off">CSS
</label>
</div>
<div class="col-sm-4">
<label class="btn btn-primary btn-block btn-lg-lg">
<input type="checkbox" style="display: none;" name="lang[]" value="javascript" autocomplete="off">Javascript
</label>
</div>
</div>
</div>
<div class="container">
<input type="submit" value="Search" class="btn btn-primary btn-lg btn-block" >
</div>
This is the PHP only showing off that I got the arrays:
<?php
print_r($_GET["lang"]);
?>
Remove style="display: none;" so that checkbox are visible in the web page.Insert the name of your images in value attribute of the checkbox. When you will click on search button all the images selected in checkbox list will be displayed on the next web page.
Add following code to the programmer.php
<?php
$path_to_img_dir="path1/";
$arr=$_GET['lang'];
foreach($arr as $val){
echo sprintf("<img src='%s%s.jpg' /><br>",$path_to_img_dir,$val);
}
?>
You can save the path in a variable in php and the use it in the html code <img src='<?php echo $path;?>'>
My submit button suddenly stopped working. It submits data into a MySQL database.
While I was doing some design changes, it suddenly stopped working.
Are there any apparent errors/mistakes in the code below?
I'm a noob who's currently trying to learn some PHP and so on, so any help would be much appreciated. :)
<section id="moviesearch">
<!-- Section -->
<div class="subcribe2">
<div class="container">
<!-- Container -->
<div class="row">
<!-- Row -->
<div class="col-md-4">
</div>
<body ng-app="myApp">
<div ng-controller="MyCtrl" class="col-md-4">
<form class="form-watch-list-create">
<input required="required" placeholder="Movie title" type="text" class="form-control" typeahead="item.Title for item in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-min-length="2" typeahead-wait-ms="1000" typeahead-on-select="onSelected($item)"
typeahead-template-url="customTemplate.html" ng-model="asyncSelected">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-block btn-sm btn-dark">Add to watchlist</button>
</div>
</body>
</div>
<!-- End Row -->
</div>
<!-- End Container -->
</div>
<script type="text/ng-template" id="customTemplate.html">
<a>
<span bind-html-unsafe="match.label | typeaheadHighlight:query" style="width: auto;"></span>
({{match.model.Year}})
<!-- <img ng-src="{{match.model.Poster}}" width="120"> -->
</a>
</script>
<div ng-controller="MyCtrl">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>
</section>
Edit
Here's the code that sends data into the MYSQL database:
function addWatchList() {
if (isset($_GET['addtowatchlist'])) {
$name = $_GET['name'];
$conn = dbmysql();
$query ="INSERT INTO watch_list values(null,'{$name}','{$_SESSION['user_id']}','NOW()')";
if (mysqli_query($conn,$query)) {
$last = "SELECT * FROM watch_list WHERE created_by = '{$_SESSION['user_id']}' order by id desc limit 1";
$data = mysqli_query($conn,$last);
while ($row = mysqli_fetch_assoc($data)) {
include "_view.php";
}
}else {
echo "An error occurred. Please try again.";
}
exit;
}
}
I am looking to your code, missing attribute action="somefile.php" and method="get" if you are planning on submitting it using the form, you should put it or if you are planning on submitting your code using javascript you can use <form onsubmit="myFunction()"> That is what you are missing. I am not seeing you addtowatchlist name from your input so that php can catch it to your isset.
The submit button isn't inside the form.
You're missing the </form> tag to end the <form>. But you have </div> that matches the <div> just before </form>, so it's implicitly closing the <form> tag as well. Then you have <input type="submit"> after it. Since the submit button isn't inside the form, and has no form tag associating it with the form, it doesn't know which form it should submit when you click on it.
Try this:
<form class="form-watch-list-create">
<div ng-controller="MyCtrl" class="col-md-4">
<input
required="required"
placeholder="Movie title"
type="text"
class="form-control"
typeahead="item.Title for item in getLocation($viewValue)"
typeahead-loading="loadingLocations"
typeahead-min-length="2"
typeahead-wait-ms="1000"
typeahead-on-select="onSelected($item)"
typeahead-template-url="customTemplate.html"
ng-model="asyncSelected">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-block btn-sm btn-dark">Add to watchlist</button>
</div>
</form>
This puts the form around both columns.
Use the method attribute in form tag and end the form tag properly
<form role="form" method="get" class="form-watch-list-create">
<div ng-controller="MyCtrl" class="col-md-4">
<input
required="required"
placeholder="Movie title"
type="text"
class="form-control"
typeahead="item.Title for item in getLocation($viewValue)"
typeahead-loading="loadingLocations"
typeahead-min-length="2"
typeahead-wait-ms="1000"
typeahead-on-select="onSelected($item)"
typeahead-template-url="customTemplate.html"
ng-model="asyncSelected">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-block btn-sm btn-dark">Add to watchlist</button>
</div>
</form>
So I'm working on a social networking Facebook type proof of concept project for college and I'm trying to get a Bootstrap, multi-button input group to display properly for a comment box.
I would like to have the text area, with a Comment and Like button on the right hand side, with the whole input group filling the width of the panel as seen below.
Trying to achieve this!
The problem is when I add in my <form> tags, the formatting of the entire group within <div class="row"> goes crazy and forms a little box on the left hand side (screenshot below).
If I take out the <form> tags formats properly, but I'm just not sure how to manage the <form> tags/where to put them to achieve this multi-button group.
How it displays currently
The code below is a few undos later to when the forms weren't broken, just so you know this isn't how I originally went about achieving it, but what i've succumbed to for now.
If anyone knows how to achieve this I'd be so grateful!
while($row = mysqli_fetch_assoc($result)) {
//Get relative timestamp for current post
$timestamp = strtotime($row['StatusTimestamp']);
$stampRelative = CheckTimestamp($timestamp);
echo '<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">'.$row['UserName'].'<small class="postTimestamp"> '.$stampRelative.'</small></h3>
</div>
<div class="panel-body">
'.$row['StatusContent'].'
</div>
<div class="panel-footer clearfix">';
echo ' <div class="row">
<div class="col-lg-11">
<div class="input-group">
<form action="'.CommentOnStatus($row['StatusID']).'" method="post">
<input type="text" class="form-control" name="comment" placeholder="Post a comment...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Comment</button>
<input type="hidden" name="statusId" value="'.$row['StatusID'].'">
</span>
</form>
</div>
</div>
<div class="col-lg-1">
<form action="'.LikeStatus($row['StatusID']).'" method="post">
<button type="submit" id="like" name="'.$row['StatusID'].'" class="btn btn-primary pull-right">Like</button>
</form>
</div>
</div>
</div>
</div>';
}
I checked your code. This should work fine. Let me know if this does not work. THere are minor problems of placing the elements. Please Use this in your row :
<div class="col-lg-11">
<form method="post">
<div class="input-group">
<input type="text" class="form-control" name="comment" placeholder="Post a comment...">
<span class="input-group-btn">
<button class="btn btn-default" style="border-width: 1px 0 1px 0;border-radius: 0;" type="submit">Comment</button>
<button type="submit" id="like" name="'" class="btn btn-primary" style="border-radius: 0 5px 5px 0;">Like</button>
</span>
<input type="hidden" name="statusId" value="">
</div>
</form>
</div>
This is my output
Use the classnavbar-form in your form. It should work fine now.
So form will look like <form action="'.CommentOnStatus($row['StatusID']).'" method="post" class="navbar-form">
I have some portlets here that has an ID for each of it. What I'm trying to do is to pass these IDs to a popup modal after pressing an Add button in the portlet.
Here is the portlet view:
#foreach($portlets as $portlet)
<div class="box span4">
<div class="box-header well" data-original-title>
<h2><i class="icon-th"></i> {{$portlet->portlet_title}} </h2>
</div>
<div class="box-content">
<div class="row-fluid">
// some contents over here
</div>
<div class="box-icon">
<i class="icon-plus-sign"></i>
</div>
</div>
</div>
#endforeach
Notice the Add New Link button at the bottom of the code, when I press that, a modal will appear. Here is the view of it:
<div class="modal hide fade" id="linkSettings">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Add New Link</h3>
</div>
<form method="post" action="{{ URL::to('addlink') }}" >
<div class="modal-body">
<div class="control-group">
<label class="control-label" for="focusedInput">Link Title:</label>
<div class="controls">
<input class="input-xlarge focused" id="link_title" name="link_title" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Add A Link:</label>
<div class="controls">
<input class="input-xlarge focused" id="link_url" name="link_url" placeholder="eg. http://www.example.com/" type="text">
</div>
</div>
</div>
<div class="modal-footer">
Close
<input type="submit" id="submit" name="submit" value="Submit" class="btn btn-primary">
</div>
</form>
</div>
This modal has a form in it to be processed in the controller. But how do I send the portlet ID to this modal so that it can be stored in the database during processing in the controller? Because I want it to automatically know what portlet I want to add links in it. Any idea?
If anything, please let me know.
You could attach a jQuery event handler to clicking the "Add New Link" button, and use it to populate a hidden field in the modal view.
i.e. something like:
$("a.new_link").click(function(){
portlet_id = $(this).parent().parent().attr("id");
$("div.modal form input.my_hidden_field").val(portlet_id)
});
And somewhere in the <form> for the modal:
<input type="hidden" name="portlet_id" class="my_hidden_field"/>
Then, you just need to get the portlet_id POST parameter with Laravel/PHP to determine the portlet ID that was used.
Edit
Revised handler based on the code you gave:
$('.btn-settingLink').click(function(e){
e.preventDefault();
$('#linkSettings').modal('show');
// get the portlet_id and modify the midden field
portlet_id = $(this).parent().parent().attr("id");
$("div.modal form input.my_hidden_field").val(portlet_id)
});