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

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>

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>

How to remove the empty options in a select box?

i have a select box which is really simple but it keeps outputting empty options which i don't have these options. why is this?
<form id ="orderby" action="" method="post">
<select name="orderby"style="float:right;">
<option selected="true" style="display:none;">choose view order</option>
<option value="ASC" >Ascending<option>
<option value="DESC">Descending<option>
</select>
<input type="submit" value="Arrange" />
</form>

There's no empty options. Your problem is because of not closing properly second and third option tags. Try this:
<form id ="orderby" action="" method="post">
<select name="orderby"style="float:right;">
<option selected="true" style="display:none;">choose view order</option>
<option value="ASC" >Ascending</option>
<option value="DESC">Descending</option>
</select>
<input type="submit" value="Arrange" />
</form>

Because your selected option is set to display:none, either remove that or set one of the other options to selected.
Small detail you should use selected="selected" instead of true.

Pass value of <select> via url on form submit

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"

Multiple Select in JQuery Mobile becomes empty when I change it to multiple

I do have a html input field select that is populated dynamically with values from MySQL database using jquery mobile. It is working perfectly but now I needed to change it to multiple select of options.
Please, see how my input was before this change:
<div id="landmark-1" data-landmark-id="1">
<form id = "cname" onsubmit="return submitForm();">
<label for "id">Employee's Name:</label><br/>
<select name="id" id="id">
<option value=""></option>
</select><br/>
<input type="submit" value="Clock-In" id="enviar_in" data-inline="true">
</form>
</div>
Now, see how it looks like after I changed it to accept multiple select:
<div id="landmark-1" data-landmark-id="1">
<form id = "cname" onsubmit="return submitForm();">
<label for "id">Employee's Name:</label><br/>
<select name="id" id="id" multiple="multiple" data-native-menu="false">
<option value=""></option>
</select><br/>
<input type="submit" value="Clock-In" id="enviar_in" data-inline="true">
</form>
</div>
It pop up the box for multi-select the options with the "x" to close the box and everything but does not show the populated data from MySQL.
Is there any thing that I am missing?
Thank you in advance.

Have you tried this. After the select is populated dynamically update the select using refresh().
//refresh value
$('#id').selectmenu('refresh');
//refresh and force rebuild
$('#id').selectmenu('refresh', true);

Refresh the select menu after populating .
$('#id').selectmenu('refresh');

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?