I need to get the selected text and selectedIndex in dropdown on submit..The below code returns the first index always 0 with the first option text..for example if i selected three,it shows 0 index and one text...
function myfunc()
{
`enter code here`var x = document.getElementById("listt").selectedIndex;
var y = document.getElementById("listt").options;
alert("Index: " + y[x].index + " is " + y[x].text);
}
<select id="listt" >
<option >one</option>
<option >two</option>
<option>three</option>
<option >four</option>
</select>
<input type="Submit" value="submit " name="Submit" onclick="myfunc()"></input>
Try this code.
<select id="listt" >
<option >one</option>
<option >two</option>
<option>three</option>
<option >four</option>
</select>
<input id="btnSubmit" type="Submit" value="submit " name="Submit" />
function myfunc() {
var x = document.getElementById("listt").selectedIndex;
var y = document.getElementById("listt").options;
alert("Index: " + y[x].index + " is " + y[x].text);
}
document.getElementById ("btnSubmit").addEventListener ("click", myfunc, false);
Related
I have 2 fields from which i select some values to be concatenated and posted in a div from which, on submit, i save into a database.
So i select values from 'tags1' and 'tags2' and after i push the button 'adauga' the concatendated values show in the textarea with id 'd11'. Up untill now everythign works fine, untill i press the button 'Clear' to clear the div from values. After that if i try to add values again it does not work, nothing is displayed in the 'd11' div.
Below is the html and the script:
<select name="tehnologie[]" id="tags2" size="13" multiple = "multiple">
<option value="GSM">GSM</option>
<option value="UMTS">UMTS</option>
<option value="LTE">LTE</option>
<option value="NR (5G)">NR (5G)</option>
<option value="Radiodifuziune AM">Radiodifuziune AM</option>
<option value="Radiodifuziune FM">Radiodifuziune FM</option>
<option value="TV digital">TV digital</option>
<option value="TV analogic">TV analogic</option>
<option value="PMR/PAMR">PMR/PAMR</option>
<option value="Satelit">Satelit</option>
<option value="Aero">Aero</option>
<option value="RAmator">RAmator</option>
<option value="Alte aplicatii radio">Alte aplicatii radio</option>
</select>
<input name="banda_buffer" type="number" list="frecvente" id="tags1" >
<datalist id="frecvente">
<option value="800">800</option>
<option value="900">900</option>
<option value="1800">1800</option>
<option value="2100">2100</option>
<option value="2600">2600</option>
</datalist>
<input hidden type="text" id="tags3" >
<input type="button" id="adauga" onClick="myFunction1();" name="adauga" value="+" />
<textarea id="d11" name="banda" rows="5" cols="300" readonly class="form-control input-md"></textarea>
<button type="button" onclick="ClearFields();">Clear</button>
<input type="submit" id="submit" name="submit" onClick="alerta();" value="Salveaza" class="btn btn-primary">
And the js:
var cpvuri1=[];
var AreaToDisplay1=document.getElementById('d11');
function myFunction1(){
var text1=document.getElementById('tags1').value;
var text2=document.getElementById('tags2').value;
var text3= text2 +' - '+ text1;
cpvuri1.push(text3);
AreaToDisplay1.innerHTML=cpvuri1;
}
function ClearFields() {
document.getElementById("d11").value = "";
document.getElementById("tags1").value = "";
document.getElementById("tags2").value = "";
document.getElementById("tags3").value = "";
cpvuri1=[];
}
function alerta() {
document.getElementById("tags3").value = cpvuri1;
}
You can use value rather than innerHTML
function myFunction1(){
var text1=document.getElementById('tags1').value;
var text2=document.getElementById('tags2').value;
var text3= text2 +' - '+ text1;
cpvuri1.push(text3);
AreaToDisplay1.value=cpvuri1;
}
$('#btnadd').click(addBulletinBoard);
function addBulletinBoard() {
var show = $('#show').val();
var show1;
console.log("before " + $('#show').val())
if (jQuery.inArray("*", show) !== -1) {
show1 = $("select#show option").map(function() {
return $(this).val();
}).get();
}
console.log("after :" + show)
console.log("after " + show1.splice(0, 2))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="show" id="show" multiple="">
<option value="" selected="" disabled="">Select...</option>
<option value="*">All</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<button type="button" class="btn btn-primary" id="btnadd">Submit</button>
I have a demo above. What I want to happened is when Selecting option from the select and the option ALL is among the selected. I want to get all option except the first one and the second. So I used map with splice. But as seen in the console it is not what I am expecting.
How to get option values except first two in jquery
Can simply use Array#filter()
$('#btnadd').click(addBulletinBoard);
function addBulletinBoard() {
var show = $('#show').val().filter(function(val) {
return val && val !== '*'
});
console.log("after :", show)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="show" id="show" multiple="">
<option value="" selected="" disabled="">Select...</option>
<option value="*">All</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<button type="button" class="btn btn-primary" id="btnadd">Submit</button>
splice would return an array containing the deleted elements and change the original array. So console.log("after " + show1.splice(0, 2)) would show the deleted elements that is not what you really want. Simply move show1.splice(0, 2) out of console.log() and it works as what you expected.
$('#btnadd').click(addBulletinBoard);
function addBulletinBoard() {
var show = $('#show').val();
var show1;
console.log("before " + $('#show').val())
if (jQuery.inArray("*", show) !== -1) {
show1 = $("select#show option").map(function() {
return $(this).val();
}).get();
show1.splice(0, 2)
}
console.log("after :" + show)
console.log("after :" + show1)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="show" id="show" multiple="">
<option value="" selected="" disabled="">Select...</option>
<option value="*">All</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<button type="button" class="btn btn-primary" id="btnadd">Submit</button>
I have some picture in folder "../../images"
I give the name of picture with example
101_2018_1_1.jpg
101_2018_1_2.jpg
101_2018_1_3.jpg
101 is on var1
2018 is on id year
and 1 is on var3
and the last is auto increment
how can I call all the images with specific named based on combo box I chose with javascript and show the image on my page?
here the example of my form
<form>
<select name="var1" id="var1" >
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="<?php echo date('Y'); ?>">
<select name="var3" id="var3" >
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<button type="submit" name="search">search</button>
</form>
Using jQuery you can do something like:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault();
var URL = "www.example.com/image/";
//Get the values of form element
var var1 = $("#var1").val();
var year = $("#year").val();
var var3 = $("#var3").val();
//Check Up to 10 increments
for (i = 1; i <= 10; i++) {
var img = URL + var1 + "_" + year + "_" + var3 + "_" + i + ".jpg";
getImage(img);
}
return false;
});
});
/*
Check if image exist and add it.
If not, just console
*/
function getImage(image_url) {
$.get(image_url)
.done(function() {
// Image does exist - append on #image-container container
$("#image-container").append('<img src="' + image_url + '">');
}).fail(function() {
// Image doesn't exist - do nothing.
console.log(image_url + " does not exist.");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select name="var1" id="var1">
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="2018">
<select name="var3" id="var3">
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<div id="image-container"> </div>
<button type="submit" name="search">search</button>
</form>
If I understand correctly, you would do something like:
var imgUrl, counter = 3;
document.getElementById('search').addEventListener('click', function() {
imgUrl = "../../" + document.getElementById('var1').value + "_" + document.getElementById('year').value + "_" + document.getElementById('var3').value + "_";
alert(imgUrl);
for (var i = 0; i < counter; i++) {
var img = document.createElement("IMG");
var url = imgUrl + i.toString() + ".jpg"
//img.setAttribute('src', );
alert(url);
}
});
<form>
<select name="var1" id="var1">
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="<?php echo date('Y'); ?>">
<select name="var3" id="var3">
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<input type="submit" name="search" id='search'>
</form>
That would get you the image url, set the src attribute to that url, then append it to the body.
I am working on a country dropdown filter for a search. This will allow users to search within the selected region.
Select 'Thailand' from the dropdown, 'Thailand + ' will be pushed to the search box which allows user to enter another keyword (e.g. Food) which forms into
'Thailand + Food'.
Due to technical constraints this is my only workaround creating a search filter. I am wondering can i make the selected region text invisible (Thailand +) yet when i press enter.. 'Thailand +' is part of the search results.
What i want to achieve:
User selects 'Thailand'
Thailand +' is pushed to textbox (Not visible to user)**
User types 'Food' in the search box
Both 'Thailand + Food' is in the search result
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testfloat">
<select id="quantity">
<option selected>Select Libraries</option>
<option value="Albanian + ">Albanian</option>
<option value="Singapore + ">Singapore</option>
<option value="Malaysia + ">Malaysia</option>
<option value="Germany + ">Germany</option>
<option value="France + ">France</option>
<option value="Thailand + ">Thailand</option>
</select>
<script type="text/javascript">
$('#quantity').change(function(){
var qty = $('#quantity').val();
var total = qty;
$("#ms-helperText").val(total);
});
</script>
<input type="text" id="ms-helperText">
Instead of putting the selected country in the input, store it in a variable and change it accordingly.
This is how should be your code:
var searchedCountry = "";
$('#quantity').change(function() {
searchedCountry = $('#quantity').val();
$("#preview").html(searchedCountry + " " + $('#ms-helperText').val());
});
$('#ms-helperText').keyup(function() {
$("#preview").html(searchedCountry + " " + $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testfloat">
<select id="quantity">
<option selected>Select Libraries</option>
<option value="Albanian + ">Albanian</option>
<option value="Singapore + ">Singapore</option>
<option value="Malaysia + ">Malaysia</option>
<option value="Germany + ">Germany</option>
<option value="France + ">France</option>
<option value="Thailand + ">Thailand</option>
</select>
<input type="text" id="ms-helperText">
<br/>
<div id="preview">
</div>
you could try to attach that value into a hidden input in html
<input type="hidden" id="somehiddenvalue"></input>
Concat both values into a hidden form element:
// Get all needed input elements
const $country = document.querySelector( '#country' );
const $quantity = document.querySelector( '#quantity' );
const $msHelperText = document.querySelector( '#ms-helperText' );
// Event handler
function inputChange() {
const collection = [];
$country.value && collection.push( $country.value );
$quantity.value && collection.push( $quantity.value );
// Only add + if both inputs have a value.
$msHelperText.value = collection.join( ' + ' );
console.log( 'Hidden element value: ', $msHelperText.value );
}
$country.addEventListener( 'input', inputChange );
$quantity.addEventListener( 'input', inputChange );
<select id="country">
<option value="" selected>Select Libraries</option>
<option value="Albanian">Albanian</option>
<option value="Singapore">Singapore</option>
<option value="Malaysia">Malaysia</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="Thailand">Thailand</option>
</select>
<input type="text" id="quantity">
<!-- the new hidden form element, that will hold both values -->
<input type="hidden" id="ms-helperText">
I am trying to add a value to list by using text box, but it is not working.
<input type="text" value="" id="ip1" class="ip1" />
<input type="button" value="Add" class="bt1" id="bt1" />
<br/>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
And the script is:
$(document).ready(function (e) {
var $txtVal = $('#ip1');
$(".bt1").click(function () {
var opt = $("#ip1").val();
if ($txtVal.val()) {
$('<option />', {
text: $txtVal.val(),
value: $txtVal.val()
}).appendTo('select');
}
});
});
Where is my mistake?
<input type="text" value="" id="ip1" class="ip1" />
<input type="button" value="Add" class="bt1" id="bt1" />
<br/>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
$(document).ready(function () {
$(".bt1").click(function () {
var opt = $("#ip1").val();
if (opt != "" && opt != " "){
opt = "<option value=" + opt + ">" + opt + "</option>";
$("select").append(opt);
}
});
});
p.s jsfidle http://jsfiddle.net/4ve443zv/1/
thanks for every one its working after Successfully adding this
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">