I am a student & i am working on practicing an app for a blog post. Downloaded "clean-blog" template on startbootstrap website.
Link attached:https://startbootstrap.com/theme/clean-blog
Now using Node & EJS trying to work on form submission. But the form is not getting passed through. There was a comment snippet which said: activation token needed
I am not even getting a change in mouse pointer to 'click-finger' when my mouse is near the submit button. I am a student & just using this for learning purpose. Tried removing all unwanted attributes, but still the the form is not getting activated. Now I have undone the changes I did to the page. Below is the code for my ejs file.
Can anyone help me activate the "form" just for demo purpose? What all should I remove for this to happen?
'''
<!DOCTYPE html>
<html lang="en">
<!-- Header-->
<%- include('layouts/header'); -%>
<body>
<!-- Navigation-->
<%- include('layouts/navbar'); -%>
<!-- Page Header-->
<header class="masthead" style="background-image: url('/assets/img/contact-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="page-heading">
<h1>Create New Post</h1>
<span class="subheading">Have questions? I have answers.</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content-->
<main class="mb-4">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<p>Want to get in touch? Fill out the form below to send me a message and I will get back to
you as soon as possible!</p>
<div class="my-5">
<!-- * * * * * * * * * * * * * * *-->
<!-- * * SB Forms Contact Form * *-->
<!-- * * * * * * * * * * * * * * *-->
<!-- This form is pre-integrated with SB Forms.-->
<!-- To make this form functional, sign up at-->
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form action="/posts/store" method="POST" data-sb-form-api-token="API_TOKEN">
<div class="form-floating">
<input class="form-control" id="title" name="title" type="text"
placeholder="Enter the title..." data-sb-validations="required" />
<label for="title">Title</label>
<div class="invalid-feedback" data-sb-feedback="name:required">Title is
required.</div>
</div>
<div class="form-floating">
<textarea class="form-control" id="description" style="height: 12rem"
placeholder="Enter your message here..." style="height: 12rem"
data-sb-validations="required"></textarea>
<label for="message">Description</label>
<div class="invalid-feedback" data-sb-feedback="message:required">A Description is
required.</div>
</div>
<br />
<!-- Submit success message-->
<!---->
<!-- This is what your users will see when the form-->
<!-- has successfully submitted-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center mb-3">
<div class="fw-bolder">Form submission successful!</div>
To activate this form, sign up at
<br />
https://startbootstrap.com/solution/contact-forms
</div>
</div>
<!-- Submit error message-->
<!---->
<!-- This is what your users will see when there is-->
<!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage">
<div class="text-center text-danger mb-3">Error sending message!</div>
</div>
<!-- Submit Button-->
<button class="btn btn-primary text-uppercase disabled" id="submitButton"
type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
</main>
<!-- Footer-->
<%- include('layouts/footer'); -%>
<!-- Scripts-->
<%- include('layouts/scripts'); -%>
</body>
</html>
'''
Personally I just removed the class 'disabled' on the submit button like the example below and it worked:
error:
<button class="btn btn-primary text-uppercase disabled" id="submitButton" type="submit">Send</button>
right answer:
<button class="btn btn-primary text-uppercase" id="submitButton" type="submit">Send</button>
I just removed the css attribute for the button tag & it started working...! Now my form is working absolutely fine.!
<button class="btn btn-primary text-uppercase disabled" id="submitButton" type="submit">Send</button>
Related
I am new to MongoDB, and I am trying to make a blog project using MongoDB and Node.js. I am having a problem as my data cannot be stored in MongoDB. I use the body-parser method to get the data, but the data is not stored in MongoDB. A little help would be nice, thank you.
const express=require('express')
const path=require('path')
const mongoose = require('mongoose');
const BlogPost = require('./models/BlogPost.js')
mongoose.connect('mongodb://localhost/my_database',{useNewUrlParser:true})
const app=new express()
const ejs=require('ejs')
app.set('view engine','ejs')
const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:true}))
app.use(express.static('public'))
app.listen(4000,()=>{
console.log('App listening on port 4000')
})
app.get('/',(req,res)=>{
res.render('index')
})
app.get('/about',(req,res)=>{
//res.sendFile(path.resolve(__dirname,'pages/about.ejs')
res.render('about')
})
app.get('/contact',(req,res)=>{
// res.sendFile(path.resolve(__dirname,'pages/contact.ejs'))
res.render('contact')
})
app.get('/post',(req,res)=>{
//res.sendFile(path.resolve(__dirname,'pages/post.ejs'))
res.render('post')
})
app.get('/posts/new',(req,res)=>{
res.render('create')
})
app.post('/posts/store',(req,res)=>{
BlogPost.create(req.body,(error,blogpost)=>{
res.redirect('/')
})
})
This is my code in create.ejs
<!DOCTYPE html>
<html lang="en">
<%- include('layouts/header'); %>
<body>
<!-- Navigation-->
<%- include('layouts/navbar'); -%>
<!-- Page Header-->
<header class="masthead" style="background-image: url('/assets/img/contact-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="page-heading">
<h1>Create New Post</h1>
<span class="subheading">Have questions? I have answers.</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content-->
<main class="mb-4">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<form action="/posts/store" method="POST"></form>
<p>Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon as possible!</p>
<div class="my-5">
<!-- * * * * * * * * * * * * * * *-->
<!-- * * SB Forms Contact Form * *-->
<!-- * * * * * * * * * * * * * * *-->
<!-- This form is pre-integrated with SB Forms.-->
<!-- To make this form functional, sign up at-->
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<div class="form-floating">
<input class="form-control" id="title" placeholder="title" type="text" name="title" />
<label for="title">title</label>
</div>
<div class="form-floating">
<textarea class="form-control" id="body" placeholder="body" name="body"></textarea>
<label for="body">body</label>
</div>
<br />
<!-- Submit success message-->
<!---->
<!-- This is what your users will see when the form-->
<!-- has successfully submitted-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center mb-3">
<div class="fw-bolder">Form submission successful!</div>
To activate this form, sign up at
<br />
https://startbootstrap.com/solution/contact-forms
</div>
</div>
<!-- Submit error message-->
<!---->
<!-- This is what your users will see when there is-->
<!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
<!-- Submit Button-->
<button class="btn btn-primary text-uppercase " id="submitButton" type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
</main>
<%- include('layouts/footer'); -%>
<%- include('layouts/scripts'); -%>
</body>
</html>
I take out the codes related to menu area (as shown below) from index.html to an independent file header.html,
and then include header.html into index.html with,
<body>
<div id="header"></div>
...
<script>
$("#header").load("header.html");
</script>
</body>
However, when I click the search button, there is no response. Originally, a search box should appear as shown below.
The related codes are listed below, (the complete example is here)
<!-- page search box -->
<div class="page_search_box">
<div class="search_close">
<i class="ion-close-round"></i>
</div>
<form class="border-bottom" action="#">
<input class="border-0" placeholder="Enter keyword..." type="text" />
<button type="submit"><i class="ei ei-search"></i></button>
</form>
</div>
<div class="main_header_right d-flex align-items-center">
<div class="header_account">
<ul class="d-flex">
<li class="header_search"> <i class="ei ei-search"></i> </li>
</ul>
</div>
<div class="canvas_open">
<i class="ion-navicon"></i>
</div>
</div>
What's wrong?
I got problem with my Razor page application. I already use render section for footer:
<footer class="border-top footer text-muted">
#RenderSection("footer", required: false)
<div class="container">
© 2021 - EmployeeBook - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
and use it also in employee list
#page
#model EmployeeBook.Pages.Employees.EmployeesModel
#{
ViewData["Title"] = "Employees";
}
<h1>Employees razor page</h1>
<br />
<form method="get">
<div class="form-group">
<div class="input-group">
#*asp-for two ways data binding*#
<input type="search" class="form-control" asp-for="SearchTerm" />
<span class="input-group-btn">
<button class="btn btn-default">Search</button>
</span>
</div>
</div>
</form>
#foreach (var employee in Model.Employees)
{
<partial name="_Summary" model="employee" />
}
#*Remember about nullable values added to onGet/onPost if we want to use this method there*#
<div>
<a asp-page="./EditEmployee" class="btn btn-primary">Add nefw Employee</a>
</div>
#section footer {
<div>
#Model.Message
</div>
}
Result of that is something like that:
Im trying to use _summary partial view to display details of employees instead of common list. Could someone tell me where the problem can be? I use just classes from bootstrap. It start to works not correct when I add more employees.
#using EmployeeBook.Core
#*from lower case define just type of object into view*#
#*from upper case this is model property where we can go into*#
#model Employee
<div class="modal-content">
<div class="modal-header">
<h3>#Model.Name</h3>
</div>
<div class="modal-body">
<span>Type of employee #Model.TypeOfEmployee</span>
</div>
<div class="modal-footer">
<a class="btn btn-light"
asp-page="./EmployeeDetails"
asp-route-employeeId="#Model.Id">
Details
</a>
<a class="btn btn-light"
asp-page="./EditEmployee"
asp-route-employeeId="#Model.Id">
Edit
</a>
<a class="btn btn-danger"
asp-page="./Delete"
asp-route-employeeId="#Model.Id">
Delete
</a>
</div>
</div>
I am not able to get value from radio buttons in reactive form. It always come empty string. How could I solve that? Below is the code for that:
<form (ngSubmit)="onSubmit(segment_abc)" [formGroup]="segment_abc">
<div class="container">
<div class="row product-chooser">
<div class="col-md-4 col-sm-6 selected product-chooser-item" id="div1" tabindex="-1">
<div class="pricingTable">
<i class="fa fa-rupee"> 400</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=1>
<!-- Subscribe Now -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div2" tabindex="-1">
<div class="pricingTable">
<div class="bottom">
<div class="txt_400">
<i class="fa fa-rupee"> 1000</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=2>
<!-- Subscribe Now -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div3" tabindex="-1">
<div class="pricingTable pricingTablepremium">
<input type="radio" formControlName="segment123" [value]=3 (click)="openValue()">
<!-- Subscribe Now -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <button type="submit" class="btn btn_form" (click)="open(content,'email')">Submit</button> -->
<button type="submit" class="btn btn_form" >Submit</button>
</div>
There is no output in when I am getting values in form control
I am having an issue with my Play Form.
After submitting my form and reopening the same page, I am getting the previous submitted values.
What can I do to get a clean form?,
The submit process is working fine, besides this little issue.
div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">New Product Form</h1>
<div class="row placeholders div-table">
<div class="col-xs-12 col-sm-12 div-table-row">
#helper.form(routes.Products.createProduct){
<div class="form-group">
#helper.inputText(form("name"), '_label->"Product Name", 'id->"productName", 'name->"productName", 'class ->"form-control", 'placeholder ->"Enter Product Name") <!-- End Product Name Form-->
</div><!--End First Form Group-->
<div class="form-group">
#helper.select(form("type"),options(models.Type.values().toList.map(_.toString)), '_label->"Type", 'id->"type", 'name->"type", 'class->"btn btn-default dropdown-toggle")
</div><!--End Second Form Group-->
<button class="btn btn-default">Submit</button>
}
</div> <!--End Middle Content DIV -->
</div> <!-- End Middle content with SideBar-->
</div> <!--End Container -->
I could fix the issue. The problem was that I was initializing the form as static in my controller. Thanks to all for your help.