We Keep Coding

javascript to make query strings autofill a form

I have very little coding experience, but am generally a quick learner and have been looking things up piece by piece to learn how to create a few simple things I need for a webpage. I want to be able to autofill a form using query strings in my URL (i.e. so that example.com?color=blue will automatically load the form with the option "blue" already filled out in the form section named "color").
Here is the part of my html code that makes the form:
<form id="wsite-com-product-options">
<div class="wsite-com-product-option-groups">
<div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo">
<label class="wsite-com-product-label " for="wsite-com-product-option-Photo">
<b class="wsite-com-product-title">Photo</b>
</label>
<select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo" >
<option selected="selected" value="">--</option>
<option class="wsite-com-dropdown" value="Pelicans">
Pelicans
</option>
<option class="wsite-com-dropdown" value="Dolphins">
Dolphins
</option>
<option class="wsite-com-dropdown" value="Rams">
Rams
</option>
</select>
</div>
</div>
</form>
So I thought if I typed the URL for my website, followed by ?Photo=Pelicans or ?Photo=Dolphins, that form would automatically be filled out with the answer Pelicans or Dolphins, respectively. Obviously that didn't work, and my understanding now is that I need some javascript code to make the query string work like that? But I have been trying for a couple weeks now to figure out how to do that, examining every relevant example code I could find line by line to try to understand what they were doing, and none of it has worked. Is there a relatively simple code that would accomplish this function, or am I just completely out of my depth as a noob here?

Assuming you're trying to fetch your parameter from the current URL given to your users and would be selecting the element accordingly.
I've written javascript code for you. check if it works.
In case you want to use your current URL update the URL in javascript with window.location.href.
var url_string = "http://www.mywebsite.com?photo=Rams"; //window.location.href (set for current url)
var url = new URL(url_string);
var c = url.searchParams.get("photo");
document.querySelector('option[value="'+c+'"]').selected = true
console.log(c);
<form id="wsite-com-product-options">
<div class="wsite-com-product-option-groups">
<div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo">
<label class="wsite-com-product-label " for="wsite-com-product-option-Photo">
<b class="wsite-com-product-title">Photo</b>
</label>
<select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo" >
<option selected="selected" value="">--</option>
<option class="wsite-com-dropdown" value="Pelicans">
Pelicans
</option>
<option class="wsite-com-dropdown" value="Dolphins">
Dolphins
</option>
<option class="wsite-com-dropdown" value="Rams">
Rams
</option>
</select>
</div>
</div>
</form>

How to add input value using jQuery

So I have a form that submits device,color and the problem(with the device) and it displays the correct price underneath nicely using jQuery but I can't figure out how to insert the jQuery result into the hidden input value so that it also sends the price to next page(checkout page) Thanks :)
<form method="POST" action="../action.php">
<select class="custom-select mr-sm-2" name="device" id="inlineFormCustomSelect">
<option value="Motorola Edge">Moto Edge</option>
<option value="Motorola Edge Plus">Moto Edge Plus</option>
</select>
<select class="custom-select mr-sm-2" name="color" id="inlineFormCustomSelect">
<option selected>Select Color..</option>
<option value="Solar Black">Solar Black</option>
<option value="Midnight Magneta">Midnight Magneta</option>
</select>
<select class="custom-select mr-sm-2" name="issue" id="inlineFormCustomSelect3">
<option data-price="£0.00" data-total="" selected>Select Problem..</option>
<option data-price="£40.00" data-total="£42.00" value="Screen Repair">Damaged Screen</option>
<option data-price="£15.00" data-total="£15.75" value="Battery Replacement">Battery Replacement</option>
<option data-price="£35.00" data-total="£36.75" value="Audio Repair">Faulty Audio</option>
<option data-price="£35.00" data-total="£36.75" value="Mic Repair">Faulty Microphone</option>
<option data-price="£35.00" data-total="£36.75" value="Cam Repair">Faulty Camera</option>
</select>
<p><i id="price"></i>+Additional Fees</p>
<p>Total:<span id="total"></span></p>
<script type="text/javascript" language="javascript">
$(function(){
$('select').change(function(){
var selected = $(this).find('option:selected');
$('#price').html(selected.data('price'));
$('#total').html(selected.data('total'));
}).change();
});
*//This is some code I tried below//*
$(document).ready(function(){
$('input[id="price"];').val(price);
});
</script>
<input type="hidden" id="price" name="price" value=''>
<button type="submit" name="submit">

In the case that you are trying to use the same values in an entirely different page. You should know that JS variables do not automatically save, you will lose them after refreshing the page or loading another page.
In order to save variables in the browser, you can use localStorage or localSession. In this particular case, I suggest localSession. localSession will delete the data when the browser is close or the cache is cleared.
Also, you could remove the semicolon ';' from $('input[id="price"];').val(price)
I do not suggest using localStorage or localSession for important forms, this requires back-end. You could use PHP, Node, Django, or any back-end for managing forms. But what you tried was ultimatly right, it's just that there was no variable set to retrive the data from. Hence, why the input could be left empty.

One way you can do this is to update the hidden field when you update the text field.
$(function(){
$('select').change(function(){
var selected = $(this).find('option:selected');
$('#price').html(selected.data('price'));
$('#total').html(selected.data('total'));
$('#hiddenPrice').val(selected.data('price'));
}).change();
});
HTML:
<input type="hidden" id="hiddenPrice" name="hiddenPrice" value="">
Notes:
In your question, the hidden input has the same Id as the text field. That's not valid HTML. So give your hidden input a different Id (such as id='hiddenPrice'). Also, be aware that hidden fields can still be modified by a user. You should validate the posted price in your server side code to verify it is the correct price.

Try these
$('select[name="issue"]').on('change', function() {
var issue = parseFloat($(this).children("option:selected").data('price'));
$('input[name="price"]').val(issue);
// or this one below
$('input[name="price"]').val(issue).trigger('change');
});
Also, try changing the id of your hidden input field and remove or extract this '£' from the data-price.

Simulate CTRL keypress via checkbox

If you have a form consisting of a multi-select of say 50 options followed by a text-box, holding the ctrl key is the way we normal select multiples, but sometimes your 32 clicks in and well things happen... Now you've selected one or none. So, what I want to know is if it is possible to create a checkbox that when checked all clicks within a specific select field are treated as if ctrl is being held down when left click occurs.
<form action="" method="post">
<input type="checkbox" name="marker" value="1"> Click here to select multiple<br>
<select multiple style="width:50%" name="employees[]">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
|
|
|
v
50 more here
</select> <br>
Your message here:<br>
<textarea name="msg" style="width:50%"></textarea><br>
<input name="submit" type="submit" value="submit" />
</form>

With JQuery you can easily manipulate <select>, see .val() function. With it you can know what are selected and you can add what you want to the selection.

This is a possible script solution.
Based on this solution
$('option').mousedown(function(e) {
if ($('#marker').is(":checked")) {
e.preventDefault();
$(this).prop('selected', !$(this).prop('selected'));
return false;
}
});

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>

Adding a drop down menu with jquery

Here's the situation I have a webpage which has one drop down called prefer. I wanted the user to be able to choose one option and then have a link next to it called "Add" which generates another textbox with the same options, i was going to use jquery to show an additional drop down.
But if possible I wanted to put the select box in an array and then loop through this process infinitely. so I could call select name="prefer[]" and somehow put in a variable which increases.
Afterwards, I could use php to cycle through the array and utilize each one.
Could I do this with Javascript somehow?

You could clone the select box and append it to the form(I put it in a div). Edit: When you post you should get an array of values in php(prefer[index]).
$('#add').click(function(){
$('#myselect').after($('#myselect').clone());
});
<form method="post" id="theForm">
<div id="myselect">
<select id="prefer" name="prefer[]">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
<option value="five">five</option>
</select>
</div>
<input type="button" id="add" value="add">
<input type="submit" id="submit" value="submit">
</form>
php example:
<?php
$prefer = $_POST['prefer'];
// Note that $prefer will be an array.
foreach ($prefer as $s) {
echo "$s<br />";
}
?>