No POST request when submitting form - html

The following is signup.html when a user fills the form fields then presses on the button or pressing the ENTER key nothing happens and Flask only shows the GET requests that were made to get the page before filling users
No POST request is being made
changing action="{{url_for('UI.signup')}}" TO action='/signup' does not fix the problem
{% block content%}
<section class="vh-100" style="background-color: #eee;">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-12 col-xl-11">
<div class="card text-black" style="border-radius: 25px;">
<div class="card-body p-md-5">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
<p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>
<form action="{{url_for('UI.signup')}}" method="POST" class="mx-1 mx-md-4" >
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-user fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input name="username" type="text" id="form3Example1c" class="form-control" />
<label class="form-label" for="form3Example1c">Username</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input name="email" type="email" id="form3Example3c" class="form-control" />
<label class="form-label" for="form3Example3c">Email</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-lock fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input name='passwrd1' type="password" id="form3Example4c" class="form-control" />
<label class="form-label" for="form3Example4c">Password</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-key fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input name='passwrd2' type="password" id="form3Example4cd" class="form-control" />
<label class="form-label" for="form3Example4cd">Repeat your password</label>
</div>
</div>
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
<button type="button" class="btn btn-primary btn-lg">Register</button>
</div>
</form>
</div>
<div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
<img src="{{url_for('UI.static', filename='.jpg')}}" class="img-fluid" alt="Sample image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock%}
I wish to use this exact html for the signin page but for some reason it is not creating post requests after filling the data

<button type="button" class="btn btn-primary btn-lg">Register</button>
type="button" creates a button that doesn't do anything. It exists solely to hook JavaScript onto.
Take that out (type="submit" is the default) and the button will submit the form when clicked.

Related

Adding foreach loop in my view Razor page

I use the below code for my view Razor page and it works completely, but when I added my foreach loops based on my project's needs ,It does not show anything when I run the project. I want to help me to find my error in order to fix post form tag functionality.
#page
#model PracticeWithVideo.Pages.Admin.Order.ManageOrderModel
<h1
class="text-primary py-3">Manage Order's</h1> <form method="post">
<div class="container row bg-white p-2 mb-3 rounded">
<div class="col-12 pb-3 pt-3 mt-4 border rounded">
<div class="row">
<div class="col-4">
Order Number : xxx
<ul class="text-info">
</ul>
</div>
<div class="col-4 pb-2">
<div class="input-group pb-2">
<div class="input-group-append">
<span class="input-group-text bg-secondary border">Time</span>
</div>
<input type="text" class="form-control" readonly />
</div>
<textarea readonly class="rounded border form-control" rows="3"></textarea>
</div>
<div class="col-3 offset-1 d-flex align-content-center">
<div class="col-12">
<button type="submit" class="btn btn-primary form-control mb-3">
<i class="bi bi-check-square"></i> Start Cooking
</button>
<button type="submit" class="btn btn-success form-control mb-3">
<i class="bi bi-emoji-laughing"></i> Order Ready
</button>
<button type="submit" class="btn btn-warning form-control mb-3">
<i class="bi bi-x-square-fill"></i> Cancel Order
</button>
</div>
</div>
</div>
</div>
</div>
</form>
and this is my code with foreach loops:
#page
#model PracticeWithVideo.Pages.Admin.Order.ManageOrderModel
<h1 class="text-primary py-3">Manage Order's</h1>
<form method="post">
<div class="container row bg-white p-2 mb-3 rounded">
#foreach (var item in Model.OrderDetailVM)
{
<div class="col-12 pb-3 pt-3 mt-4 border rounded">
<div class="row">
<div class="col-4">
Order Number: #item.OrderHeader.Id
<ul class="text-info">
#foreach (var details in item.OrderDetails)
{
<li>#details.Name x #details.Count</li>
}
</ul>
</div>
<div class="col-4 pb-2">
<div class="input-group pb-2">
<div class="input-group-prepend">
<span class="input-group-text bg-secondary border">Time</span>
</div>
<input type="text" value="#item.OrderHeader.PickUpTime" class="form-control" readonly />
</div>
<textarea readonly asp-for="#item.OrderHeader.Comments" class="rounded border form-control" rows="3"></textarea>
</div>
<div class="col-3 offset-1 d-flex align-content-center">
<div class="col-12">
<button type="submit" class="btn btn-primary form-control mb-3">
<i class="bi bi-check-square"></i> Start Cooking
</button>
<button type="submit" class="btn btn-success form-control mb-3">
<i class="bi bi-emoji-laughing"></i> Order Ready
</button>
<button type="submit" class="btn btn-warning form-control mb-3">
<i class="bi bi-x-square-fill"></i> Cancel Order
</button>
</div>
</div>
</div>
</div>
}
</div>
</form>

Get Bootstrap Icons to Render

I'm trying to use this bootstrap signup template here, but when I render it the icons for the user, email, password, etc. are missing.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<section class="vh-100" style="background-color: #eee;">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-12 col-xl-11">
<div class="card text-black" style="border-radius: 25px;">
<div class="card-body p-md-5">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
<p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>
<form class="mx-1 mx-md-4">
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-user fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="text" id="form3Example1c" class="form-control" />
<label class="form-label" for="form3Example1c">Your Name</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="email" id="form3Example3c" class="form-control" />
<label class="form-label" for="form3Example3c">Your Email</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-lock fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4c" class="form-control" />
<label class="form-label" for="form3Example4c">Password</label>
</div>
</div>
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-key fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="password" id="form3Example4cd" class="form-control" />
<label class="form-label" for="form3Example4cd">Repeat your password</label>
</div>
</div>
<div class="form-check d-flex justify-content-center mb-5">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3c" />
<label class="form-check-label" for="form2Example3">
I agree all statements in Terms of service
</label>
</div>
<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
<button type="button" class="btn btn-primary btn-lg">Register</button>
</div>
</form>
</div>
<div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/draw1.webp"
class="img-fluid" alt="Sample image" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
When I render it via the code snippet plugin on stack overflow it just removes the icons entirely, but if you look at the example at the link you can see the icons, but what I get on my project is broken image indicators in place of the icons. It's not clear to me from the HTML though where the icons are loaded (unlike e.g. the image where it's super clear). How do I get it to correctly render the icons?
The icons you are trying to use i think are part of MDBootstrap that is a UI kit built on Bootstrap, so if you want the icons to render properly you got to include MDBootstrap in your project.
If you don't want to use that you can always use official Bootstrap 5 icons (https://icons.getbootstrap.com/, https://getbootstrap.com/docs/5.1/extend/icons/) or the recommended by Bootstrap developers Fontawesome icons (https://fontawesome.com/)

How to create grouped html5 passengers count

I am in need of your expertise to create these particular input fields like on the image below:
Can someone help me here to create it?
I have a bit of code but it is not working like on the image
<div class="col-lg-1 pr-0">
<div class="input-box">
<label class="label-text">Passengers</label>
<div class="form-group">
<div class="dropdown dropdown-contain">
<a class="dropdown-toggle dropdown-btn" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
<i class="la la-user form-icon"></i>
<span><span class="guest_flights d-block text-center">0</span></span>
</a>
<div class="dropdown-menu dropdown-menu-wrap">
<div class="dropdown-item adult_qty">
<div class="qty-box d-flex align-items-center justify-content-between">
<label>
<i class="la la-user"></i> Adults <!--<small>(+12)</small>-->
</label>
<div class="qtyBtn d-flex align-items-center">
<input type="text" name="adults" id="fadults" value="1" class="qtyInput_flights">
</div>
</div>
</div>
<div class="dropdown-item child_qty">
<div class="qty-box d-flex align-items-center justify-content-between">
<label>
<i class="la la-female"></i> Childs <!--<small>(-12)</small>-->
</label>
<div class="qtyBtn d-flex align-items-center">
<input type="text"name="childs" id="fchilds" value="0" class="qtyInput_flights">
</div>
</div>
</div>
<div class="dropdown-item infant_qty">
<div class="qty-box d-flex align-items-center justify-content-between">
<label>
<i class="la la-female"></i> Infants <!--<small>(-12)</small>-->
</label>
<div class="qtyBtn d-flex align-items-center">
<input type="text" name="childs" id="finfant" value="0" class="qtyInput_flights">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Problem with Bootstrap 4 Responsive image (imag-fluid)

I created a login in page using a bootstrap grid with an image col-lg-8 and the form col-lg-4. The problem is that when I minimize the screen for smaller devices, the contents are supposed to respond and span 12 each as usual. However, the image always overflows to the top and is cut off. Yes, I used img-fluid on the image.
<section class="Form mx-4 h-100">
<div class="container h-100 d-flex">
<div class="row no-gutters h-80 align-self-center row-eq-height" id="slide-container">
<div class="col-lg-8 my-auto responsive py-5">
<img src="Athlete 1.png" alt="This is America" class="img-fluid border-right">
</div>
<div class="col-lg-4 px-4 my-auto sign-in sign-in-up">
<div class="row no-gutters">
<div class="col-12 d-flex justify-content-center align-items-center">
<div class="col-2 px-0">
<img src="Athlete 3.png" alt="Logo" class="img-fluid rounded-circle">
</div>
<div class="col-7 align-self-center mb-0 px-0">
<h2>Side-Gym</h2>
</div>
</div>
<div class="col-12 text-center text-secondary mt-2">
<h4>Members Login</h4>
</div>
</div>
<form>
<div class="form-group">
<label for="email">Email</label>
<input type="email" placeholder="Enter Your Email..." name="email" id="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" placeholder="Password" name="password" id="password" class="form-control">
</div>
<button type="submit" class="btn btn-outline-primary btn-block mt-4 mb-1">Login</button>
<button type="button" class="btn btn-link btn-block" disabled>--------or--------</button>
<button id="register" type="button" class=" btn-regis btn btn-primary btn-block mt-1 mb-3">Register</button>
Forgot Password?
<div class="mb-4 textlink text-center formaer-dropdown">
<p class="d-inline">Don't have an account? </p>
Register Here!
</div>
</form>
</div>
</section>
If you really need height: 100vh; for the body add overflow-y: scroll; with it at #media(min-width: 992px) AND REMOVE all the h-100 & h-80 classes, otherwise the overflow-y: scroll; won't work

Issue with Input element shrinking too much as browser resizes

I have a contact form (a bunch of input/span elements) nested in a Boostrap col. As the browser shrinks, the input fields shrink to an undesirable size.
I have tried adding various col-breakpoints, which sort-of works, but it looks funky and still shrinks too much until it hits the breakpoint. I have also looked for a way to specify a min-width of sorts, but haven't had luck with that either.
<!-- Custom CSS -->
.input-group-text {
width: 40px;
}
.input-group-text span {
margin: 0 auto;
}
.body-main-bg {
background-color: #eeeeee;
}
<!-- Contact Form -->
<div class="container-fluid">
<div class="row body-main-bg justify-content-center">
<div class="col-4 my-3 text-center">
<h4>Contact Us</h4>
</div>
</div>
<form id="contact-form" method="" action="">
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-user"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Name">
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-envelope"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-ellipsis-v"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Subject">
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-pencil"></span>
</span>
</div>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message"></textarea>
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<button class="btn btn-primary btn-block" type="submit">Submit</button>
</div>
</div>
</form>
</div>
If you change col-4 to col-lg-4 or col-md-4 you will have the desired layout.
The issue is that with col-4 you are essentially saying "stay this width on all devices". When col-lg-4 or col-md-4 are responsive and set divs to be 100% on large/medium devices and down.
See bootstraps grid options here: https://getbootstrap.com/docs/4.3/layout/grid/