This question already has an answer here:
Not send GET variable on submit if dropwdown not selected
(1 answer)
Closed 5 years ago.
I have a GET form to select a search filter.
<form action="" method="get">
<select name="filter">
<option value="">no filter</option>
<option value="1">filter1</option>
<option value="2">filter2</option>
</select>
<input type="submit" value="Search"/>
</form>
If the user selects filter1, the url will be /search?filter=1, but if he chooses no filter, the url will be /search?filter=
I want it to be /search
How can I tell the form to only submit non-default values?
you can use javascript or jquery to do this.
Set an id to select list and perform javascript onchange event. if user will select no filter then name attribute will be remove so the filter type will not be the part of search but if user will select filter1 or filter 2 then name of select list will be filter so it will be showing in search variables.
<form action="" method="get">
<select id="filter" name="filter">
<option value="">no filter</option>
<option value="1">filter1</option>
<option value="2">filter2</option>
</select>
<input type="submit" value="Search"/>
</form>
<script>
$("#filter").change(function(){
if($(this).val()==''){
$(this).removeAttr("name"); // if no filter selected
}else{
$(this).attr("name","filter"); // if filter 1 or filter 2 selected
}
});
</script>
I think you can write your submit function! So you can do as the following code:
1) change the type of input from submit to button and add the onclick property to point to your submit function;
2) there, you check for the value of select item, and if it is not selected, not to send any default value.
3) using an empty form and change its method to POST.
Follow an example code:
<html>
<head>
<script type="text/javascript" >
function mySubmit() {
var url="/search";
if (document.myForm.filter.value>0) {
url=url+"?filter="+document.myForm.filter.value;
}
document.mySubmitForm.action=url;
document.mySubmitForm.submit();
}
</script>
</head>
<body>
<form name="mySubmitForm" action="" method="post"> </form>
<form name="myForm" >
<select name="filter">
<option value="">no filter</option>
<option value="1">filter1</option>
<option value="2">filter2</option>
</select>
<input type="button" value="Search" onclick="javascript:mySubmit();"/>
</form>
</body>
</html>
try
<option value="0">no filter</option>
and put validations on it
Im pretty sure you can't. You're submitting that data and no value is still a value.
Just use correct validation to check if filter is empty.
Related
I want to create a drop-down list in HTML; when a user selects an item from the list, he/she should be redirected accordingly to another web page. That code will be integrated into a Laravel blade (this is the reason for the csrf field). I have the following code, but when clicking the search button, I don't go to /research page (though I have already created the route). Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select departmnent</title>
</head>
<body>
<form method="post" action="/research" id="tmima">
{{csrf_field()}}
Choose department:<br>
</form>
<select name="Department" id="tmima">
<option value="0" selected="selection">Select</option>
<option value="geo">Geology</option>
<option value="phs">Physics</option>
<option value="chm">Chemistry</option>
</select>
<input type="submit" value="Search">
</body>
</html>
You are closing the form before the select input, remove the </form> and place it at the ending of your form.
<form method="post" action="/research" id="tmima">
{{csrf_field()}}
Choose department:<br>
// Here was the </form>, remove it here
<select name="Department" id="tmima">
<option value="0" selected="selection">Select</option>
<option value="geo">Geology</option>
<option value="phs">Physics</option>
<option value="chm">Chemistry</option>
</select>
<input type="submit" value="Search">
</form> // <-- place it here, it will work
EDIT:
As you wrote in the comments, you can use the select outside the form. But you need to tell your select that it belongs to the form. This is done via the form attribute of the select: You need to add it to your select like this:
...
<select name="Department" form="tmima"> //replace the id with form
...
I'm trying to append an option value to a form action, using method get. Submit sends the form request but isn't attaching the select option to the action?
So when the form is submitted it should use >
https://url.here.com?domain= users search here + selected option?
Thanks in advance.
<form action="https://url.here.com?domain=" method="get">
<div class="just-arrived-search">
www.<input type="search" name="domain" placeholder="Search" />
<select>
<option value="">All</option>
<option value=".bike">.bike</option>
<option value=".clothing">.clothing</option>
<option value=".guru">.guru</option>
<option value=".holding">.holdings</option>
<option value=".plumbing">.plumbing</option>
<option value=".singles">.singles</option>
<option value=".venture">.ventures</option>
</select>
<button class="btn-new" type="submit">Register Domain</button>
</div>
</form>
UPDATE: Since you edited your initial post to more clearly explain what you are attempting to achieve, here is a simple solution to your issue.
Use JavaScript to append the selected value to the domain before it submits. Change the button to have an onclick attribute as oppose to making it submit the form.
Add this JavaScript to your head section (or wherever you want, but convention is typically the HEAD section or bottom of the body):
<script type="text/javascript">
function submitForm() {
var ext = document.getElementById('ext');
var selected_opt = ext.options[ext.selectedIndex].value;
// Add own code to handle "All" here
var domain = document.getElementById('domain');
// Append selected option
domain.value = domain.value + selected_opt;
// Submit form
document.getElementById('myForm').submit();
}
</script>
And this is the updated HTML code to go along with it:
<form action="https://url.here.com" method="get" id="myForm">
<div class="just-arrived-search">
www.<input type="search" id="domain" name="domain" placeholder="Search" />
<select id="ext">
<option>All</option>
<option>.bike</option>
<option>.clothing</option>
<option>.guru</option>
<option>.holdings</option>
<option>.plumbing</option>
<option>.singles</option>
<option>.ventures</option>
</select>
<button class="btn-new" onclick="submitForm();">Register Domain</button>
</div>
</form>
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"
I've got an HTML form that I'm using JavaScript to submit with the 'onchange' function of a select control like this:
<form action='seeLocation.php?'>Jump To Location:
<select onchange='this.form.submit()'>
<option value='1'>Location1</option>
<option value='2'>Location2</option>
<option value='3'>Location3</option>
</select>
</form>
The problem is, I need to pass the <option>'s value tag into the form's action tag such it's actually something like
<form action='seeLocation.php?1'>
or
<form action='seeLocation.php?2'>
etc.
Is that possible? Thanks!
In your onchange function I think you can do this (haven't tested it):
this.form.action="seeLocation.php?"+this.options[this.selectedIndex].value;this.form.submit()
Change your html to be:
<script type="text/javascript">
function changeDropDown(dropdown){
var location = dropdown.options[dropdown.selectedIndex].value;
document.getElementById("form1").action = "seeLocation.php?" + location;
document.getElementById("form1").submit();
}
</script>
<form id="form1" name="form1">Jump To Location:
<select onchange='changeDropDown(this);'>
<option value='1'>Location1</option>
<option value='2'>Location2</option>
<option value='3'>Location3</option>
</select>
</form>
You can also do it inline if you need less verbose code.
Suppose I have a list box with different items, each with unique values, and an 'Enter' button below it. I want to be able to get the value of the selected item at the time of click, and then when have the button property:
ONCLICK="window.location.href='http://somewebsite.com/somefile.php?id="thisvalue"'"
So for example, something like----
<SELECT NAME = ParticipantList STYLE = "WIDTH: 187" SIZE = 18>
<OPTION VALUE='hi'> hello </OPTION>
<SELECT>
<INPUT TYPE="submit" VALUE="Info" ONCLICK="window.location.href='http://helloworld.com/this.php?="hi"'"/>
Can anyone help me figure this out? Much appreciated.
HTML forms are designed to do exactly this when their method is GET:
<form action="http://helloworld.com/this.php" method="get">
<select name="ParticipantList">
<option value="hi">Hello</option>
</select>
<input type="submit">
</form>
This will send the user to http://helloworld.com/this.php?ParticipantList=hi. No JavaScript required.
The Javascript
<script type="text/javascript">
function doAction(){
var selected = document.getElementById('ParticipantList').value;
if (selected == 'hello'){
window.location.href = 'http://somewebsite.com/somefile.php?id=1';
} else if (selected == 'bye'){
window.location.href = 'http://somewebsite.com/somefile.php?id=2';
} else {
alert('unknown option selected');
}
}
</script>
The HTML
<select name="ParticipantList" id="ParticipantList">
<option value="hello">hello</option>
<option value="bye">bye</option>
</select>
<input type="button" name="action" id="action" value="Submit" onclick="doAction()" />