Pass value of <select> via url on form submit - html

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"

Related

How to modify this HTML form to include a constant?

Here's an example of a search in our SirsiDynix Enterprise catalog using the CloudSourceOA option te=750777545
https://nyit.ent.sirsi.net/client/en_US/default/search/results?qu=html&te=750777545&rt=false%7C%7C%7C%3ECSOA%3Ctitle%7C%7C%7CTitle
I want to pass the variables from a form in libguides to the enterprise. I have a working example for searching "Everything" and a broken example for the CloudSourceOA
My Form sends the search types like title and the term that the user enters in the input field to the qu=, however, I don't know how to append the te=750777545. This value will always be set as I want the widget to always search cloudsource rather than everything.
Here's a link to my libguide for troubleshooting. I was unable to add the code successfully here.
https://libguides.nyit.edu/c.php?g=1216772&p=8899584&preview=77a637b8476d8bbe2575a12fd18e3b61
It's unclear what te or the 750777545 value is, but if you need to hardcode that to your form you can do so with a hidden input set to that value. Fair warning, without knowing what this form field is, this may not be the best approach so you'll want to consult any documentation if this is specific to an internal NYIT application.
<form action="https://nyit.ent.sirsi.net/client/en_US/default/search/results?" id="searchForm" method="&te=""get"" name="searchForm">
<h5>Search the NYIT Catalogue</h5>
<div class="searchline">
<input name="ln" type="hidden" value="en_US"><br>
<select class="dropDown" id="restrictionDropDown" name="rt">
<option value="">
All Fields
</option>
<option value="false|||TITLE|||Title">
Title
</option>
<option value="false|||AUTHOR|||AUTHOR">
Author
</option>
<option value="false|||SUBJECT|||SUBJECT">
Subject
</option>
<option value="false|||ISBN|||ISBN">
ISBN
</option>
<option value="false|||ISSN|||ISSN">
ISSN
</option>
<option value="false|||DOI|||DOI">
DOI
</option>
<option value="false|||JOURNAL|||Journal Title">
Journal Title
</option>
</select>
<input type="hidden" id="te" name="te" value="750777545">
<p><input accesskey="s" id="qu" maxlength="256" name="qu" style="width:250px;" title="Search For:" type="text" value=""><input class="button" id="searchButton" title="Search" type="submit" value="Search"></p>
</div>
</form>

1 Form (with dropdown select and text input) using angular.js

I am trying to create a form using the angular.js, of which I know very little. I want the form to pass two fields, a select and input field. This is what I have, however it is only fetching the text input field. Is the form set up correctly?
<form ng-submit="getStoresByAdd()">
<select>
<option value="US" selected>United States</option>
<option value="GB">United Kingdom</option>
</select>
<input type="text" ng-model="wtbSearch" placeholder="ZIP/Postal Code">
<button type="submit" name="submit" class="button" ng-disabled="disableSubmit">Go</button>
</form>

PHP - Post Action

<form method="post" action="/page/?foo=ABC">
<select name="foo">
<option value="ABC">ABC</option>
<option value="DEF">DEF</option>
</select>
<select name="bar">
<option value="GHI">GHI</option>
<option value="JKL">JKL</option>
</select>
<input id="search" type="text" placeholder="Search">
<input type="submit" value="">
</form>
I have the above form on a Wordpress site. If I go to /page/?foo=ABC, this page shows me everything as it should where foo = ABC.
What do I need to set the action as to get the option from the select?
Your form needs to use GET instead of POST:
<form method="get" action="/page/">
Then then all the inputs will be appended to the URL in the manner you seek.
As Marc B said in the comments, use
$_POST['foo']

submitting a text search using jsoup

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.

Using a HTML select element to add get parameters to URL

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?