Change form select name based on dropdown option value - javascript

I have a search form that looks like this:
<form action="https://someform.foo" target="_blank">
<div class="searchTerm">
<input placeholder="Search here" autofocus="autofocus" id="query" class="searchbox" name="queryString">
<input type="hidden" name="format" value="all">
</div>
<div class="dropdown">
<select name="scope" id="searchLibrary" class="custom-dropdown-menu">
<option name="scope" value="aa:aaaa" selected>Search A</option>
<option name="subscope" value="bb:bbbb::bb:bbbb">Search B</option>
<option name="scope" value="cc:cccc">Search C</option>
<option name="scope" value="dd:dddd">Search D</option>
<option name="scope" value="">Search E</option>
</select>
</div>
<input type="submit" class="headersubmit" value="" title="Search">
</form>
When the form is submitted, the user is directed to a search results page, with the URL formed on the basis of the options selected. The dropdown option name is setting the parameter name in the URL (scope).
For example, if the user selects Search A from the options, the URL looks like this:
https://someform.foo/?queryString=SomeInput&format=all&scope=aa:aaaa
The scope/subscope parameter is set by the select name value, but if a user does select Search B from the search box, I need 'scope' to become 'subscope' in the resulting URL.
But selecting Search B needs to result in this URL:
https://someform.foo/?queryString=SomeInput&format=all&subscope=bb:bbbb::bb:bbbb
I can't get the parameter element to be called subscope, it's always called scope.
I've been trying some jQuery and have been testing with this fiddle. I can get the alert to appear to tell me that the select name has changed, but it doesn't actually change the URL parameter.
All advice/documentation/suggestions appreciated!

On submit, you can identify the selected option's name and value, which you can use to generate a URL:
const searchLibrary = document.querySelector('#searchLibrary');
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const option = searchLibrary.options[searchLibrary.selectedIndex];
const name = option.getAttribute('name');
const { value } = option;
const queryString = document.querySelector('#query').value;
const url = `https://someform.foo/?queryString=${queryString}&format=all&${name}=${value}`;
console.log('Redirecting to ' + url);
// window.open(url);
});
<form action="https://someform.foo" target="_blank">
<div class="searchTerm">
<input placeholder="Search here" autofocus="autofocus" id="query" class="searchbox" name="queryString">
<input type="hidden" name="format" value="all">
</div>
<div class="dropdown">
<select name="scope" id="searchLibrary" class="custom-dropdown-menu">
<option name="scope" value="aa:aaaa" selected>Search A</option>
<option name="subscope" value="bb:bbbb::bb:bbbb">Search B</option>
<option name="scope" value="cc:cccc">Search C</option>
<option name="scope" value="dd:dddd">Search D</option>
<option name="scope" value="">Search E</option>
</select>
</div>
<input type="submit" class="headersubmit" value="" title="Search">
</form>

Related

Is there a way to combine multiple search functions into a dropdown selection?

I have multiple search functions/text boxes that I would like to condense into a textbox + dropdown selection.
http://jsfiddle.net/rhnt9vme/3/
<div>
<form>
<input type='text' id='searchOneInput' />
<button type='submit' onclick='searchOne()' target="_blank">Search 1</button>
</form>
</div><br>
<div>
<form>
<input type='text' id='searchTwoInput' />
<button type='submit' onclick='searchTwo()' target="_blank">Search 2</button>
</form>
</div><br>
<div>
<form>
<input type='text' id='searchThreeInput' />
<button type='submit' onclick='searchThree()' target="_blank">Search 3</button>
</form>
</div><br>
function searchOne(){
var searchOneInput = document.getElementById('searchOneInput').value;
window.open("http://one.com/search=" + searchOneInput);
}
function searchTwo(){
var searchTwoInput = document.getElementById('searchTwoInput').value;
window.open("http://two.com/search=" + searchTwoInput);
}
function searchThree(){
var searchThreeInput = document.getElementById('searchThreeInput').value;
window.open("http://three.com/search=" + searchThreeInput);
}
I want to combine these into a dropdown selection single textbox search that looks like this:
<form>
<input type="text" id="userInput" />
<select id="dropdown">
<option value="">Search 1</option>
<option value="">Search 2</option>
<option value="">Search 3</option>
</select>
<button type="submit" onclick="">Search</button>
</form>
Set an ID to your form and listen for "submit" event using Element.addEventListener() method
Set the respective websites URL inside the <option>s value attribute
Don't forget to trim the user input, just in case of accidental wrapping whitespaces
document.getElementById("searchForm").addEventListener("submit", function(ev) {
ev.preventDefault(); // Comment out if not needed
var dropdownURL = document.getElementById("dropdown").value;
var searchInput = document.getElementById("userInput").value.trim();
var address = dropdownURL + searchInput;
console.log(address);
window.open(address);
});
<form id="searchForm"> <!-- PS: add ID to form -->
<input type="text" id="userInput">
<select id="dropdown">
<option value="http://one.com/?search=">Search 1</option>
<option value="http://two.com/?search=">Search 2</option>
<option value="http://three.com/?search=">Search 3</option>
</select>
<button type="submit">Search</button>
</form>
In case you need a combined URI string with additional suffixed query parameters like
https://example.com/?search=**USERINPUTHERE**&c=%2FDefault.asp
than you could use a placeholder in the set of not URI allowed characters, like |, and replace it with the user input string using String.prototype.replace()
document.getElementById("searchForm").addEventListener("submit", function(ev) {
ev.preventDefault(); // Comment out if not needed
var dropdownURL = document.getElementById("dropdown").value;
var searchInput = document.getElementById("userInput").value.trim();
// Replace "|" with the user input
var address = dropdownURL.replace(/\|/, searchInput);
console.log(address);
window.open(address);
});
<form id="searchForm"> <!-- PS: add ID to form -->
<input type="text" id="userInput">
<select id="dropdown">
<option value="http://one.com/?search=|">Search 1</option>
<option value="http://two.com/?search=|">Search 2</option>
<option value="http://three.com/?search=|">Search 3</option>
<option value="https://four.com/?search=|&c=%2FDefault.asp">Search 4</option>
</select>
<button type="submit">Search</button>
</form>
PS: since the order of query params is not important, you can always define your string like: https://example.com/?c=%2FDefault.asp&search= and use the first example anyways.

Change form action based on form select field

I can't get the form action to change based on a user's drop-down selection. What I want to do is have the form redirect to a different page, then the default for the form if a user selects "Student Loans" from the select field named "agency".
In other words, what I want to do is that if someone select "student loans" for the agency, I want the page to submit to /quote/quotes-sl.php instead of quote/quotes.php (the default of the form).
Here is my form code:
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" onsubmit="submit_function(this)" action="/quote/quotes.php" method="post" name="tdhcustom-pre-1-form">
<input id="edit-lead-source-description" name="lead_source_description" type="hidden" value="test" />
<label class="edit-owed" for="edit-owed"> Amount Owed: <span class="form-required" title="This field is required.">*</span>
</label><select id="owed" class="form-select required" name="owed">
<option selected="selected" value="">Select...</option>
<option value="$10,000 to $14,999">$10,000 to $14,999</option>
<option value="$15,000+">$15,000+</option>
</select>
<label class="edit-agency" for="edit-agency"> Problem With: <span class="form-required" title="This field is required.">*</span>
</label><select id="agency" class="form-select required" name="agency">
<option selected="selected" value="">Select Agency...</option>
<option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option>
<option value="FEDERAL">Federal Taxes</option>
<option value="STATE">State Taxes</option>
</select></div>
<input id="edit-submit" class="form-submit" height="31" name="submit" src="test.com/test.jpg" type="image" value="Submit" width="214" />
<input id="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" name="form_build_id" type="hidden" value="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" />
<input id="edit-tdhcustom-pre-1-form" name="form_id" type="hidden" value="tdhcustom_pre_1_form" />
</form>
Here is the javascript:
<script>
function submit_function(form) {
var selected = document.getElementById('Agency');
var dataset = selected[selected.selectedIndex].dataset;
if (dataset.action) {
form.action = dataset.action;
}
return true;
};
</script>
Add trigger on selected option val = "Student Loan" , then change attribute "action" form to url "/quote/quotes-sl.php"
$('#agency').on('change',function(){
var selected = $(this).val();
if(selected == "Student Loan")
$('#tdhcustom-pre-1-form').prop('action',"/quote/quotes-sl.php");
});
CMIIW :D
You want to change the form action based on an onchange event from your <select> ... but you'll also want to remove the onsubmit attribute from your form, like so:
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" action="/quote/quotes.php" method="post" name="tdhcustom-pre-1-form">
Assuming you're going to have data attributes on all the options like this:
<select id="agency" class="form-select required" name="agency">
<option selected="selected" value="">Select Agency...</option>
<option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option>
<option value="FEDERAL" data-action="/quote/quotes-s2.php">Federal Taxes</option>
<option value="STATE" data-action="/quote/quotes-s3.php">State Taxes</option>
</select>
You can just replace your <script> block with:
<script>
(function() {
var theForm = document.getElementById('tdhcustom-pre-1-form');
var theSelector = document.getElementById('agency');
theSelector.onchange = function() {
theForm.action = theSelector[theSelector.selectedIndex].getAttribute('data-action');
}
})();
</script>
That's pure JavaScript - so without jQuery (or any other framework).

Submit select option and current page url parameter

I have webpage like: index.php/voting/?name=someName which has form with select options:
<form id="voting-form" method="GET" action="index.php/vote/">
<select name="company" id="company">
<option value="company1">company 1</option>
<option value="company2">company 2</option>
<option value="company3">company 3</option>
</select>
<input type="submit" value="Submit">
</form>
I need to submit this form with select value and url name parameter from current page. For example user chose company1: index.php/vote/?company=company1&name=someName
I tried to modify form action like this:
var url_string = window.location.href
var url = new URL(url_string);
var name = url.searchParams.get("name");
document.getElementById('voting-form').action = "index.php/vote/?name=" + name +"&";
But when I submit button, I am redirected to index.php/vote/?company=company1. so name param is missing
You can add to form input with type hidden to add this to url params
<input type="hidden" name="name" value"someName" id="nameInput">
To set value of input you can use your JS with a bit modification
var url = new URL(window.location.href),
name = url.searchParams.get("name");
document.getElementById('nameInput').value = name;
or PHP like in #Globus example
The form post doesn't care about your javascript, and does what it pleases.
You should create a hidden field in your form where you store the name in your GET parameter, so that the form submission also adds this parameter to the URL.
Change your code to:
<form id="voting-form" method="GET" action="index.php/vote/">
<select name="company" id="company">
<option value="company1">company 1</option>
<option value="company2">company 2</option>
<option value="company3">company 3</option>
</select>
<input name="name" value=<?=$_GET['name']?> type="hidden" />
<input type="submit" value="Submit">
</form>

How can I insert a variable into the resulting url parameter string after submitting my GET form?

I have a form that queries a library database on another site. It works perfectly if I only include input fields for the "format" and "keyword" because the resulting parameters passed to the url come out in the correct order and the destination site recognizes it.
However, I also need my form to have an input field to select to search by "Author", "Title", "Subject" etc. This is what causes the problem. The destination site only recognizes this parameter if it is in the middle of the url (inside the keyword parameter).
My current resulting url:
http://alpha2.suffolk.lib.ny.us/search~S50/X?SEARCH=harry&searchscope=50&SORT=D&m=b
What I need the url to look like:
http://alpha2.suffolk.lib.ny.us/search~S50/X?SEARCH=t:(harry)&searchscope=50&SORT=D&m=b
If you compare the two you will notice a couple differences. First, ignore the parentheses around harry. That doesn't make a difference. The real issue is how do I get the "t:" to be inserted into my url? The "t:" comes from selecting "Title" as the thing to search by.
Here is my current form HTML (If you remove the "searchtype" select box at the bottom the form will execute without errors, but I need it to execute with it.)
<form class="form-inline" role="search" method="get" name="searchform" id="searchform" action="http://alpha2.suffolk.lib.ny.us/search~S50/X">
<div class="form-group" style="float: left; margin-top: 6px;">
<label class="form-title">Search Collection</label>
</div>
<div class="form-group">
<input type="text" value="" name="SEARCH" id="SEARCH" placeholder="Enter Search Terms..." />
<input type="hidden" value="50" name="searchscope" />
<input type="hidden" value="D" name="SORT" />
</div>
<div class="form-group" style="float: left; margin-top: 3px;">
<label for="searchformat">For:</label>
<select name="m" id="m">
<option value="">ANY</option>
<option value="a">BOOK</option>
<option value="e">EBOOK DOWNLOAD</option>
<option value="l">LARGE PRINT BOOK</option>
<option value="b">BLU-RAY</option>
<option value="g">DVD</option>
<option value="i">AUDIO BOOK CD</option>
<option value="h">AUDIO BOOK MP3CD</option>
<option value="x">EAUDIOBOOK DOWNLOAD</option>
<option value="q">PLAYAWAY</option>
<option value="j">MUSIC CD</option>
<option value="p">MAGAZINE/NEWSPAPER</option>
<option value="n">EMAGAZINE DOWNLOADS</option>
<option value="v">PLAYAWAY VIEW</option>
<option value="s">VIDEO GAME</option>
<option value="r">CD-ROM</option>
<option value="d">VHS</option>
<option value="t">GAMES/PUZZLES</option>
<option value="f">DIGITAL IMAGE</option>
<option value="z">EVIDEO DOWNLOADS</option>
<option value="y">EMUSIC DOWNLOADS</option>
<option value="c">SHEET MUSIC</option>
<option value="m">MAP</option>
<option value="w">ONLINE RESOURCE</option>
<option value="o">OTHER MATERIALS</option>
</select>
</div>
<div class="form-group" style="float: left; margin-top: 3px;">
<label for="searchtype">By:</label>
<select name="" id="searchtype">
<option value="a:"> Author</option>
<option value="t:"> Title</option>
<option value="d:"> Subject</option>
<option value="N:"> Note</option>
<option value="" selected="selected"> Keyword</option>
</select>
</div>
<button class="btn btn-primary" id="searchsubmit" type="Submit">GO</button>
</form>
EDIT:
The attempted Javascript (as requested in the comments):
<script>
function searchSubmit() {
m = document.getElementById("m").value;
t = document.getElementById("searchtype").value;
a = document.getElementById("searcharg").value;
var newurl = "alpha2.suffolk.lib.ny.us/search/X~S22?SEARCH="; + t + a + "&searchscope=50&SORT=D&m=" + m;
var searchform = document.getElementById("searchform");
searchform.action = newurl; searchform.submit();
}
</script>
What I would do is get the searchtype-value and add it to the input-search before submitting. Here is a JS-fiddle example:
$(document).ready(function(){
$("#searchform").on("submit", function(e){
var keyWord = $("#SEARCH").val();
var searchtype = $("#searchtype").val();
$("#SEARCH").val(searchtype + keyWord);
});
});
If you want to use the JavaScript approach, you will have to use AJAX and prevent the default behavior of the button.
document.getElementById("searchsubmit").addEventListener("click", function(event){
event.preventDefault();
var xhttp = new XMLHttpRequest();
//here you set up your variables. One example is
var mysearch = "SEARCH=" + document.getElementById("searchtype").value + document.getElementById("SEARCH").value;
xhttp.open("GET", "yourURL?" + yourVariables, true);
xhttp.send();
});

Multiple option selects to create unique shopping cart SKU

Is there a way of inserting a string into a field, whereby the string is predetermined depending on what options are selected from two drop down menus?
This is so that a combination of two drop down menus creates a unique SKU for that product, and that string referred to as a SKU is inserted into the input value of the item_number variable and then passed to paypal during checkout.
I will use the example of selling tee-shirts. So the combinations will be black/small, black/large, white/small, & white/large. And each will have a unique SKU of TEESHIRT-BS, TEESHIRT-BL, TEESHIRT-WS & TEESHIRT-WL respectively.
Here is my HTML for the option selects, however, I think I need some JavaScript to insert the SKU into the value field.
<input type="hidden" name="on0" value="colour"><b>select colour</b></><br>
<select name="os0" >
<option value="black">black</option>
<option value="white">white</option>
</select>
<br>
<br>
<input type="hidden" name="on1" value="size"><b>select size</b></><br>
<select name="os1" >
<option value="small">small</option>
<option value="large">large</option>
</select>
<!-- SKU-->
<input type="hidden" name="item_number" value="">
Try the following:
var sizeList = document.getElementById('size');
var colorList = document.getElementById('color');
sizeList.onchange = function() {
generateSku();
};
colorList.onchange = function() {
generateSku();
};
function generateSku() {
var selectedSize = sizeList.options[sizeList.selectedIndex].text;
var selectedColor = colorList.options[colorList.selectedIndex].text;
document.getElementById('sku').value = 'TEESHIRT-' + selectedColor.charAt(0).toUpperCase() + selectedSize.charAt(0).toUpperCase();
}
generateSku();
<input type="hidden" name="on0" value="colour"><b>select colour</b></><br>
<select id="color" name="os0" >
<option value="black">black</option>
<option value="white">white</option>
</select>
<br>
<br>
<input type="hidden" name="on1" value="size"><b>select size</b></><br>
<select id="size" name="os1" >
<option value="small">small</option>
<option value="large">large</option>
</select>
<!-- SKU-->
<input id="sku" name="item_number" value="">

Categories