I have a form as follows
<form class="form-inline" id="inviteForm" action="http://localhost:8000/team/sendInvitation" method="post">
<div class="modal fade" id="sendInvite" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Send an invite</h4>
</div>
<div class="modal-body">
<form class="form-vertical">
<!-- Inviteename Form Input -->
<div class="form-group">
<label for="inviteename">Name :</label> <input class="form-control" required="required" name="inviteename" type="text" id="inviteename"> </div>
<!-- Email Form Input -->
<div class="form-group">
<label for="email">Email :</label> <input class="form-control" required="required" name="email" type="email" id="email"> </div>
<!-- Invitemessage Form Input -->
<div class="form-group">
<label for="invitemessage">Message :</label> <textarea class="form-control" required="required" name="invitemessage" cols="50" rows="10" id="invitemessage"></textarea> </div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="uk-button" data-dismiss="modal">Close</button>
<i class="uk-icon-send"></i> Send Email
</div>
</div>
</div>
</form>
and my route is as follows
Route::post('sendInvitation',['uses'=>'TeamsController#sendInvitation','as'=>'invitation.send']);
and the UI code is as follows
<form class="form-inline" id="inviteForm" action="{{URL::route('invitation.send')}}" method="post">
#include('admin.teams.partials.sendinvite')
</form>
and the controller code is as follows :
public function sendInvitation()
{
dd(Input::all());
}
I am expecting to see the input values dumped on the screen , but right now nothing is happening.
The include file has the UI for modal dialog.
My question is why is the form not being posted. I am pretty sure I am missing something which is very silly, but if you can point it out for me, it would be praiseworthy.
Thanks
The problem is the nested form structure.
http://www.w3.org/TR/xhtml1/#prohibitions
Remove <form class="form-vertical"> and replace with a normal <div> or <span>.
Related
I have a view made with bootstrap modal, but this form not send data to my controller. When print data from console I have only null values. My view is following:
modal-form
My code in the frontend is:
<!-- new modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<form th:action="#{/creconocida/addNew}" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h5 class="modal-title w-100" id="exampleModalLabel">Nueva
Comunidad Reconocida</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Código
único</span>
</div>
<input type="text" class="form-control" id="codigo"
name="codigoN" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon2">Nombre</span>
</div>
<input type="text" class="form-control" id="nombre"
name="nombreN" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">Número
familias</span>
</div>
<input type="number" class="form-control" id="numero"
name="numeroN" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Nacionalidad</label>
</div>
<select class="custom-select" id="nacionalidad"
name="nacionalidadN">
<option selected>Seleccione...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="modal-footer ">
<button type="submit" class="btn btn-primary mr-auto">Guardar</button>
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</form>
</div>
Add new method in controller
#PostMapping("/addNew")
public String addNew(ComunidadReconocida creconocida) {
System.out.println("Guardando comunidad "+creconocida.getNam_m());//get only null values
asentamientoService.addNew(creconocida);
return "redirect:/creconocida/listar";
}
I can create a new entity but I can't send the values entered in the form. How could I do to capture the values and pass them to the controller
Your problem is you are not indicates to Spring that you want a '#RequestParam'.
public String addNew(#RequestParam ComunidadReconocida creconocida)
I'm using Spring boot and Thymeleaf.I have a modal form to create/edit information:
<div class="modal" id="myModal" th:fragment="content">
<form th:object="${object}">
<div class="modal-dialog">
<div class="modal-content">
<!– Modal Header –>
<div class="modal-header row">
<div class="col-md-10">
<h4 class="modal-title">Create/Edit</h4>
</div>
<div class="col-md-2">
<button type="button" class="close" data-dismiss="modal"
style="float: right;">×</button>
</div>
</div>
<!– Modal body –>
<div class="modal-body">
<div class="form-group">
<label for="ID">ID</label>
<input type="text" class="form-control" id="ID" placeholder="ID"
th:field="*{id}">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="name"
th:field="*{name}">
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" placeholder="Description"
th:field="*{description}">
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" placeholder="Date"
th:field="*{date}">
</div>
<div class="form-group">
<label for="other">Other</label>
<input type="text" class="form-control" id="other" placeholder="other"
th:field="*{other}">
</div>
</div>
<!– Modal footer –>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>
I can't place inside my index.html because the Object is null. When user click button to crate/edit user, the modal will pop-up with data.
The button is:
<button type="button" class="btn btn-success" onclick="triggerModal(null)">Create New</button>
My Jquery function:
function triggerModal(id) {
if(id==null){
var url = "/create";
}else{
var url = "/create/{"+id+"}";
}
$('#content').load(url);
$('#myModal').modal({show:true});
}
The controller:
#GetMapping(value = {"/create","/create/{id}"})
public String createObject(Model theModel, #PathVariable(required = false)String id){
if(id!=null){
Optional<Object> object= objectRepository.findById(id);
if(object.isPresent()){
theModel.addAttribute("Object", object.get());
return "/form-modal::content";
}
}
theModel.addAttribute("Object", new Object());
return "/form-modal::content";
}
This is the div tag I place on the index.html
<div id="content"></div>
I have successfully insert modal to HTML body with data loaded but the modal is not displayed correctly.
I have solved it.
Just place the th:fragment inside the modal class:
<div >
<form th:object="${object}" th:fragment="content">
<div class="modal-dialog">
<div class="modal-content">
<!– Modal Header –>
<div class="modal-header row">
<div class="col-md-10">
<h4 class="modal-title">Create/Edit</h4>
</div>
<div class="col-md-2">
<button type="button" class="close" data-dismiss="modal"
style="float: right;">×</button>
</div>
</div>
<!– Modal body –>
<div class="modal-body">
<div class="form-group">
<label for="ID">ID</label>
<input type="text" class="form-control" id="ID" placeholder="ID"
th:field="*{id}">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="name"
th:field="*{name}">
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" placeholder="Description"
th:field="*{description}">
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" placeholder="Date"
th:field="*{date}">
</div>
<div class="form-group">
<label for="other">Other</label>
<input type="text" class="form-control" id="other" placeholder="other"
th:field="*{other}">
</div>
</div>
<!– Modal footer –>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>
And change the div tag in the index file:
<div class="modal" id="myModal"></div>
I have two almost identical forms. One is meant to edit an item, and the other is meant to create an item. For some reason, the create-form does not react at all to submit button clicks, while the edit/update form works exactly as expected. I can not find any differences between the two that should result in this behavior.
I am as sure as I can be that this has nothing to do with back end. I have monitored network activity, ant the submit button for the create-form does not activate any kind of network activity at all.
Working update form:
#extends ('layout')
#section('middle-content')
<div class="wrapper">
<div id="page" class="container">
<h4>Edit Competition Category</h4>
<form method="POST" action="/competition-categories/{{$competitionCategory->id}}">
#csrf
#method('PUT')
<div class="form-group row">
<label for="competition-category-name-input" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="competition-category-name-input" name="name" type="text" class="form-control" required="required" value="{{ $competitionCategory->name }}">
</div>
</div>
<div class="form-group row">
<label for="competition-category-abbreviation-input" class="col-4 col-form-label">Abbreviation</label>
<div class="col-8">
<input id="competition-category-abbreviation-input" name="abbreviation" type="text" class="form-control" required="required" value="{{ $competitionCategory->abbreviation }}">
</div>
</div>
<div class="form-group row">
<div class="offset-4 col-8">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
#endsection
Non-responding create-form:
#extends ('layout')
#section('middle-content')
<div class="wrapper">
<div id="page" class="container">
<h4>New Competition Category</h4>
<form method="POST" action="/competition-categories"></form>
#csrf
<div class="form-group row">
<label for="competition-category-name-input" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="competition-category-name-input" name="name" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<label for="competition-category-abbreviation-input" class="col-4 col-form-label">Abbreviation</label>
<div class="col-8">
<input id="competition-category-abbreviation-input" name="abbreviation" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<div class="offset-4 col-8">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
#endsection
This line: <form method="POST" action="/competition-categories"></form>
of your non working form, please remove </form> you started and closed it that's why.
I have form to submit signon inside a modal. It is not allowing me to enter email and password. When I click on the form element it is closing.What am I doing wrong here.It is supposed to enter the email and password to submit
Form Modal
<div id="click_signin" class="modal New-Bouncing-popup" role="dialog">
<div class="modal-dialog bounce animated modal-ku">
<!-- Modal content-->
<div class="modal-content1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body row">
<div class="col-sm-6 left-side">
<h1>Surplus<br>Forex.</h1>
<p>Build your profitable forex career.</p>
<br>
<p>Login with social media</p>
<a class="fb" href="#" target="_blank">Login With Facebook</a>
<a class="tw" href="#" target="_blank">Login With Twitter</a>
</div><!--col-sm-6-->
<div class="col-sm-6 right-side">
<h1>Login</h1>
<p>Fill the below given fields to Login</p>
<br/>
<!--Form with header-->
<div class="form">
<div class="form-group">
<label for="form2">Your email</label>
<input type="text" id="form2" class="form-control">
</div>
<div class="form-group">
<label for="form4">Your password</label>
<input type="password" id="form4" class="form-control">
</div>
<div class="text-xs-center frm_grp">
Login
</div>
</div>
<!--/Form with header-->
</div><!--col-sm-6-->
</div>
</div>
</div>
</div>
I am trying to get a value from a Servlet to an input box of a JSP using Ajax. I have managed to get that value to an Alert box. But it didn't work when I tried to get that value into an input box. Please see the following code.
This is the ajaxtTestServlet
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType("text/html");
String text = "some text";
response.setCharacterEncoding("UTF-8");
response.getWriter().write(text);
}
There is where the input box with the id "firstName" is.
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <img src="images/arrow-back-512.png" width="30px" height="30px"> <small>Back</small> <span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Edit New Member</b></font></span> </div>
<div class="modal-body">
<form class="form-horizontal" method="post" action="EditOnlySrvlt?idEmployee=<%=request.getParameter("idEmployee")%>"" >
<fieldset id="modal_form">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">First Name</label>
<div class="col-md-6">
<input name="firstName" id="firstName" type="text" class="form-control input-md" >
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Middle Name</label>
<div class="col-md-6">
<input name="middleName" type="text" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Last Name</label>
<div class="col-md-6">
<input name="lastName" type="text" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Date Of Birth</label>
<div class="col-md-6">
<input name="dateOfBirth" type="date" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Passport Number</label>
<div class="col-md-6">
<input name="passportNumber" type="text" class="form-control input-md">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Edit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<!-- /Edit Job modal -->
this is the Script
<script>
$(function() {
//twitter bootstrap script
$("tr#somebutton").click(function(){
$.get("ajaxTestSrvlt", function(responseText) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response text...
$('#firstName').text(responseText) ; // Locate HTML DOM element with ID "somediv" and set its text content with the response text.
});
});
});
</script>
if it's a input, you should give
$('#firstName').val(responseText);