I have a dropdown list which runs the javascript function printResult when the default selection is changed:
<form action="">
<select name="list" onChange="printResult();">
<option value="1"> Option 1</option>
<option value="2" selected> Option 2</option>
<option value="3"> Option 3</option>
</select>
</form>
I would like the form to submit the option that is selected as default when the page loads, as well as when another option is selected. All tutorials I can find only cover onchange, rather than what I want.
Is this possible?
if you want to call a function on page load do this:
<body onload="printResult();">
<form action="">
<select name="list" onChange="printResult();">
<option value="1"> Option 1</option>
<option value="2" selected> Option 2</option>
<option value="3"> Option 3</option>
</select>
</form>
</body>
or in jquery you can postpone the load function anywhere in the page :
$(window).on("load",function(){ printResult(); })
or on document ready:
$(document).ready(function(){printResult();})
Related
console.log($('select[name="Units[]"] option:not(:first:selected)').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Units[]" multiple="multiple">
<option value="1">Example1</option>
<option value="2" selected="selected">Example2</option>
<option value="3" selected="selected">Example3</option>
</select>
As you can see I don't want to display value 1 and selected value in the console but my program is not working according to my expectation How can I solve this issue?
What I understood from the question is that you don't want to display first option and selected option.
You can't use two selector like that. Instead you need to use it like this
console.log($('select[name="Units[]"] option:not(:selected):not(:first)').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Units[]" multiple="multiple">
<option value="1">Example1</option>
<option value="2" selected="selected">Example2</option>
<option value="3" selected="selected">Example3</option>
<option value="4" >Example4</option>
</select>
If you only want the selected values, you can get it like this
console.log($('select[name="Units[]"]').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Units[]" multiple="multiple">
<option value="1">Example1</option>
<option value="2" selected="selected">Example2</option>
<option value="3" selected="selected">Example3</option>
<option value="4" >Example4</option>
</select>
This question already has answers here:
How to toggle selection of an option in a multi-select with jQuery?
(8 answers)
Closed 6 years ago.
I have multiple select boxes used for filtering data from a database.
For example select box 1:
<select name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
And select box 2:
<select name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</option>
</select>
Problem is once i select a value from a field i can't deselect it and i don't want to reset all filters and start allover. I would like to be able to deselect the selected option on second click, for each box ... i.e.: 1st click => select / 2nd click=> deselect.
How is the easiest way to do this?
Thank you for patience!
Try something like this
<select id="select1" name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
<select id="select2" name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</option>
</select>
Jquery
$("#select1").change(function(){
$("#select2").val(null);
});
$("#select2").change(function(){
$("#select1").val(null);
});
Try this
$( "select" ).dblclick(function(){
$( this ).val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<select name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
<select name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</option>
</select>
I have a simple HTML form that is posting to a URL like this...
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input class="textinput1" type="text"></input>
<input class="textinput2" type="text"></input>
<input class="textinput2" type="text"></input>
</form>
This generates a URL like this www.example.com/?option_dropdown=option1 when submitted, it does not include the text input boxes as they do not have a name attatched to them.
What I would like to do is add some logic to the text inputs that will choose one depending on its content and then include that parameter when the form is submitted.
Is javascript the way to achieve this?
You ask for javascript way so you can try this.
In order to identify 3 textboxes i've given id's to them.
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input class="textinput1" id='txt1' type="text"></input>
<input class="textinput2" id='txt2' type="text"></input>
<input class="textinput2" id='txt3' type="text"></input>
<input type='submit' id='submit'>
</form>
on submitting this form script will add name property to any of the 3 text boxes based on a logic of yours. so only that textbox content will be submitted.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* Any logic which select the textbox to be submitted */
id='txt1'; // it can be txt2 or txt3
$("#submit").click(function(){
$("#"+id).attr("name","text");
});
});
</script>
1.Create a PHP file in the same directory as the html.
2.Edit your form to point to that php file and name your text fields so you could refer to them.
<form method="post" action="formTester.php">
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input name="textinput1" class="textinput1" type="text"></input>
<input name="textinput2" class="textinput2" type="text"></input>
<input name="textinput3" class="textinput2" type="text"></input>
</form>
3. In your file formTester.php
<?php
// define variables and and get data from the text fields
$text1= $_POST["textinput1"];
$text2= $_POST["textinput2"];
$text3= $_POST["textinput3"];
// Now you can manipulate the data however you want ..add it to database, trim, validate etc
?>
Hope it helps,
Best
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input type="text" class="textinput1" name="textinput[]" value="input1" />
<input type="text" class="textinput2" name="textinput[]" value="input2" />
<input type="text" class="textinput3" name="textinput[]" value="input3" />
</form>
One option is to stack your values in an array and parse it on the backend. This removes the need for JavaScript.
<form>
<select name="option_dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
<input type="text" class="textinput1" name="textinput[]"></input>
<input type="text" class="textinput2" name="textinput[]"></input>
<input type="text" class="textinput3" name="textinput[]"></input>
</form>
I need to show the submit button on many forms on the same page only if one option from a select is selected.
I have:
<form id="1">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
and
<form id="2">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
so, I need to show the submit button only if an option of the select is selected
Thanks!!!
This a working example with you html http://jsfiddle.net/g188o5eg/
$('select').on('change', function(){
if($(this).val() != ''){
$(this).parent().find('input[type="submit"]').show();
} else {
$(this).parent().find('input[type="submit"]').hide();
}
});
It will work with all forms on your site :)
Try something like this (would work with multiple select boxes (uses the nearest submit):
<form>
<input type="text">
<select class="select">
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit" class="submitbutton">
<script type="text/javascript">
$('.submitbutton').hide();
$('.select').click(function() {
$(this).closest('.submitbutton').show();
});
</script>
I was wondering if it's possible to submit a form (dropdown list for the input) when the selected value selected="selected" is clicked. I can't seem to get it to work.
My code:
<form method="post" name='myform' id="box" action="javascript:alert('submitted')" onsubmit="if(this.f.value == -1){return false;}">
<fieldset class="box_fieldset">
<select name="f" id="f3" onchange="if(this.options[this.selectedIndex].value != -1){ document.forms['myform'].submit() }">
<option value="-1">-- select --</option>
<option value="1" >one</option>
<option value="2" selected="selected" >two</option>
<option value="3" >three</option>
</select>
</fieldset>
</form>
With the corresponding jsFiddle
As you can see, it's not possible to 're-submit' option 2 because it is already selected
(alert doesn't get triggered).
Is there a way to do this?
Well, use another event trigger.
window.onload should be appropriately.
jsFiddle link
when you are using onchange event you can't handle default values, like the one you chose (two);
<option value="-1" selected>-- select --</option>
<option value="1" >one</option>
<option value="2" >two</option>
<option value="3" >three</option>
<html>
<head>
</head>
<body>
<select id="slct">
<option value="1" onclick="clicked(this)">one</option>
<option value="2" onclick="clicked(this)">two</option>
<option value="3" onclick="clicked(this)">three</option>
</select>
<script>
function clicked(e){
var xml = new XMLHttpRequest();
xml.open("GET",""+this.value,false);
xml.send();
}
</script>
</body>
use such a trick to handle your requests