I'm kind of new to the Jquery world so can someone please help me understand my do my $("#dothis").html("hit"); make the content only blink rather then simply show?
i think that the function is repeating it self and that's what's causing it.
html Code:
<form>
<select class="plcardFirst">
<option selected value="">-- Choose One --</option>
<option value="1/11">A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="10">J</option>
<option value="10">Q</option>
<option value="10">K</option>
</select>
<select class="plcardSecond">
<option selected value="">-- Choose One --</option>
<option value="1/11">A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="10">J</option>
<option value="10">Q</option>
<option value="10">K</option>
</select>
<select class="dlCard">
<option selected value="">-- Choose One --</option>
<option value="1/11">A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="10">J</option>
<option value="10">Q</option>
<option value="10">K</option>
</select>
<input type="submit" value="Submit" id="Submit">
</form>
<div id="dothis"> do this </div>
Script:
<script type="text/javascript">
var valueFirst;
var valueSecond;
var dlCard;
$(document).ready(function () {
$(".plcardFirst").change(function() {
valueFirst = $( ".plcardFirst" ).val();//player first card;
});
$(".plcardSecond").change(function() {
valueSecond = $( ".plcardSecond" ).val();//player second card
});
$(".dlCard").change(function() {
dlCard = $( ".dlCard" ).val();//dealer card
});
$("#Submit").click(function(){
$("#dothis").html("hit");
});
});
</script>
It blinks because you are using a submit button and you are not cancelling the submit action so the page submits the form and reloads the page.
$("#Submit").click( function (e) {
e.preventDefault(); //cancel the click
$("#dothis").html("hit");
});
Your page is loading again because its a form and you have the button with a type=submit. You need to prevent its normal function by adding an e.preventDefault(). Try this:
<script>
$("#Submit").click(function(e) {
e.preventdefault();
$("#dothis").html("hit");
});
</script>
You are submitting form and hence page get reload / refresh. You can change the button type and then try
<input type="button" value="Submit" id="Submit">
If you are submitting a form, the page is refreshed, and you get the initial div content.
If you don't want to submit the form, you have to return false in the function.
$("#Submit").click(function () {
$("#dothis").html("hit");
return false;
});
You have to cancel the event and do not submit the form:
$("#Submit").click(function(event){
$("#dothis").html("hit");
return false;
});
Alternatively you can simply remove the <form> tag if you are not planning to process the data via PHP and it will not happen anymore.
Related
i want to select values from select drop down list and print them in <div
like if i select 0 and prints 0 automatically
like values are 0 4 5
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div id="show_values"><!--345 --></div>
You can do it by using jquery's change event and append values on your div when changing options in this way.
$('select').on('change', function (e) {
var txt = $(this).val();
$('#show_values').append(txt+" ");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div id="show_values"></div>
Trying to get the page to load with default selected option 2
Well neither are working, what's correct?
My HTML is like this, no ID or class
$(window).load(function() {
$("tour-adult[]").value = 3;
document.getElementById("tour-adult[]").value = 4;
});
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
Using jQuery:
Use .on('load', () {...} instead of .load() - Why?
Use an attribute selector like $("[attribute='attributeName']")
Pass the value as a String, not a Number
$(window).on('load', function() {
$('select[name="tour-adult[]"]').val('3');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
As far as your first attempt, try selecting the select element by it's name attribute and using jQuery's val() method to set the value:
$("select[name='tour-adult[]']").val(3);
You currently don't have an id assigned to the select. If you want to go native, you'd use something like querySelector:
document.querySelector("select[name='tour-adult[]']").value = 4;
$(window).on('load', function() {
$("select[name='tour-adult[]']").val(3);
console.log($("select[name='tour-adult[]']").val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
If you want to call it by ID, you will need to add an ID. I removed your jquery and added an ID and its working.
document.getElementById("tour-adult").value = 4;
<div class="tourmaster-combobox-wrap">
<select id="tour-adult" name="tour-adult[]">
<option value="">Adult</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
I've been trying to do this simple code, although when I read the documentation for the localStorage. Im not quite understanding why it is returning 1. The below code is just a part of the HTML file. So if we for example select the id of maxAdult value 6. It will return 1. Is there a problem with my original HTML and this should be working fine or am I missing something?
First HTML
<select id="maxAdult">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select id="maxChild">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<script>
var store = document.getElementById("maxAdult");
var value = store.value;
localStorage.setItem("max", value);
</script>
Second HTML
<script>
var passen = localStorage.max;
document.write("<br><strong style='font-size: 16px'>Number of Passengers:
</strong><br>");
document.write(passen);
</script>
Output
Number of Passengers:
1
Like what #charlietfl has said in the comments, you have to actually have to listen to the change event in order to update the localStorage when the <select> element value is updated, i.e.:
var store = document.getElementById("maxAdult");
// Listen to onchange
store.addEventListener('change', function() {
localStorage.setItem("max", this.value);
});
This is because JS is not reactive in nature and the value of store does not automagically update its counterpart in localStorage.
There's nothing wrong with your localStorage, but you need to write an event handler for when the value changes. As it stands, your code is only run once when the page loads. Here's a simple example using addEventListener
<select id="maxAdult">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select id="maxChild">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<script>
var store = document.getElementById("maxAdult");
store.addEventListener("change", function() {
console.log(this.value);
});
</script>
I have 3 select elements and I'm using $(".select-elem select").val() to get the value of each select element in an array but it returns the value of only the first element in the set of matched elements. For example, if a user selects '2' for the first select element, '3' for the second, and '4' for the third, the val() function returns 2 instead of [2,3,4]. Is there a function that would return an array containing values of all three select elements?
<td class="select-elem">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
<td class="select-elem">
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
<td class="select-elem">
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
Use map methods for this:
var values = $(".select-elem select").map(function() {
return $(this).val();
}).get();
Create your own jquery method and use it wherever you need, find the following code
//create jquery method arrVal which returns array of values
$.fn.arrVal = function () {
var valArr = [];
$(this).each(function(){
valArr.push($(this).val())
})
return valArr;
}
//call arrVal method
$('select').arrVal()
I added a dropdownlist using seblod extension in joomla. But the javascript is not working for this.
<html>
<head>
<script type="text/javascript">
alert('onload');
document.getElementById('countrynames').addEventListener('change',function(){
alert('Hello');
});
</script>
</head>
<body>
<select size="1" class="inputbox select " name="countrynames" id="countrynames">
<option selected="selected" value="">- Select an option -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</body>
</html>
Move your script to the bottom of the page - after the DOM element you're binding the listener to.
DEMO
<select size="1" class="inputbox select " name="countrynames" id="countrynames">
<option selected="selected" value="">- Select an option -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
JS:
<script type="text/javascript">
alert('onload');
document.getElementById('countrynames').addEventListener('change',function(){
alert('Hello');
});
</script>
You script is executing before the select element is created. here's the fix:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
alert('onload');
document.getElementById('countrynames').addEventListener('change',function(){
alert('Hello');
});
}
</script>
</head>
<body>
<select size="1" class="inputbox select " name="countrynames" id="countrynames">
<option selected="selected" value="">- Select an option -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</body>
</html>
You may try to put your code in a function which will be called by the <body> tag's onload method:
Your JS script:
<head>
<script type="text/javascript">
function mload() {
alert('onload');
document.getElementById('countrynames').addEventListener('change',function() {alert('Hello');
});
}
</script>
</head>
In your <body> add:
<body onload="javascript: mload()">
Hope this helps. Let me know if this works for you.