We Keep Coding

Text box and drop down together

When I click on the Select, its showing up below and to right, but I need the select to hang below input and select. Or is there a custom text box with drop down menu?
I am unable to find one, so I thought about building it my self but the drop down is in wrong location, and I dont see any CSS that can help.
<div>
<input type="text" id="Drop_Down_A" value="Select One..."><!--
--><select id="Drop_Down_A1" style="width: 19px; height: 21px;">
<option value="" disable>Select One...</option>
</select>
</div>
Got the answer I was looking for.
I have posted the new result of what I was after.
<div>
<input type="text" list="Drop_Down_A1" id="Drop_Down_A" value="Select One...">
<datalist id="Drop_Down_A1">
<option value="Select One..." disable>
</datalist>
</div>

I think this plugin can help you https://select2.github.io

I am unsure what you want to achieve with this. Maybe live search? You might want to check this https://silviomoreto.github.io/bootstrap-select/examples/

Unfortunately, there is no way to customise the position of the dropdown in the select box.
However, there are alternatives. I think you are trying to achieve a searchable select box, so here are two solutions:
Use <datalist>. Other than Safari, its support is fairly broad.
Using a library, such as Select2.

How to convert 'Results Per Page' drop down over to links

I currently have a drop down that has multiple values in it (i.e. 50, 100, 200, etc..) which when selected and a button clicked reloads the page and filters a data table to shows however many results were selected.
<form action="#" method="post" class="form-inline" name="normal" id="SearchResultsForm">
<select name="limitNumberOfResults" id="limitNumberOfResultsPerPage"
class="single">
<option value="10">10</option>
<option value="20" selected="selected">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
<input type="submit" class="button" value="Show" name="submitbutton"/>
</form>
I'd like to convert this from a drop down over to a list of links. How would I go about doing this?
I was trying to use something like the following.
<a href="#" onclick="SearchResultsForm.submit();return false;">
10
</a>
<a href="#" onclick="SearchResultsForm.submit();return false;">
20
</a>
However, I'm not sure how to get the results per page value to be recognized.
Thank you!

If you click 10 go to same page with ?limitNumberOfResults=10 then get that value write your code to get result.
10
$per_page = $_REQUEST['limitNumberOfResults'];

Jakir Hossain's answer works (and doesn't require JavaScript) but may require reworking the links to include current state.
Another possibility is for you to use a hidden field and update it when the links are clicked; it does require JavaScript, but you don't have to know about any other parameters that are passed to the server.
<input type="hidden" name="limitNumberOfResults" value="20" />
10
20
var form = document.getElementById('SearchResultsForm');
// Using event delegation to register clicks on the links
form.addEventListener('click', function(e){
if (e.target.tagName === 'A' && e.target.classList.contains('set-result-count') ) {
e.preventDefault();
form.elements.limitNumberOfResults.value = e.target.getAttribute('data-result-count');
}
});

you can use <select onchange='this.form.submit();'></select> in select tag so that when options are changed form gets submitted and you get the results per page value

Javascript & HTML on page calculations

I am fairly new to HTML & Javascript and I have been assigned a task to create a HTML form for a restaurant which allows the user to input their information for a booking.
So far I have created the form for the website and validated each input field in order to ensure the correct information is entered into the necessary fields.
I have also tried to enable the total cost to be calculated on screen so the user can see how much their booking will cost before they click the submit button. However, the code I have thus far does not seem to be functioning as the total price never increases from 0 if an option is picked.
Here is the relevant html code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>Select Party Size:</strong>
<br>
<select name="party" id="party" onblur="validateSelect(name)">
<option value="">Please Select</option>
<option value="5">1 Person (£5)</option>
<option value="10">2 People (£10)</option>
<option value="15">3 People (£15)</option>
<option value="20">4 People (£20)</option>
<option value="25">5 People (£25)</option>
<option value="30">6 People (£30)</option>
<option value="35">7 People (£35)</option>
<option value="40">8 People (£40)</option>
<option value="45">9 People (£45)</option>
<option value="50">10+ People (£50)</option>
</select>
...
<strong> VIP Area? </strong>
<br>
Yes (+£5) <input name="hand" id="left" value="5" onblur="validateRadio(id)" type="radio">
No <input name="hand" id="right" value="0" onblur="validateRadio(id)" checked="" type="radio">
<span class="validateError" id="handError" style="display: none;">Please specify whether you would like a table in the VIP area.</span>
<strong> Total booking cost based on party size <span id="price">0</span> VIP selection: </strong>
Here is the relevant javascript to perform the calculations:
$(document).ready(function(){
$(document).on('change', '#party', function(e) {
$('#price').html(parseInt($(this).val()) + parseInt($('input[name="hand"]:checked').val()));
});
$(document).on('click', 'input[name="hand"]', function(e) {
$('#price').html(parseInt($('#party').val()) + parseInt($(this).val()));
});
});
For example, if the customer selects that there are 6 people in their party(+£30) and they also wish to be seated in the VIP area(+£5), the total price displayed at the bottom of the page would be £35. If anyone has any suggestions as to why my code isn't functioning I would appreciate the help.
Thank you.

HTML select statement and button not working with PayPal

I am struggling to create a button for my website uses paypal subscriptions to manage users on the site. There are several different subscription options and I want to include them in a dropdown box instead of having seperate buttons for each option. However so far I can't figure it out. Currently the site is working using basically a default paypal button that uses a little javascript to make sure people accept the terms and conditions here is the current working code:
<form action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return confSubmit();" method="post">
<p><span style="font-size: 12pt;"><input name="cmd" value="_s-xclick" type="hidden" />
<input name="hosted_button_id" value="HBP3ZG2KGRHC" type="hidden" /></span>
</p>
<p style="text-align: center;"><span style="font-size: 12pt;"><input src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!" border="0" type="image" />
<img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" border="0" height="1" width="1" /></span>
</p>
</form>
with the function confsubmit() being used to make user accept the terms and conditions:
function confSubmit() {
if (!document.getElementById("one").checked) {
alert("Please read and accept the terms and conditions in order to sign up.");
return false;
}}
Now I want to add to this a select statment along the lines of:
<select name="sub_types">
<option value="A1">1 Month </option>
<option value="A2">3 Months </option>
<option value="A3">6 Months </option>
<option value="A4">1 Year </option>
</select>
Now it is my understanding that the important part of the code is the button id value "HBP3ZG2KGRHC" from above which is used by paypal to select the proper subscription type. I can add this select statement into the form no problem but I can't figure out how to pass the selected option's value through the button to paypal so that it selects the proper subscription type. I hope that makes sense. Thanks for the help.

If I understand correctly, you want to vary the hosted_button_id value that is posted to PayPal. I haven't tried this, but it sounds like this might work:
Replace the
<input name="hosted_button_id" value="HBP3ZG2KGRHC" type="hidden" />
with
<select name="hosted_button_id">
<option value="HBP3ZG2KGRHC">1 Month</option>
<option value="[different button id for 3 months]">3 Months</option>
<option value="[different button id for 6 months]">6 Months</option>
<option value="[different button id for 1 year]">1 Year</option>
</select>
assuming you have several hosted_button_ids set up for the various subscription types.

How to show datalist suggestions using javascript?

I find the new <datalist> generally very useful, but I think that the suggestions are not visible enough. Is there a way to trigger the display of datalist suggestions using javascript?
As an example, I have a datalist on an <input type="number"> (jsFiddle).
<label>
Enter a Fibonacci number:
<input type="number" list="fibonacci" min="0" id="myinput">
</label>
<datalist id="fibonacci">
<option value="0">
<option value="1">
<option value="2">
<option value="3">
<option value="5">
<option value="8">
<option value="13">
<option value="21">
</datalist>
<button type="button" id="show-suggestions">Show suggestions</button>
<script>
$('#show-suggestions').click(function() {
// .showSuggestions() does not exist.
// I'd like it to display the suggested values for the input field.
$('#myinput').showSuggestions();
});
</script>
In Chrome, the full list of suggestions is shown only when the input is empty, already has focus, and the user then clicks on the input. The down arrow does not show the suggestions - it simply decrements the value.
I'd like to make the suggestions more visible. As an example I've added a button that's supposed to open the list of suggestions. What do I put in the onClick-handler?
I've used Chrome, jQuery and a number-input in this example, but I'd prefer a generic solution independent of all of those.

If you remove the type="number" your users can get the dropdownlist using the basic alt+downarrow keyboard shortcut.
If that doesn't work for you. I suggest using a hybrid approach such as https://github.com/mmurph211/Autocomplete

Picking your country from a list containing more than 200 options is an ideal candidate for an autocomplete control. Define a with child elements for every country directly in an HTML page:
<datalist id="countrydata">
<option>Afghanistan</option>
<option>Åland Islands</option>
<option>Albania</option>
<option>Algeria</option>
<option>American Samoa</option>
<option>Andorra</option>
<option>Angola</option>
<option>Anguilla</option>
<option>Antarctica</option>
...etc...
</datalist>