So I am trying to use bootstrap to create a form and parse it in golang but the form data keeps coming back empty.
Golang:
// CreateEmployee - handler function for creating a new employee
func CreateEmployee(w http.ResponseWriter, r *http.Request) {
err := r.ParseForm()
if err != nil {
fmt.Println(err.Error())
}
fmt.Println(r.Form)
}
Bootstrap form:
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<form action="/employee" method="post">
<div class="form-group">
<label>Name</label>
<input type="text" id="name" class="form-control" placeholder="Enter name">
</div>
<div class="form-group">
<label>Title</label>
<input type="text" id="title" class="form-control" placeholder="Enter title">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" id="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<label>Photo</label>
<input type="text" id="photo" class="form-control" placeholder="Enter photo
location">
</div>
<div class="form-group">
<label>Phonetic</label>
<input type="text" id="phonetic" class="form-control" placeholder="Enter
phonetic pronunciation">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
I am aware that you have to call ParseForm before r.Form is populated but as far as I can tell that is all that is required.
The route is working fine because when I submit the form it is printing an empty map to the console. It seems that I am doing something stupid but can't figure it out.
The name attribute is missing from the <input> elements. If the name attribute is not set or empty, then the input value is not included in the submitted form.
Fix like so:
<div class="form-group">
<label>Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Enter name">
</div>
... and so on for the other input elements.
Related
here is the code:-
form.html :
<div class="container">
<div class="row mt-5">
<div class="col-md-6 offset-md-3">
<form th:action="#{/process}" method="post" th:object="${loginData}">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input
type="text"
name="userName"
class="form-control"
th:value="${loginData.userName}"
id="exampleInputEmail1"
aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input
type="email"
name="email"
th:value="${loginData}"
class="form-control"
id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
MyController :
#GetMapping("/form")
public String formHandler(Model m ) {
System.out.println("opening form");
LoginData loginData = new LoginData();
if(loginData != null ) {
m.addAttribute("login", new LoginData());
System.out.println("YAY");
}else {
System.out.println("Bhag Bh*****ke");
}
return "form1";
}
//handler for process form
#PostMapping("/process")
public String processform(#ModelAttribute("loginData") LoginData loginData) {
System.out.println(loginData);
return"success";
}
success.html :
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Success</title>
</head>
<body>
<h1>Welcome to this success page</h1>
<h1 th:text="${LoginData.userName}"></h1>
<h1 th:text="${LoginData.email}"></h1>
</body>
</html>
saying error : Caused by: org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'userName' cannot be found on null
Login page is not ruuning because LoginData is empty at begining
You haven't exactly specified which of the 2 pages are causing the issue, but I'm going to guess that it is the first one.
I would first try replacing the th:value tag with th:field in the username input:
<input
type="text"
name="userName"
class="form-control"
th:field="*{userName}"
id="exampleInputEmail1"
aria-describedby="emailHelp">
Since you have already defined the loginData object within the form tag:
th:object="${loginData}
The next input tag could also cause some issues, I'm guessing that this should accept the user's password:
<input
type="email"
name="email"
th:value="${loginData}"
class="form-control"
id="exampleInputPassword1">
You would want to update it to something like:
<input
type="password"
th:field="*{password}"
class="form-control"
id="exampleInputPassword1">
The exception tells you that there is no model attribute with the name loginData. looking at the controller code after this that can be confirmed as you are adding a model attribute with name login not loginData m.addAttribute("login", new LoginData());
Also I'm not usre why you define a loginData variable in your controller, check if it's non null and than don't use it but create a new one
LoginData loginData = new LoginData();
if(loginData != null ) {
m.addAttribute("login", new LoginData());
System.out.println("YAY");
}
I'm trying to use Recaptcha v3 on my form but submitting the form only works when Recaptcha is removed.
When Recaptcha is enabled, I can click on the submit button but nothing happens. I don't even get an error message in the console even though I can see the protected by reCAPTCHA logo in the frontend on the bottom right.
I'm using Laravel 6.
My form template looks like this:
<div class="row mt-150">
<div class="col-12 text-center text-white">
<h1>Contact</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-4 col-sm-12">
<form action="{{route('contact_form')}}" method="POST">
#csrf
<div class="form-group">
<label for="email" class="text-white">Email address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="textarea" class="text-white">Message</label>
<textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
</div>
<input type="submit"
id="submitButton"
class="g-recaptcha btn btn-primary"
data-sitekey="MY-PUBLIC-KEY"
data-callback='onSubmit'
data-action='submit'
name="submit">
</form>
</div>
</div>
<script src="https://www.google.com/recaptcha/api.js"></script>
There is also an app.js included which contains the captcha callback function:
function onSubmit(token) {
document.getElementById("submitButton").submit();
}
window.onSubmit = onSubmit;
Can someone give me a hint what I'm doing wrong implementing recaptcha?
I tried to do it just like this:
Google reCaptcha v3
This will not work because you are trying to trigger submit() on a button. Give the form an id and then trigger submit() on the form
<form action="{{route('contact_form')}}" method="POST" id="contactForm">
#csrf
<div class="form-group">
<label for="email" class="text-white">Email address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="textarea" class="text-white">Message</label>
<textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
</div>
<input type="submit"
id="submitButton"
class="g-recaptcha btn btn-primary"
data-sitekey="MY-PUBLIC-KEY"
data-callback='onSubmit'
data-action='submit'
name="submit">
</form>
Then in javascript get the form and trigger submit on it
function onSubmit(token) {
document.getElementById("contactForm").submit();
}
window.onSubmit = onSubmit;
I followed same sample with the code and tried to show validation when user removes the text in the input and show display messages.Unfortunately, when I remove the text field it does not show anything. Could you please check the code and tell me why I can not show the validation message ?
Regards
Alper
<label for="name">SA / Rentennummer 005 :</label>
<input type="text" class="form-control" id="name" required
[(ngModel)]="Input.name" name="name" #name="ngModel">
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
name is required
</div>
In The typescript :
Input= { name:'Alper'};
form : FormGroup;
this.form = fb.group({
name : new FormControl({value: null}, Validators.compose([Validators.required, Validators.maxLength(100)]))
});
<form class="form-details" role="form" name="registrationForm" [formGroup]="userForm">
<div>
<div class="row input-label">
<label class="form-label" for="name">First name</label>
<input
[formControl]="form.controls['name']"
type="text"
class="form-control"
id="form"
name="form">
</div>
<div *ngIf="!form.controls['name'].valid">field is required</div>
</div>
</form>
this is the html part when i add more email id's only first email is being validated and rest of emails treat as normal even if they are not in proper
<form action="<?php echo base_url()?>index.php/EMail/show_email">
<div class="form-group">
<label for="exampleInputEmail1">To :</label>
<input type="email" name="toa[]" ng-model="to" placeholder="To" class=" tagsinput" value="ss" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">Subject :</label>
<input type="text" class="form-control" ng-model="sub" name="suba" id="exampleInputEmail1" placeholder="Subject">
<div>{{sub}}</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">CC :</label>
<input type="text" class="form-control" ng-model="to" name="cca" id="exampleInputEmail1" placeholder="CC">
<div>{{to}}</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">BCC:</label>
<input type="text" class="form-control" name="bcca" id="exampleInputEmail1" placeholder="BCC">
</div>
<div class="form-group ">
<label for="ccomment" class="control-label">Message</label>
<textarea class="form-control " id="ccomment" name="msg" required></textarea>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<input type="submit" onclick="mail()" class="btn btn-primary" value="Send"/>
<button type="submit" class="btn btn-Success">Draft</button>
</form>
this is my controller and "toa "is that field which i mentioned in the image
function show_email(){
$this->form_validation->set_rules("toa[]","To","valid_email");
$this->form_validation->set_rules("cca","CC ","valid_email");
$this->form_validation->set_rules("suba","Subject","required");
$this->form_validation->set_rules("bcca","bcc","valid_email");
$this->form_validation->set_rules("msg","Message","required");
if($this->form_validation->run()==FALSE){
$data["title"]="EMail";
$this->load->view('header',$data);
$this->load->view('sidebar');
$this->load->view('Mail/mail');
}else{
//finish
$ccdata=$this->input->post("cca");
$bccdata=$this->input->post("bcca");
$sub=$this->input->post("suba");
$ms=$this->input->post("msg");
$dataa["username"]="MyProject";
$dataa["msg"]=$ms;
$msg=$this->load->view('Email_Temp/mail',$dataa,TRUE);
$todata=explode(",",$data);
print_r($todata[0]);
//$this->SendEmail($todata,$ccdata,$bccdata,$msg,$sub);
}
}
[Image] this is the field (to) that i want to validate
I have this:
<form role="form" method="post" action="validar.php" data-toggle="validator">
<h2>¿Te interesa?<br>
Nosotros te llamamos</h2>
<div class="form-group">
<label for="Nombre">Nombre*</label><input data-error="Debes facilitarnos tu nombre" class="form-control" id="Nombre" name="Nombre" type="text" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Empresa">Empresa</label><input class="form-control" id="Empresa" name="Empresa" type="text">
</div>
<div class="form-group">
<label for="Correo">Correo electrónico*</label><input data-error="Debes facilitarnos tu correo electrónico" class="form-control" id="Correo" name="Correo" type="email" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Telefono">Teléfono</label><input class="form-control" id="Telefono" name="Telefono" type="tel">
</div>
<div class="form-group">
<label for="Horario">Qué día y hora prefieres</label><input class="form-control" id="Horario" name="Horario" type="text">
</div>
<button type="submit" class="btn btn-image" name="send"><span style="position:relative;top: -20px;">Solicitar información</span></button>
<div class="checkbox">
<label><input type="checkbox" required /><a target="_blank" href="http://www.trisquel.com/privacidad/">Acepto las condiciones</a></label>
</div>
</form>
validar.php recollect all the data (POST) and send and email.
I would like to add ajax/jquery code to show a Sucess Message (f.e: Thxs for all!) bellow the submit buttom when the user clicks in "submit" in the same page that the form and execute validar.php in the index page.
THXS!
// this is the id of the form
$("#idForm").submit(function() {
var url = "validar.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
$("message").text("Success Message");
}
});
return false; // avoid to execute the actual submit of the form.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" id="idForm" method="post" action="validar.php" data-toggle="validator">
<h2>¿Te interesa?<br>
Nosotros te llamamos</h2>
<div class="form-group">
<label for="Nombre">Nombre*</label><input data-error="Debes facilitarnos tu nombre" class="form-control" id="Nombre" name="Nombre" type="text" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Empresa">Empresa</label><input class="form-control" id="Empresa" name="Empresa" type="text">
</div>
<div class="form-group">
<label for="Correo">Correo electrónico*</label><input data-error="Debes facilitarnos tu correo electrónico" class="form-control" id="Correo" name="Correo" type="email" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Telefono">Teléfono</label><input class="form-control" id="Telefono" name="Telefono" type="tel">
</div>
<div class="form-group">
<label for="Horario">Qué día y hora prefieres</label><input class="form-control" id="Horario" name="Horario" type="text">
</div>
<button type="submit" class="btn btn-image" name="send"><span style="position:relative;top: -20px;">Solicitar información</span></button>
<div class="checkbox">
<label><input type="checkbox" required /><a target="_blank" href="http://www.trisquel.com/privacidad/">Acepto las condiciones</a></label>
</div>
<span id="message"></span>
</form>
Use jquery to serialize your form and post it. Give your form an id so you can reference it(like myForm)
var serializedForm = $("#myForm").serialize();
Then post it with an Ajax call(read the jquery ajax docs).
In the success callback of the Ajax call you do the following.
$('#contactDiv').hide();
$('#successDiv').show();
So you'll need to create some divs around the form and another around the success message.