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);
}
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'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 do have a html input field select that is populated dynamically with values from MySQL database using jquery mobile. It is working perfectly but now I needed to change it to multiple select of options.
Please, see how my input was before this change:
<div id="landmark-1" data-landmark-id="1">
<form id = "cname" onsubmit="return submitForm();">
<label for "id">Employee's Name:</label><br/>
<select name="id" id="id">
<option value=""></option>
</select><br/>
<input type="submit" value="Clock-In" id="enviar_in" data-inline="true">
</form>
</div>
Now, see how it looks like after I changed it to accept multiple select:
<div id="landmark-1" data-landmark-id="1">
<form id = "cname" onsubmit="return submitForm();">
<label for "id">Employee's Name:</label><br/>
<select name="id" id="id" multiple="multiple" data-native-menu="false">
<option value=""></option>
</select><br/>
<input type="submit" value="Clock-In" id="enviar_in" data-inline="true">
</form>
</div>
It pop up the box for multi-select the options with the "x" to close the box and everything but does not show the populated data from MySQL.
Is there any thing that I am missing?
Thank you in advance.
Have you tried this. After the select is populated dynamically update the select using refresh().
//refresh value
$('#id').selectmenu('refresh');
//refresh and force rebuild
$('#id').selectmenu('refresh', true);
Refresh the select menu after populating .
$('#id').selectmenu('refresh');
I have a checkbox in my HTML that looks like this:
<input type="hidden" name="<TMPL_VAR NAME=SHORT>" value="<TMPL_VAR NAME=ELSE>">
<input type="checkbox" name="<TMPL_VAR NAME=SHORT>" id="checkbox-2" value="<TMPL_VAR NAME=FLAG>" class="checkbox mid-margin-left">
<label for="checkbox-2" class="label"><TMPL_VAR NAME="NAME"></label>
Basically, what I am trying to accomplish here is for one value to be sent if the checkbox is checked, and another to be sent if the checkbox is not checked (a default value basically). Now, this is dynamic, so I am really unable to do something in the CGI to say, "If this is defined then it means this, and if it's not then it means something else."
Anyway, when I leave the box unchecked, I get the value from the hidden input. However, when I check it I get both values. Now, I could say, "If this has more than one value, then the value to use is the second one." But, what if I am getting the value of a select list that accepts multiple values? In that situation I don't want to say take the 2nd value, because all values sent are valid.
So, what I am trying to say is this: "If it is a checkbox, and there is more than one value, then take the second value; otherwise, take the first."
Any ideas on how to do this? Maybe I am not doing this right? Any suggestions on a better way to accomplish this? I don't want to use a radio button for a boolean (yes/no), but if that's the only way, then so be it.
If you do not want JS, I would suggest you change your form so there's an alternate value for every field with a prefix on the name:
<form id="myform" method='post' action="/echo/json/">
<input type="hidden" name= "alternate-foo" value="foo not selected" />
<input type="hidden" name="alternate-bar" value="first bar" />
<p>Foo <input type='checkbox' name='foo' id='foo' value='foo selected' /></p>
<p>
<select name='bar' id='bar' multiple>
<option value='first bar'>bar 1</option>
<option value='second bar'>bar 2</option>
<option value='third bar'>bar 3</option>
</select>
</p>
<p><input type='submit' name='submit' value='submit' /></p>
</form>
In your Perl code, you could do something like this:
use strict;
use warnings;
use CGI;
my $q = CGI->new;
$q->param( 'foo', $q->param('alternate-foo') ) unless $q->param('foo');
$q->param( 'bar', $q->param('alternate-bar') ) unless $q->param('bar');
Or, to be more dynamic:
use 5.014;
foreach my $alt ( grep { /^alternate-/ } $q->param ) {
my $name = $alt =~ s/^alternate-//r;
$q->param( $name, $q->param( $alt )) unless $q->param($name);
}
I would do it with JavaScript and jQuery for convenience. Only downside is, it will not work if your clients have disabled JS.
Your form could remain pretty much the same. I made a simple example. Make sure there are ids on everything.
<form id="myform" method='post' action="/echo/json/">
<input type="hidden" id="hidden-foo" value="foo not selected" />
<p>Foo <input type='checkbox' name='foo' id='foo' value='foo selected' /></p>
<p>
<select name='bar' id='bar' multiple>
<option value='first bar'>bar 1</option>
<option value='second bar'>bar 2</option>
<option value='third bar'>bar 3</option>
</select>
</p>
<p><input type='submit' name='submit' value='submit' /></p>
</form>
Now here's the JS code, which should be placed below the form or inside an event handler for the load event:
$(document).ready(function() {
$("#myform").submit(function(){
// if checkbox is not checked, change value and check so it's transmitted
if (! $("#foo").is(":checked")) {
$("#foo").val($("#hidden-foo").val()).prop('checked', true);
}
// take first option if no option is selected
if( $("#bar option:selected").length == 0 ) {
$("#bar option:first").attr('selected','selected');
}
})
});
It's pretty straight-forward:
if the checkbox is not ticked, it will change it's value to the one of the hidden field and tick it.
if no option is selected, it will select the first one
Here's a jsFiddle to demonstrate. You should open your Firebug console to see the output.
It should now be fairly easy to turn this into something dynamic that can handle all form fields without your template engine having to meddle with the JS code.
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.