I am new to the Express and Bootstrap. Today, I was trying to create a form for logging in. The form will trigger a POST request to the server and I want to send a new HTML page whenever a POST request is sent but there is always a problem "The page isn't working".
This is my HTML form:
<section class="h-100">
<div class="container h-100" style="margin-top: 50px; ">
<div class="row justify-content-md-center h-100" >
<div class="card-wrapper">
<div class="card fat">
<div class="card-body">
<h3 class="card-title">Login</h3>
<form method="POST" class="my-login-validation" novalidate="">
<div class="form-group">
<label for="email">E-Mail Address</label>
<input id="email" type="email" class="form-control" name="email" value="" required autofocus>
<div class="invalid-feedback">
Email is invalid
</div>
</div>
<div class="form-group">
<label for="password">Password
</a>
</label>
<a href="forgot.html" style="float: right">
Forgot Password?
</a>
<input id="password" type="password" class="form-control" name="password" required data-eye>
<div class="invalid-feedback">
Password is required
</div>
</div>
<div class="form-group m-0">
<button type="submit" class="btn btn-primary btn-block">
Login
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
And this is my Express where I try to respond the form with a new html page:
router.post("/index.html", function(req, res, next){
res.send(`
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Practical Excercise 3 - Part 3</title>
</head>
<body>
<p> Thanh Toan </p>
</body>
</html>
`);
});
When a login button in HTML is clicked, a POST request is sent. When the server receive a POST request, I want to send back a new HTML page but a problem occur. Can anyone tell me where the problem is?
Thanks you all in advance!
REMEMBER TO TURN THE SERVER ON npm start
Have a good day!
Related
I wrote this simple form that should require the users to input their phone number if the submit button is hit. Instead, nothing happens. Can someone please help me?
Here is the code for my form:
<form id="subscribeForm" method="POST" novalidate="novalidate">
<div class="payment margin-top-30">
<div class="payment-tab payment-tab-active">
<div class="payment-tab-trigger">
<input checked id="{PAYMENT_TYPES.folder}"
class="payment_method_id" name="payment_method_id"
type="radio"
value="{PAYMENT_TYPES.id}" data-name="m-pesa2">
<label for="{PAYMENT_TYPES.folder}">{PAYMENT_TYPES.title}</label>
<img class="payment-logo {PAYMENT_TYPES.folder}"
src="{SITE_URL}includes/payments/{PAYMENT_TYPES.folder}/logo/logo.png"
alt="{PAYMENT_TYPES.title}">
</div>
<div class="payment-tab-content">
<p>
A Push notification shall be sent to the Phone
Number to complete payment.
</p>
<div class="payment-tab-content">
<div class="row payment-form-row">
<div class="col-12">
<div class="card-label form-group">
<input type="text" class="form-control"
name="phone" placeholder="Phone Number" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" name="Submit" class="button big ripple-effect
margin-top-40 margin-bottom-65 subscribeNow"
id="subscribeNow">submit</button>
</form>
Remove novalidate="novalidate" from <form>
I am learning django and have built a very basic profile form, I am experiencing a strange issue during page load.
The profile page has a password change form which is at the page bottom and during the browser loading, it auto-navigates to this form and enters the first input field of the form?
Has anyone experienced this and if so how do i prevent this from occurring?
Form on load:
<div class="col-lg-4">
<div class="block">
<!-- Table Styles Title -->
<div class="block-title">
<h2><strong>Change Password</strong></h2>
</div>
<p>Change your password here!</p
<form action="/profile/change_password/" method="post" class="form-horizontal">
<input type="hidden" name="csrfmiddlewaretoken" value="Azuwo63bFBZyum9WJSwwp8gwNcdBKw0cvURhLHoZcVDTsq7ecAJArZTYFE0dHleB">
<div class="col-xs-12">
<div id="div_id_old_password" class="form-group">
<label for="id_old_password" class=" requiredField">
Old password<span class="asteriskField">*</span> </label>
<div class="">
<input type="password" name="old_password" autocomplete="current-password" autofocus class="textinput textInput form-control" required id="id_old_password"> </div>
</div>
<div id="div_id_new_password1" class="form-group">
<label for="id_new_password1" class=" requiredField">
New password<span class="asteriskField">*</span> </label>
<div class="">
<input type="password" name="new_password1" autocomplete="new-password" class="textinput textInput form-control" required id="id_new_password1"> <small id="hint_id_new_password1" class="form-text text-muted"><ul><li>Your password can’t be too similar to your other personal information.</li><li>Your password must contain at least 8 characters.</li><li>Your password can’t be a commonly used password.</li><li>Your password can’t be entirely numeric.</li></ul></small> </div>
</div>
<div id="div_id_new_password2" class="form-group">
<label for="id_new_password2" class=" requiredField">
New password confirmation<span class="asteriskField">*</span> </label>
<div class="">
<input type="password" name="new_password2" autocomplete="new-password" class="textinput textInput form-control" required id="id_new_password2"> </div>
</div>
</div>
<!-- Form Buttons -->
<div class="form-group form-actions">
<div class="col-xs-12 text-right">
<button type="submit" class="btn btn-sm btn-success"> Change Password</button>
</div>
</div>
<!-- END Form Buttons -->
</form>
</div>
Django Template:
<div class="col-lg-4">
<div class="block">
<!-- Table Styles Title -->
<div class="block-title">
<h2><strong>Change Password</strong></h2>
</div>
<p>Change your password here!</p>
<form action="{% url 'change_password'%}" method="post" class="form-horizontal">
{% csrf_token %}
<div class="col-xs-12">
{{ passform|crispy }}
</div>
<!-- Form Buttons -->
<div class="form-group form-actions">
<div class="col-xs-12 text-right">
<button type="submit" class="btn btn-sm btn-success"> Change Password</button>
</div>
</div>
<!-- END Form Buttons -->
</form>
</div>
I am not using javascript on this page it really is a basic setup for learning.
Many thanks
In my web page source, the JSP content is coming up twice. While validating my web page source from W3C validator I am getting the duplicate ID error.
I am not able to understand that why some HTML contents from my JSP are coming up twice in my web page?
Below is the one of the HTML content which is being repeated in web page source.`
<form id="searchBarForm" name="searchBarForm" class="form-default form-search">
<input type="hidden" id="pageNumber" name="pageNumber" value='1' />
<div class="grid-holder">
<div id="invalidMilesMsgSearchBar" role="alert" class="alert alert-danger alert-static hide">
<p>Please enter a valid points range.</p>
</div>
<div class="row grid-search grid-search-1">
<div class="col-main col-sm-9 col-xs-12">
<div class="input-group">
<div class="input-group-btn">
<label>Search
rewards </label>
</div>
<input id="searchKeyword" name="keyword" type="text" class="form-control"
placeholder="Search across all rewards" value='' />
</div>
</div>
</div>
<div class="row grid-search grid-search-2">
<div class="col-main col-sm-9 col-xs-12">
<div class="input-group">
<div class="input-group-btn">
<label>and / or by points
</label>
</div>
<div class="col-range">
<input type="tel" id="maskBarFromMile" name="fromMile" class="form-control inp-from quantity-input maskBarFromMile"
placeholder="" value='' />
<div class="sep">-</div>
<input type="tel" id="maskBarToMile" name="toMile" class="form-control inp-to quantity-input maskBarToMile" value='' />
</div>
</div>
</div>
<div class="col-main col-sm-3 col-xs-12">
<div class="bttn">
Go
</div>
</div>
</div>
<div class="row grid-search grid-search-3 hide">
<div class="col-main col-sm-9 col-xs-12">
<p class="text-label">
Let us inspare you with our Reward Finder
</p>
<div class="bttn">
<a href="#" class="btn btn-default">Reward Finder
</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
`
please write your jsp code that part generate this html, I think there is a problem in your jsp code and cause generate twice html code...
I am a new user to simpleform (and html in general), and I am having trouble setting up a contact form for my jekyll website. This is the source I am using for my contact page. The email box seems to check for inconsistent input when submitted, but I don't get redirected or get any output.
Thanks in Advance!
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Contact</h2>
<h3 class="section-subheading text-muted">Thanks for Contacting Me!</h3>
</div>
</div>
<div class="col-lg-12 text-center">
<form action="http://getsimpleform.com/messages?form_api_token=2d6935f301203a8a2b595dfa0141a48a" method="post">
<!-- the redirect_to is optional, the form will redirect to the referrer on submission -->
<input type='hidden' name='redirect_to' value='http://www.google.com' />
<!-- all your input fields here.... -->
Name:<input type='text' name='name'/></br>
Email:<input type='email' name='email'/></br>
Message:<textarea name='message'></textarea>
<button type='submit' value='Submit Form'>Submit:</button>
</form>
</div>
</div>
</section>
I am debugging my simple Grails application, the CSS effects sometimes miss when I refresh the page. however,
view source shows correct html, but browser just shows the plain page.
If I stop grails and re-run, the CSS comes back. I guess it's something related to cache, but I really cannot figure out what's wrong. below is the source
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12"></div>
<div class="span12"></div>
<div class="span12"></div>
<div class="span12"></div>
<div class="span12"></div>
</div>
<div class="row-fluid offset7">
<div class="well span3">
<form action="/dashboard/login/login" method="post" >
<fieldset>
<div class="control-group">
<!-- Username -->
<label class="control-label" for="account">Account</label>
<div class="controls">
<input type="text" name="accountName" placeholder="account" class="input-xlarge" value="" id="accountName" />
</div>
</div>
<div class="control-group">
<!-- Password-->
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" name="password" placeholder="password" class="input-xlarge" value="" id="password" />
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls">
<input type="submit" name="Login" value="Login" class="btn btn-success" id="Login" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
I don't know how is your .gsp code, but i passed for a problem similar with your.
I solve my problem updating the resource plugins version, like you can see in the post above:
Grails: Images / CSS missing from time to time