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.
Related
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.
I working on a contact form. The point is it should be accessible without JavaScript. If JavaScript is avaible I want ask visitors about some details based on their purpose of contact.
HTML could look like this (labels are skipped on purpose, to shorten the code):
<form action="">
<select name="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<button>Submit</button>
</form>
Well, if I could I would just add some areas that would be shown based on "model". But I can't do it because I don't want to show additional fields to people without JS.
It would be like this:
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<div ng-show="purpose == 'support'">
<input type="text" name="customernumber" />
</div>
<div ng-show="purpose == 'interview'">
Sorry, I'm not giving interviews
</div>
...
<button>Submit</button>
</form>
The point is that I will be asking a lot of additional questions. With JS disabled the visitor will be seeing a bloated contact form with all fields and messages.
I'm looking for a solution that would read the value of and inject HTML from JS file into a specific place.
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
{{injectedHTML}}
...
<button>Submit</button>
</form>
It sounds strange, but everything must be according to the requirements of local municipal office. They want to show these specific fields only to people with JS.
Maybe they think it is good for accessibility. I'm not sure.
Thank you all.
To simply hide set of elements when JavaScript is disabled you could add ng-hide class to elements that should not be displayed. In example:
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<div ng-show="purpose == 'support'" class="ng-hide">
<input type="text" name="customernumber" />
</div>
<div ng-show="purpose == 'interview'" class="ng-hide">
Sorry, I'm not giving interviews
</div>
...
<button>Submit</button>
</form>
The ng-hide class sets display: hidden. When JavaScript is enabled ng-show will evaluate the condition and add or remove ng-hide class from element.
Another fairly simple solution would be to use ng-include to load additional content when appropriate - which obviously would only work when JavaScript is enabled - thus making additional fields hidden when JavaScript is not working.
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<div ng-if="purpose == 'support'" ng-include="'views/supportField.html'">
</div>
<div ng-if="purpose == 'interview'" ng-include="'views/interviewField.html'">
</div>
...
<button>Submit</button>
</form>
Thanks to miensol I started to think about method using "ng-include". Then I realised one thing: Angular can override the HTML.
So I came with this HTML:
<form ng-controller="ContactController">
<select ng-model="purpose" ng-options="p.title for p in possibilities track by p.value">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
<div ng-include="purpose.template"></div>
</form>
And this app.js:
(function(){
var app = angular.module('myApp', []);
app.controller('ContactController', ['$scope', function($scope) {
// array with possible reasons, that we use as <option> in <select>
// the "AJ" is added so you can see the difference
$scope.possibilities =
[
{ title: 'AJ Just saying hi', value='hello', template: 'part-support.html'},
{ title: 'AJ Customer Support', value='support', template: 'part-support.html'},
{ title: 'AJ Interview', value='interview', template: 'part-interview.html'}
];
// select default <option>
$scope.purpose = $scope.possibilities[0];
}]);
})();
Still I got feeling it could be written much better (and it's out of my league).
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>
How do I get the selected option from the HTML select option attribute to a POST request? So
<form method="post" action="new_choice/:pick_an_order/:pick_a_letter">
<select name="pick_an_order">
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
<select name="pick_a_letter">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
If the user selects, as an example, the first option from each, being "First" and "A". Right now I have:
post 'new_choice/:pick_an_order/:pick_a_letter' do
pick_an_order = params[:pick_an_order]
pick_a_letter = params[:pick_a_letter]
#your_choice = YourChoice.new(pick_an_order, pick_a_letter)
redirect '/to_a_page'
end
But for some reason it's not saving to #your_choice. How do I get the selected attribute directly to the POST request so that it can be saved to the #your_choice object? Thanks in advance!
You must make a choice. Either you modify the value of the action attribute in your form with the help of Javascript, or you change the route of your resource to post 'new_choice' do and have the values sent as POST parameters.
I'll pick the second one because it seems more logical at the moment:
<form method="post" action="/new_choice">
<select name="pick_an_order">
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
</select>
<select name="pick_a_letter">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
Please note that you must specify the value attribute for each option, that's the actual value sent (whatever text inside the tag is for the users). Then in Sinatra:
post '/new_choice' do
pick_an_order = params[:pick_an_order]
pick_a_letter = params[:pick_a_letter]
#your_choice = YourChoice.new(pick_an_order, pick_a_letter)
redirect '/to_a_page'
end
I would rather use javascript to submit the form because the code is so simple: $(function() {
$('#language').change(function() {
this.form.submit();
});
});
Assign an id to the select tag, in this case it is #language.
i want to use onChange() in select but all of this commands not work for me:
HTML
<form method="post" name='testBank' id="testBank" enctype="multipart/form-data">
<select name="major_id" id='major_id' onchange="this.submit();">
<option value="">---</option>
<?
$query = mysql_query("select * from at_majors where view='1'");
while($row=mysql_fetch_assoc($query)){
?><option value="<? echo $row['major_id']?>" > TEST </option><?
}
?>
</select>
</form>
commands
onchange="this.submit()"
onchange="testBank.submit();"
onchange="this.testBank.submit()"
onchange="submit()"
onchange="document.all.submit()"
onchange="document.testBank.submit();"
i get this error:
this.submit is not a function
important
i dont like to use jquery or javascript for this method. please help me to repair this problem. thanks
That's because you are trying to submit the select tag, not the form.
<form method="post" name='testBank' id="testBank" enctype="multipart/form-data">
<select name="major_id" id='major_id' onchange="document.getElementById('testBank').submit();">
This should work.
EDIT
This should also work:
<select name="major_id" id='major_id' onchange="this.form.submit();">
So here's your form (simplified a bit for the purposes of the demo):
<form name='testBank'>
<select name="major_id" onchange="submitTestBank();">
<option value="">---</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</form>
And then the most simple JavaScript (referring to the form by its name):
function submitTestBank() {
document.forms.testBank.submit();
}
Of course you could just add document.forms.testBank.submit(); directly to the onchange attribute. Having a separate function like submitTestBank is more reusable though. It helps if you want to attach a submit handler to multiple select or input elements.
See it in action.
try this
<select name="major_id" id='major_id' onchange=this.form.submit();">
If the submit input element have name as "submit" the form won't submit. So please remove the submit.
Avoid this
<input type="submit" name="submit" value="submit">
Use This
<input type="submit" name="xxx" value="xxx">
You do not like to use jQuery, then try this:
<select name="major_id" id='major_id' onchange="doSomething(this)">
Make sur to define your javascript before the select element:
function doSomething(sel) {
alert(sel.options[sel.selectedIndex].value);
}