In my JSP I'm trying to use JQuery Validate on my Spring form yet the validation never runs. The problem seems to be that the Spring form select element doesn't render attributes in the DOM. Below I have a small example to make the issue clearer with Spring form "foo" and the output in the DOM (note: I have the attribute modelAttribute on my Spring form and path on each Spring select that I have not included here). Is there a way to render the specified attributes?
<form:form id="foo">
<form:select id="test" name="test" required>
<form:option value="">Select Country</option>
<form:option>US</option>
<form:option>Canada</option>
</form:select> <br />
</form:form>
<input type="submit" value="Submit" onclick='$("#foo").valid()'>
<script>
$("#foo").validate();
</script>`
DOM:
<form id="foo">
<select id="test">
<option value="">Select Country</option>
<option>US</option>
<option>Canada</option>
</select>
</form>
Related
I have an HTML form with a element in a page that part of a Sinatra app, e.g.
<form action="/form" method="post">
<p>
<label for="text">Text</label>
<input type="text" name="text" id="text">
</p>
<p>
<label for="select">Selection</label>
<select name="select" id="select">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</p>
<p>
<label for="multi_select" multiple>MultipleSelection</label>
<select name="multi_select" id="multi_select" multiple>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</p>
<p>
<input type="submit" name="submit" value="Submit">
</p>
</form>
If the user selects A & C from the multi_select, the POST handler in Sinatra is supposed to return the selected values, but because params is a hash, it only returns the last selected value (so params[:multi_select] = "C").
For various reasons, I can't use Javascript or other front-end tricks to change how the value is sent. Is there a good way to handle this correctly server-side? I haven't worked much with Sinatra prior to this project.
This discussion implies that the name of the multiselect needs to look like an array for Sinatra to pick up all the values. Try changing it to:
<select name="multi_select[]" id="multi_select" multiple>
I working on a contact form. The point is it should be accessible without JavaScript. If JavaScript is avaible I want ask visitors about some details based on their purpose of contact.
HTML could look like this (labels are skipped on purpose, to shorten the code):
<form action="">
<select name="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<button>Submit</button>
</form>
Well, if I could I would just add some areas that would be shown based on "model". But I can't do it because I don't want to show additional fields to people without JS.
It would be like this:
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<div ng-show="purpose == 'support'">
<input type="text" name="customernumber" />
</div>
<div ng-show="purpose == 'interview'">
Sorry, I'm not giving interviews
</div>
...
<button>Submit</button>
</form>
The point is that I will be asking a lot of additional questions. With JS disabled the visitor will be seeing a bloated contact form with all fields and messages.
I'm looking for a solution that would read the value of and inject HTML from JS file into a specific place.
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
{{injectedHTML}}
...
<button>Submit</button>
</form>
It sounds strange, but everything must be according to the requirements of local municipal office. They want to show these specific fields only to people with JS.
Maybe they think it is good for accessibility. I'm not sure.
Thank you all.
To simply hide set of elements when JavaScript is disabled you could add ng-hide class to elements that should not be displayed. In example:
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<div ng-show="purpose == 'support'" class="ng-hide">
<input type="text" name="customernumber" />
</div>
<div ng-show="purpose == 'interview'" class="ng-hide">
Sorry, I'm not giving interviews
</div>
...
<button>Submit</button>
</form>
The ng-hide class sets display: hidden. When JavaScript is enabled ng-show will evaluate the condition and add or remove ng-hide class from element.
Another fairly simple solution would be to use ng-include to load additional content when appropriate - which obviously would only work when JavaScript is enabled - thus making additional fields hidden when JavaScript is not working.
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<div ng-if="purpose == 'support'" ng-include="'views/supportField.html'">
</div>
<div ng-if="purpose == 'interview'" ng-include="'views/interviewField.html'">
</div>
...
<button>Submit</button>
</form>
Thanks to miensol I started to think about method using "ng-include". Then I realised one thing: Angular can override the HTML.
So I came with this HTML:
<form ng-controller="ContactController">
<select ng-model="purpose" ng-options="p.title for p in possibilities track by p.value">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
<div ng-include="purpose.template"></div>
</form>
And this app.js:
(function(){
var app = angular.module('myApp', []);
app.controller('ContactController', ['$scope', function($scope) {
// array with possible reasons, that we use as <option> in <select>
// the "AJ" is added so you can see the difference
$scope.possibilities =
[
{ title: 'AJ Just saying hi', value='hello', template: 'part-support.html'},
{ title: 'AJ Customer Support', value='support', template: 'part-support.html'},
{ title: 'AJ Interview', value='interview', template: 'part-interview.html'}
];
// select default <option>
$scope.purpose = $scope.possibilities[0];
}]);
})();
Still I got feeling it could be written much better (and it's out of my league).
I have a simple form that I want to pass the user selection via url.
<form method="GET" action="course-registration.asp">
<select>
<option value="#">--Select--</option>
<option value="courseOfferings[special_1005][item_1]=January%2030-31,%202014&course=ArcCHECK / 3DVH Product Training&date=January 30-31, 2013&description=This hands-on product training course focuses on the use of the ArcCHECK 3-dimensional beam dosimetry QA system with 3DVH software.">January 30-31, 2014</option>
</select>
<input type="submit" value="Submit">
</form>
If I alert the value of the select, it shows correctly, but it does not pass to the url when button is pressed.
You need to give a name to the select element
like <select name="dept">
<form method="GET" action="course-registration.asp">
<select name="something">
<option value="#">--Select--</option>
<option value="cof">January 30-31, 2014</option>
</select>
<input type="submit" value="Submit">
</form>
this will make your url lookblike "http://some.co/?something=manything"
I have a piece of html code which represents a part of a website that is supposed to be the search widget for a directory of a faculty in a university
<div id="right_column" class="content_main">
<div class="searchbox">
<form method="POST" action="/faculty/directory_search/" id="searchform">
<h4>Search the Directory</h4>
<input type="text" name="searchterms" value="" />
<select name="category" class="dropdown"> <option value="all" selected="selected">All Categories</option> <option value="Faculty">Faculty</option> <option value="Staff">Staff</option> <option value="Visitors">Visitors</option> <option value="Full time">Full time</option> <option value="Visiting">Visiting</option> <option value="Special Appointment">Special Appointment</option> <option value="Biological Sciences">Biological Sciences</option> </select>
<input type="hidden" name="sort" value="asc" />
<input type="submit" class="submit" value="Search directory" />
<a class="button" href="/faculty/index/desc" id="sortbutton">Sort Alphabetically</a>
</form>
<script type="text/javascript">
$('#searchform').ready(function(){
$('#sortbutton').click(function(){
$('input[name="sort"]').val('desc');
$('#searchform').submit();
return false;
});
});
</script>
</div>
I am trying to input the name "john" and submit the search using jsoup using the following java code (intended for android but it's overall the same java code as for a regular java app)
Document doc = Jsoup.connect("http://www.qatar.cmu.edu/directory/").data("searchterms", "john").post();
However, I keep getting the same page as just "http://www.qatar.cmu.edu/directory/" with no search submitted. I noticed that in the html code there is the submit input type. I'm wondering if I had to submit the search. If so, how can it be done?
I believe you are performing a POST request to the page containing the form, not the forms endpoint. This should work:
Document doc = Jsoup.connect("http://www.qatar.cmu.edu/faculty/directory_search/").data("searchterms", "john").data("sort", "asc").data("category", "all").post();
It makes the POST request directly to the forms endpoint.
I'm on a page like /gallery.php?place=300&name=place1, and I want it so that when I submit this form it goes to /gallery.php?place=300&name=place1&tag=X, where X is the number of the tag selected.
What's wrong here?
<form action="/gallery.php?place=300&name=place1" method="get">
<select name="tag">
<option value=1>Aerial</option>
<option value=2>Autumn</option>
<option value=4>Boats</option>
<option value=6>Buildings</option>
<option value=7>Canals</option>
</select>
<input type="submit" value="Filter"/>
</form>
Use hidden inputs instead of trying to use the query string twice:
<form action="/gallery.php" method="get">
<select name="tag">
<option value=1>Aerial</option>
<option value=2>Autumn</option>
<option value=4>Boats</option>
<option value=6>Buildings</option>
<option value=7>Canals</option>
</select>
<input type="hidden" name="place" value="300" />
<input type="hidden" name="name" value="place1" />
<input type="submit" value="Filter" />
</form>
Using a form with method get was overwriting the query string in your form action.
This extra parameters seem to work for me locally when using "post" instead of "get." Is that it?