I'm creating an Object in GET method and initialize it with nulls. Then I set some values and send it to the POST method, but after this process all of values that I set earlier are nulls. How could I repair it? I've tried to use hidden fields, but it didn't help.
HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" th:href="#{/styles.css}" />
</head>
<body>
<form method="POST" th:action="#{sendorder}" th:object="${details}">
<label for="name">Name: </label>
<input type="text" th:field="*{name}"/>
<br/>
<input type="hidden" th:field="*{order}" id="order"><label for="surname">Surname: </label>
<input type="text" th:field="*{surname}"/>
<br/><label for="room">Room: </label>
<input type="text" th:field="*{room}"/>
<br/>
<br/>
<h2>Please, choose your company:</h2>
<select th:field="*{company}">
<option th:each="i : ${companies}" th:value="${i.id}" th:text="${i.name}">
</option>
</select>
</div>
</div>
<input type="submit" value="Submit Order"/>
</form>
</body>
</html>
Related
I am new to Vue.js. I am trying to make a form dynamic (only a certain part of the form dynamic.). A user can have multiple guarantors. So I made the Guarantor form Dynamic with VueJS. When I submit the form and return the request, I see only the last array. Its always the last array, all others are lost.
This is the blade file.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ asset('css/app.css')}}">
<title>Laravel</title>
</head>
<body>
<div id="app">
<div class="container pt-5">
<form action="{{ route('submit.store')}}" method="post">
#csrf
<div class="card-body">
<h4 class="card-title">User Detail</h4>
<input type="text" class="form-control mb-1" name="user_name" id="user_name" placeholder="Name" />
<input type="email" class="form-control mb-1" name="user_email" id="user_email"
placeholder="Email" />
<textarea name="about" class="form-control" id="about" cols="30" rows="10"
placeholder="About"></textarea>
</div>
<dynamic-form></dynamic-form>
</form>
</div>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
And this is how the VueComponent looks.
<template>
<div>
<button class="btn btn-success mb-3" #click.prevent="addNewUser">Add User</button>
<div class="card mb-3" v-for="(user, index) in users" :key="index">
<div class="card-body">
<span class="float-right" style="cursor:pointer" #click.prevent="removeForm(index)" >X</span>
<h4 class="card-title">Guarantor No: {{ index }}</h4>
<input type="text" class="form-control mb-1" name="name" id="name" placeholder="Name" v-model="user.name" />
<input type="email" class="form-control mb-1" name="email" id="email" placeholder="Email" v-model="user.email"/>
<textarea name="about" class="form-control" id="about" cols="30" rows="10" placeholder="About" v-model="user.about"></textarea>
</div>
</div>
<input type="submit" class="btn btn-primary" value="submit">
</div>
</template>
<script>
export default {
name: 'dynamic-form',
data() {
return{
users: [
{
name: '',
email: '',
about: ''
}
]
}
},
methods: {
addNewUser: function() {
this.users.push({
name: '',
email: '',
about: ''
});
},
removeForm: function(index) {
this.users.splice(index, 1);
}
}
}
</script>
How can I tackle this problem?
In PHP, values with the same name attribute value will get overwritten. (See the "How do I get all the results from a select multiple HTML tag?" section here).
You can create arrays of values by adding a bracket to the name. For example, if you made the name of the "name" input name[], name will be an array of names in PHP.
In your case, you could use this format: name="guarantors[][name]". That way you will get an array in PHP under the key guarantors (e.g. $request->guarantors) and each of the values in guarantors will be an array with the values name, email, etc.
here is my form
<!--destinationList List-->
<div class="form-group">
<div class="col-sm-3">
<label for="Destination">Destination</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" th:field="*{destinationList[0]}" />
<input type="text" class="form-control" th:field="*{destinationList[1]}" />
<input type="text" class="form-control" th:field="*{destinationList[2]}" />
<input type="text" class="form-control" th:field="*{destinationList[3]}" />
</div>
</div>
<div class="form-group">
<div class="col-sm-9">
<button type="submit" class="btn btn-primary btn-block">Calculate</button>
</div>
</div>
</form>
And I'm going to fill following model
public class PriceSearchDTO {
private List<String> destinationList;
public List<String> getDestinationList() {
return destinationList;
}
public void setDestinationList(List<String> destinationList) {
this.destinationList = destinationList;
}
}
I can do this. But I hard coded number of input fields in the list as above in the view. I need to genarate them dynamically and make the number of element in the list is airbitary.
Try this:
<div class="col-sm-9">
<input type="text" class="form-control" th:each="destination : ${destinationList}" th:field="*{destination}" />
</div>
You are using Iteration in Thymeleaf. In fact, there is a quite complete set of objects that are considered iterable by a th:each attribute.
Like this :
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Good Thymes Virtual Grocery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all"
href="../../../css/gtvg.css" th:href="#{/css/gtvg.css}" />
</head>
<body>
<h1>Product list</h1>
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="destination: ${destinations}">
<td th:text="${destination}">Onions</td>
</tr>
</table>
<p>
Return to home
</p>
</body>
</html>
And Controller in Spring framework.
#RequestMapping(value = "/")
public ModelAndView showView(ModelAndView mav) {
List<String> destinations = new ArrayList<String>();
destinations.add("elementA");
destinations.add("elementB");
destinations.add("elementC");
mav.addObject("destinations", destinations);
mav.setViewName("/viewName");
return mav;
}
Full error is:
Error during execution of processor
'org.thymeleaf.spring4.processor.attr.SpringInputGeneralFieldAttrProcessor'
(search:12)
My search.html page displays when I have:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!--<meta charset="UTF-8">-->
<title>Search Users</title>
</head>
<body>
<h3>Search Users</h3>
<form th:action="#{/user/search}" th:object="${searchCriteria}" method="post">
<p>First Name: <input type="text" value="*{firstname}"/></p>
<p>Last Name: <input type="text" value="${searchCritera.lastname}"/></p>
<br/>
<input type="submit" value="search"/>
</form>
</body>
</html>
But I then changed value to th:field for *{firstname} and ${searchCritera.lastname} as below:
<form th:action="#{/user/search}" th:object="${searchCriteria}" method="post">
<p>First Name: <input type="text" th:field="*{firstname}"/></p>
<p>Last Name: <input type="text" th:field="${searchCritera.lastname}"/></p>
<br/>
<input type="submit" value="Search"/>
</form>
Now I get the error above and can't seem to fix it. I tried th:value but it throws another error:
Exception evaluating SpringEL expression: "searchCritera.lastname"
(search:12)
In general, when you're using dollar signs, use th::
<input type="text" th:value="${searchCriteria.lastname}"/>
And spell the variable name correctly.
Also include name= or th:field= as appropriate (or instead, depending on what you're trying to accomplish).
i used this code to get the value of item that i checked however. its not working on my project. i just want every value that i checked it will go to my text box with comma separator
like 288,289,290. thanks in advance
<input type="text" name="holder" id="holder"
<input type="checkbox" name="example[]" value="288" checked/>
<input type="checkbox" name="example[]" value="289" checked/>
<input type="checkbox" name="example[]" value="290" />
<input type="checkbox" name="example1[]" value="289" checked/>
var output = jQuery.map($(':checkbox[name="example[]"]:checked'), function (n, i) {
return n.value;
}).join(',');
alert(output);
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="inputs">
<input type="checkbox" value="Apple">
<input type="checkbox" value="Orange">
<input type="checkbox" value="Pineapple">
<input type="checkbox" value="Mango">
</div>
<input type="text" id="target"/>
</body>
</html>
var arr = [];
$('#inputs input').change(function() {
if (this.checked) {
arr.push(this.value);
}
else {
arr.splice(arr.indexOf(this.value), 1);
}
$('#target').val(arr + '');
});
Is there a jQuery plugin that will allow to sort a list of items (<li>...</li>) according to their meta data stored as a hidden element? For instance every list item has two hidden inputs: author and year. I want sort the list using those hidden elements. I wonder if there is a ready to use plugin for jQuery. So far, I have not found such plugin. The only I have found are for table sorting.
<ul>
<li>Position 1
<input type="hidden" name="author" value="Peter"/>
<input type="hidden" name="year" value="2004"/>
</li>
<li>Position 2
<input type="hidden" name="author" value="John"/>
<input type="hidden" name="year" value="2005"/>
</li>
<li>Position 3
<input type="hidden" name="author" value="Tony"/>
<input type="hidden" name="year" value="2006"/>
</li>
</ul>
Here you go:
<ul>
<li>Position 1
<input type="hidden" name="author" value="Peter"/>
<input type="hidden" name="year" value="2004"/>
</li>
<li>Position 2
<input type="hidden" name="author" value="John"/>
<input type="hidden" name="year" value="2005"/>
</li>
<li>Position 3
<input type="hidden" name="author" value="Tony"/>
<input type="hidden" name="year" value="2006"/>
</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
jQuery.fn.sort = function() {
return this.pushStack( [].sort.apply( this, arguments ), []);
};
function mySorter(a,b){
return $(a).find("[name=author]").val() > $(b).find("[name=author]").val() ? 1 : -1;
};
$(document).ready(function(){
$('ul li').sort(mySorter).appendTo('ul');
})
</script>
I adapted it from: http://www.wrichards.com/blog/2009/02/jquery-sorting-elements/
Edit:fixed error with val() and 'ul'