Submit select option and current page url parameter - javascript

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>

Related

Redirect on submit based on search query and location

I am trying to add a search feature based on a text input and a drop-down.
So I am trying to make it work with the following form fields:
Text input {text_1}
Drop-down (2 options)
Submit button
If first option is selected in the drop-down the form should be submitted to https://url1/?={text_1}, if second option is selected it should be submitted to https://url2/?={text_1}.
I have written so far:
<form>
<input type="text" id="text_1" name="text_1" value="test" data-alias="" class="form-control">
<select id="selectlist_1" name="selectlist_1" data-alias="" class="form-control">
<option value="option_1" >Option_1</option>
<option value="option_2" >Option_2</option>
</select>
<button type="submit" id="button_1" name="button_1" class="btn btn-primary" >Submit</button>
</form>
Otherwise, there is also this example: https://hii.com/careers/
I give you an example:
<script>
function go(v){
if (v.url.value===1){
v.action="http://www.google.com"
}else {
v.action="http://www.apple.com"
}
}
</script>
<form onsubmit="go(this)">
<input type="text" name="text_1" value="txt">
<select name="url">
<option value="1">Google</option>
<option value="2">Apple</option>
</select>
<input type="submit" value="submit">
</form>
Augment a simple form with the controls you want, with a script that sets up a behaviour where the form's action attribute value changes with the selection in the drop-down control:
<form>
<input name="foobar" />
<select name="fruit">
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
</select>
<script>
(script => {
const fruit_control = script.closest("form").elements.fruit;
fruit_control.addEventListener("change", ev => {
ev.target.form.action = ({
"apples": "https://url_1",
"oranges": "https://url_2"
})[ev.target.value];
});
})(document.currentScript);
</script>
</form>
The value of the text input control will be sent with the query string, i.e. as ?foobar=... at the end of the URL, as the form is submitted, to the URL that's correspondent with the option selected in the drop-down.
Whether you have a submit button at the end of the form, or not, makes no difference to the behaviour of the form because a form may be submitted even without a submit button.
I found a working solution after doing some searches.
Here is solution in case anyone need it.
jQuery('#search_page_form').submit(function() {
// get all the inputs into an array.
var stext = jQuery('#search_page_form #looking-for').val();
var cars = jQuery('#search_page_form #cars').val();
var url = '';
if(cars == 'nns'){
var url = 'https://careers.huntingtoningalls.com/search/?searchby=location&createNewAlert=false&q='+stext;
}else if(cars == 'mt'){
var url = 'https://tsd-careers.hii.com/en-US/search?keywords='+stext;
}else if(cars == 'is'){
var url = 'https://careers.huntingtoningalls.com/search/?searchby=location&createNewAlert=false&q='+stext+'&locationsearch=Pascagoula%2C+MS&geolocation=';
}else if(cars == 'ch'){
var url = 'https://careers.huntingtoningalls.com/search/?searchby=location&createNewAlert=false&q='+stext+'&locationsearch=Newport+News%2C+VA&geolocation=';
}
if(url != ''){
window.open(url, '_blank');
}else{
alert('Please select Division');
}
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="search_page_form" onsubmit="return false;">
<div class="form-group">
<label for="looking-for">What are you looking for ?</label>
<input type="text" id="looking-for" name="looking-for" class="form-control" placeholder="Enter keywords....">
</div>
<div class="form-group">
<select id="cars" name="cars" class="form-control nice-select">
<option selected="" value="">Division</option>
<option value="nns">NEWPORT NEWS SHIPBUILDING</option>
<option value="mt">MISSION TECHNOLOGIES</option>
<option value="is">INGALLS SHIPBUILDING</option>
<option value="ch">CORPORATE HEADQUARTERS</option>
</select>
</div>
<div class="form-group">
<input type="submit" value="SEARCH" class="btn white-btn search_btn">
</div>
</form>

How to replace base url of a form action using JavaScript?

I'm trying to make a simple search for Wikipedia where I can type what I want to search and a select where I can select the language. What I'm trying to do is to get the select value to be able to search in different languages so I just replace the language string in the url of wikipedia.org
(e.g. If I select French in the select dropdown the form should redirects me to fr.wikipedia.org and if I select English, it should redirects me to en.wikipedia.org)
Here's what I tried so far:
<form id="searchWikipedia" action="" onsubmit="searchWikipedia()">
<input id="search" name="search" type="text" />
<select id="lang" name="language">
<option value="en">English</option>
<option value="fr">French</option>
</select>
</form>
<script>
function searchWikipedia() {
var select = document.getElementById("lang");
var selectValue = select.options[select.selectedIndex].value;
var searchValue = document.getElementById("search").value;
document.getElementById("searchWikipedia").action = selectValue + ".wikipedia.org/w/index.php?search=" + searchValue;
document.getElementById("searchWikipedia").submit();
}
</script>
Now, on submit I get this url: http://localhost/en.wikipedia.org/w/?search=cat
What I'm expecting is that the browser should redirect to en.wikipedia.org/w/?search=cat
How can I replace base url of a form action using JavaScript? Are there any better methods of doing this?
you need to append the protocol at the start of the url or the browser will take it as a relative url to your document.
<form id="searchWikipedia" action="" onsubmit="searchWikipedia()">
<input id="search" name="search" type="text" />
<select id="lang" name="language">
<option value="en">English</option>
<option value="fr">French</option>
</select>
</form>
<script>
function searchWikipedia() {
var select = document.getElementById("lang");
var selectValue = select.options[select.selectedIndex].value;
var searchValue = document.getElementById("search").value;
// append https at the start
document.getElementById("searchWikipedia").action = "https://" + selectValue + ".wikipedia.org/w/index.php?search=" + searchValue;
document.getElementById("searchWikipedia").submit();
}
</script>
Add Submit input tag, to perform action
<form id="searchWikipedia" action="" onsubmit="searchWikipedia(event)">
<input id="search" name="search" type="text" />
<select id="lang" name="language">
<option value="en">English</option>
<option value="fr">French</option>
</select>
<input type="submit" value="Search">
</form>
<script>
function searchWikipedia(event) {
event.preventDefault();
var select = document.getElementById("lang");
var selectValue = select.options[select.selectedIndex].value;
var searchValue = document.getElementById("search").value;
// it will open new tab
window.open("https://" + selectValue + ".wikipedia.org/w/index.php?search=" + searchValue);
// if you want to replace same url then use this
// window.location.replace(`https://${selectValue}.wikipedia.org/w/index.php?search=${searchValue}`);
}
</script>
I think, it will be helpful for you.

Change form select name based on dropdown option value

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>

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).

Changing form action based on select value - with JavaScript

I have a form that I wish to change the action of, depending on what value a user selects in a drop down box.
The example code below shows each option value, I want to change the form action to whatever option value is chosen on a button press, how can I do this with JavaScript?
<form name ="form1" action="VariableFormAction" method ="post" target="_blank">
<select name="formchoice">
<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>
</select>
<input type="submit" value="Go" class="button">
</form>
In order to do this you need to specify an onSubmit JavaScript event handler on the form that retrieves the value of the select list and updates the form action.
You can do this using the following code.
//Add onSubmit() event handler to form to call JavaScript method when the form is submitted.
<form name ="form1" onSubmit="actionOnSubmit()" method ="post" target="_blank">
<select id="formchoice" name="formchoice">
<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>
</select>
<input type="submit" value="Go" class="button">
</form>
<script>
function actionOnSubmit()
{
//Get the select select list and store in a variable
var e = document.getElementById("formchoice");
//Get the selected value of the select list
var formaction = e.options[e.selectedIndex].value;
//Update the form action
document.form1.action = formaction;
}
</script>
Note, for this to work you will need to make sure the select list has an id as you are using the document.getElementById[] JavaScript method to retrieve the value of the control.
You could also call the JavaScript in the OnChange() event of the control. The issue with this is that it implies that the value has changed before the form is submitted. If the user simply left the default select list value it is possible that the OnChange() event would never fire.
You can try like following.
function selectChanged(ctrl) {
var val = ctrl.value;
var frm = document.getElementById('form1');
frm.action = val;
}
<form id="form1" name="form1" action="/formaction1" method="post" target="_blank">
<select name="formchoice" onchange="selectChanged(this)">
<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>
</select>
<input type="submit" value="Go" class="button">
</form>
Use on change attribute.
<select name="forma" onchange="location = this.value;">
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>

Categories