I have a form made with bootstrap, and a very simple script that post to self, but I can't get it to work, I uploaded to my site, but it is not posting the input fields back in the same page.
here is the script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Contact Us</title>
<!-- Bootstrap -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- stylesheet for this form -->
<link href="contact-stylesheet.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="my-form">
<form class="form-horizontal" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>" >
<div class="form-group" id="hori-form">
<label for="inputEmail3" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-5">
<input type="name" class="form-control" id="inputEmail3" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="inputPassword3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Text:</label>
<div class="col-sm-8">
<textarea class="form-control" rows="7" placeholder="Text"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</div>
</form>
<?php
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"];
?>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You are missing name html attribute for your input tags.
<input type="name" name="name" class="form-control" id="inputEmail3" placeholder="Name">
and this part of your page must change also
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"];?>
Related
How to make it so that when you access a simple page like CONTACT.PHP, it already comes with the main html embedded (TEMPLATE.PHP): Example:
PAGE CONTENT "CONTACT.PHP"
<form method="post" autocomplete="off" class="logg">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="form-group">
<label for="aaa" class="control-label">Name</label>
<input name="name" type="text" class="form-control" value="" required/>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="form-group">
<label for="aaa" class="control-label">Email</label>
<input name="email" type="email" class="form-control" value="" required/>
</div>
</div>
</div>
<button type="submit" class="btn btn-success pull-right"> Save </button>
</form>
PAGE CONTENT "TEMPLATE.PHP"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- PAGE CONTENT BEGINS -->
<?= contact page here ?> <<<<<<<<<<<<<<<<<<<<<<<<<<<<
<!-- PAGE CONTENT ENDS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Operation:
When the contato.php page is accessed, the template would also be loaded so that the layout is fully assembled.
I want my code once press submit to be redirected to another website.
I want this to be done through a PHP script so it can be expanded.
The problem is that when I test the code the PHP script is loaded in the browser with a blank page instead of redirecting it to the web I want.
I leave you my current code:
SIGN_IN.HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://getbootstrap.com/docs/4.0/assets/img/favicons/favicon.ico">
<title>Signin Template for Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/signin.css" rel="stylesheet">
</head>
<body class="text-center">
<div class="form-signin">
<form action="post.php">
<img class="mb-4" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<input class="btn btn-lg btn-primary btn-block" type="submit" value="Sign in"/>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</div>
</body>
</html>
POST.PHP
<?php
header ("Location: https://getbootstrap.com/docs/4.0/examples/sign-in/");exit;
?>
PD:As you can see, the page is an example website, I do not intend to carry out any cybercrime, just learn
Thanks
I think your file is Capital letter, right? It should be post.php, not POST.php.
Please check again.
I've tested your code with post.php. It works well.
For laravel project i use a metarial design bootstrap(MDBootstrap) template. use this template for master design and if i need to add somthing then i use #yeild(''). every thing is fine but if want to add radio button in form, this button is not showing in page.
here is my head what master.blade.php used..
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Scripts -->
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="metarial/css/mdb.min.css" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="metarial/bootstrap.min.css" rel="stylesheet">
at last of the body...
<script type="text/javascript" src="metarial/js/jquery-3.2.1.min.js"></script>
<!-- Tooltips -->
<script type="text/javascript" src="metarial/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
{{--
<script type="text/javascript" src="metarial/js/bootstrap.min.js"></script> --}}
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="metarial/js/mdb.min.js"></script>
<script>
// SideNav Initialization
$(".button-collapse").sideNav();
new WOW().init();
</script>
Form is...
<form role="form" action="{{url('/children/add')}}" method="post" enctype="multipart/form-data">
#csrf
<div class="form-group ml-4 mr-4">
<div class="row">
<div class="col-6">
<label for="name">First Name</label>
<input value="{{ old('firstName') }}" name="firstName" type="text" class="form-control" id="first" placeholder="First Name">
</div>
<div class="col-6">
<label for="name">Last Name</label>
<input value="{{ old('lastName') }}" name="lastName" type="text" class="form-control" id="last" placeholder="Last Name">
</div>
</div>
</div>
<div class="radio form-group ml-4 mr-4">
<label><input type="radio" name="optradio">Male</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Female</label>
</div>
<div class="form-group ml-4 mr-4">
<label for="Birthday">Birthday</label>
<input name="birthday" type="date" class="form-control" id="birthday">
</div>
<div class="form-group ml-4 mr-4">
<label for="image">Profile Image</label>
<input type="file" name="image" class="form-control" id="image">
</div>
<button type="submit" style="background-color:#2DAE60;" class="btn">
<i class="fa fa-plus"></i> ADD </button>
</form>
picture of this page where radio button missing but text 'Male','Female' is remaining...
can anyone help me please?
Try changing this:
<div class="radio">
<label><input type="radio" name="optradio">Female</label>
</div>
To this:
<div class="radio">
<input type="radio" id="female-rb" name="optradio" />
<label for="female-rb">Female</label>
</div>
When using labels you should define for which radio button the label applies. You do this by adding the for attribute and let it referring the id of the radio button. To correctly render the radio button you should place the input first and then the label.
I am designing page in CI framework and have correctly included files but the css is not getting applied even though browser shows its calling them correctly..not sure where I am going wrong.
Below is the code I have written:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
<title>login</title>
<?php include_once 'header.php'; ?>
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-login mx-auto mt-5">
<div class="card-header">Please enter your login details:</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="name">Username</label>
<input class="form-control" placeholder="User name" name="name" type="text" id="name" autofocus>
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" id="password" type="password" placeholder="Password" id="password">
</div>
<div>
<input type="submit" name="submit" value="Login" class="btn btn-lg btn-success btn-block">
</div>
</form>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="<?php echo base_url('assets/vendor/jquery/jquery.min.js');?>"></script>
<script src="<?php echo base_url('assets/vendor/bootstrap/js/bootstrap.bundle.min.js');?>"></script>
<!-- Core plugin JavaScript-->
<script src="<?php echo base_url('assets/vendor/jquery-easing/jquery.easing.min.js');?>"></script>
</body>
</html>
When I click on browser by pressing F12 I get this :
<!DOCTYPE html>
<html lang="en">
<head>
<title>login</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS-->
<link href="http://localhost/polyropes_new/assets/vendor/bootstrap/css/bootstrap.min.css">
<!-- Custom fonts for this template-->
<link href="http://localhost/polyropes_new/assets/vendor/font-awesome/css/font-awesome.min.css">
<!-- Page level plugin CSS-->
<link href="http://localhost/polyropes_new/assets/vendor/datatables/dataTables.bootstrap4.css">
<!-- Custom styles for this template-->
<link href="http://localhost/polyropes_new/assets/css/sb-admin.css">
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-login mx-auto mt-5">
<div class="card-header">Please enter your login details:</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="name">Username</label>
<input class="form-control" placeholder="User name" name="name" type="text" id="name" autofocus>
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" id="password" type="password" placeholder="Password" id="password">
</div>
<div>
<input type="submit" name="submit" value="Login" class="btn btn-lg btn-success btn-block">
</div>
</form>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="http://localhost/polyropes_new/assets/vendor/jquery/jquery.min.js"></script>
<script src="http://localhost/polyropes_new/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="http://localhost/polyropes_new/assets/vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
This shows all files and CSS have been called correctly as none of them is blank.Please guide me
Hello i made this script can't send email. I use postfix (yeah i know but i want to use postfix) Any ideas? It sends me the email but without the content of the variables.
Thank you:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<h2 align="center"> Whitelist Request Form </h2>
<div class="col-lg-offset-3 col-xs-12 col-lg-6">
<div class="jumbotron">
<div class="row text-center">
<div class="text-center col-xs-12 col-sm-12 col-md-12 col-lg-12"> </div>
<div class="text-center col-lg-12">
<!-- CONTACT FORM https://github.com/jonmbake/bootstrap3-contact-form -->
<form role="form" id="feedbackForm" class="text-center" action="send_whitelist.php">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
<span class="help-block" style="display: none;">Please enter your name.</span></div>
<div class="form-group">
<label for="email">E-Mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address">
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span></div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Minecraft Username"></div>
<div class="form-group">
<label for="paysafe">Paysafe</label>
<input type="number" class="form-control" id="paysafe" name="paysafe" placeholder="XXXX-XXXX-XXXX-XXXX">
<span class="help-block" style="display: none;">Please enter a valid Paysafe number.</span></div>
<button type="submit" id="submit" class="btn btn-primary btn-lg" style=" margin-top: 10px;"> Send</button>
</form>
<!-- END CONTACT FORM -->
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<footer class="text-center">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>Copyright © NickTehPro 2015. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
send_whitelist.php
<?php
$username = $_POST['username'];
$name = $_POST['name'];
$paysafe = $_POST['paysafe'];
$email = $_POST['email'];
// Contact subject
$subject ="Minecraft Server Whitelist Request";
// Details
$message="Name: $name \nUsername: $username \nPaysafe: $paysafe ";
// Mail of sender
$mail_from="$email";
// From
$header="from: $name <$mail_from>";
// Enter your email address
$to ='nikospower1999#gmail.com';
$send_contact=mail($to,$subject,$message,$header);
// Check, if message sent to your email
// display message "We've recived your information"
if($send_contact){
echo "<h2 align="center"> I have received your whitelist request. Please wait.</h2>";
}
else {
echo "ERROR";
}
?>
Without setting form method attribute form is submitted via GET.
So you should set method="post".