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 + '');
});
Related
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>
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 login form with hidden field name "callbackUrl". How can i get the value of this hidden field in controller? User's attributes are username and password. callbackUrl is not.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
<link href="/resources/css/common.css" rel="stylesheet">
<title>Authentication Service</title>
</head>
<body>
<form method="POST" action="/login" modelAttribute="userFormLogin" class="form-signin">
<h2 class="form-heading">Log in</h2>
<input name="username" type="text" class="form-control" placeholder="Username"
autofocus="true"/>
<input name="password" type="password" class="form-control" placeholder="Password"/>
<input name="callbackUrl" type= "hidden" id="callbackUrl">
<h2>${error}</h2>
<br/>
<button class="btn btn-lg btn-primary btn-block" type="submit">Log In</button>
<h4 class="text-center">Create an account</h4>
</form>
</body>
<script>
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("callbackUrl");
console.log(c);
document.getElementById("callbackUrl").value = c;
</script>
</html>
add #RequestParam("callbackUrl") String callBackUrl to the method in your controller.
Like so:
public String myMethod(#RequestParam("callbackUrl") String callBackUrl, …) {
System.out.println(callBackUrl); //this will print the url to console
}
Form:
<form method="POST" name="contactform" action="form-handler.php">
<label for='name'>Name:</label>
<input type="text" name="name" />
<label for='email'>Contact Number:</label>
<input type="text" name="phone" />
<label for='phone'>Email:</label>
<input type="text" name="email" />
<label for='message'>Requirements:</label>
<textarea name="message"></textarea>
<input type="submit" value="Submit" name="submit" class="quoteButton" />
</form>
Code:
HtmlNode.ElementsFlags.Remove("form");
HtmlNodeCollection fromNodes = doc.DocumentNode.SelectNodes("//form");
foreach (HtmlNode formNode in fromNodes)
{
var inputs = formNode.SelectNodes(".//input");
}
"//input" works and when I check the children xpath I see:
/html[1]/body[1]/div[1]/div[3]/div[2]/div[1]/div[1]/input[2]
Which means, according to HAP, form doesn't even include the input!
".//input" that selects subnodes of the current formNode doesn't work (returns null)!
How to fix this I added the following but it doesn't work
HtmlNode.ElementsFlags.Remove("form");
Any idea?
Edit (+Example):
In the next sample the inputs variable is also null.
var doc = new HtmlDocument();
doc.LoadHtml(#"
<!DOCTYPE html>
<html>
<head>
<title>Form Test</title>
</head>
<body>
<form>
<input type=""text"" />
<input type=""reset"" />
<input type=""submit"" />
</form>
</body>
</html>
");
HtmlNode.ElementsFlags.Remove("form");
IEnumerable<HtmlNode> fromNodes = doc.DocumentNode.Descendants("form");
foreach (HtmlNode formNode in fromNodes)
{
var inputs = formNode.SelectNodes(".//input");
}
Solved!
HtmlNode.ElementsFlags.Remove("form");
should be called before loading the document.
My bad :D
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'