Hopefully I can get help from you guys..I got a simple script below but not sure why is this not working.
Wanted to limit the text length of the textarea depends on the select dropdown value. Please advise.
HTML:
<select class="productoptionname_card-type" id="Option111453" name="Option111453">
<option value="">Please select...</option>
<option value="1127125">Free Message Card</option>
<option value="1127126">Greeting Cart</option>
</select>
<textarea class="productoptionname_message" style="width: auto" tabindex="5"></textarea>
<span id="charsLeft"></span>
JQuery:
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://jquery-limit.googlecode.com/files/jquery.limit-1.2.source.js" type="text/javascript"></script>
<script language="javascript">
function ResetText() {
if ( $('#Option111453 option:selected').text() == "Free Message Card" ) {
$('textarea.productoptionname_message').limit('5','#charsLeft');
}
else if ( $('#Option111453 option:selected').text() == "Greeting Cart" ) {
$('textarea.productoptionname_message').limit('10','#charsLeft');
}
}
$().ready(function() {
$('textarea.productoptionname_message').keyup(function() { ResetText(); });
$('#Option111592').change(function() { ResetText(); });
});
</script>
Thanks much!
The extension (JQuery.limit) not works properly.
I just write a custom jquery limit extension for you.
you can test it here: http://jsfiddle.net/tcWHr/
Related
I am trying to hide a div (id #pagos) when a select input (id #buy_sell) option has been chosen (using select2).
Doing it with JQuery and a standard select box is pretty easy, but I'm a bit new to using select2 and everything has gotten complicated.
So far, I have not been able to find a script that works, that's why I come to you.
This is the code I have so far. I would be very grateful for any corrections to make it work.
<script>
$("#buy_sell").change(function() {
if ($("#buy_sell").select2("val") == "241|Vendo") {
$('#pagos').show();
} else {
$('#pagos').hide();
}
});
$("#buy_sell").trigger("change");
</script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<div>
<select id="buy_sell">
<option value="1">First option</option>
<option value="2">Last option</option>
</select>
<div id="pagos">Will be hidden if "2" is selected</div>
</div>
<script>
$('document').ready(function() {
$('select').select2();
$('#buy_sell').on('change', function (e) {
if (e.target.value === '2') {
$('#pagos').hide();
} else {
$('#pagos').show();
}
})
})
</script>
I'm trying to create a webpage where the options in the second dropdown menu depend on the value selected in the first dropdown menu. However, when running the webpage, the options in the second dropdown do not change regardless of what is selected in the first dropdown. The Browser does indicate that it SEES the javascript file, but it just doesn't appear to be actually running it for some reason. Anyone know what's going on?
$(document).ready(function() {
$convertfrom = $("select[name='ConvertFrom']");
$convertto = $("select[name='ConvertTo']");
$convertto.change(function() {
if ($(this).val() == "Binary") {
$("select[name='convertto'] option").remove();
$("<option>Decimal</option>").appendTo($convertto);
$("<option>Octal</option>").appendTo($convertto);
$("<option>HexaDecimal</option>").appendTo($convertto);
}
if ($(this).val() == "Decimal") {
$("select[name='convertto'] option").remove();
$("<option>Binary</option>").appendTo($convertto);
$("<option>Octal</option>").appendTo($convertto);
$("<option>HexaDecimal</option>").appendTo($convertto);
}
if ($(this).val() == "Octal") {
$("select[name='convertto'] option").remove();
$("<option>Binary</option>").appendTo($convertto);
$("<option>Decimal</option>").appendTo($convertto);
$("<option>HexaDecimal</option>").appendTo($convertto);
}
if ($(this).val() == "HexaDecimal") {
$("select[name='convertto'] option").remove();
$("<option>Binary</option>").appendTo($convertto);
$("<option>Decimal</option>").appendTo($convertto);
$("<option>Octal</option>").appendTo($convertto);
}
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<title>Practice</title>
</head>
<body>
<p> Welcome to the Practice Page. On this page, you can randomly generate a problem and see if you can solve it correctly.
Please select a base to convert from below. You'll then be asked to select a base to convert to, and then given a problem to solve. </p>
<form>
<select id="ConvertFrom">
<option value="Select">Select</option>
<option value="Binary">Binary</option>
<option value="Decimal">Decimal</option>
<option value="Octal">Octal</option>
<option value="HexaDecimal">HexaDecimal</option>
</select>
<select id="ConvertTo">
<option value="Convertto">ConvertTo</option>
</select>
</form>
<script src="file:///C:/Users/johnt/Documents/Catan/practice2.js"></script>
</body>
</html>
You made four mistakes.
$convertfrom = $("select[name='ConvertFrom']"); has to be $('#ConvertFrom');
$convertto = $("select[name='ConvertTo']"); has to be $('#ConvertTo');
$convertto.change(function() { has to be $convertfrom.change(function() {
$("select[name='convertto'] option").remove() has to be $convertto.innerHTML = '';
This code works in JSFiddle fine however when I put in in a dreamweaver document or try it in a browser the div never shows. The aim is to get the div 'sreturned' to show when the user selects value '1' from the drop down. I have the code in two seperate files and link them. Any help greatly appreciated.
Here is the HTML
<body>
<script type="text/javascript" src="file:///Macintosh%20HD/Applications/MAMP/htdocs/thesurebettor/Untitled-2.js"></script>
<select id = "typeoption">
<option value="0">Qualifying Bet</option>
<option value="1">Free Bet</option>
<option value="2">Risk Free Bet</option>
</select>
<div style='display:none;' id='sreturned'> Stake Returned
</div>
</body>
Here is the script
$(document).ready(function(){
$('#typeoption').on('change', function() {
if ( this.value == '1')
{
$("#sreturned").show();
}
else
{
$("#sreturned").hide();
}
});
});
EDIT: JSFiddle include jquery in all pages
Do you have add jquery script ? Try this file :
<body>
<script type="text/javascript" src="file:///Macintosh%20HD/Applications/MAMP/htdocs/thesurebettor/Untitled-2.js"></script>
<select id = "typeoption">
<option value="0">Qualifying Bet</option>
<option value="1">Free Bet</option>
<option value="2">Risk Free Bet</option>
</select>
<div style='display:none;' id='sreturned'> Stake Returned
</div>
</body>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){
$('#typeoption').on('change', function() {
if ( this.value == '1')
{
$("#sreturned").show();
}
else
{
$("#sreturned").hide();
}
});
});
</script>
Hi I have a small question.
I have 2 select form , and i want when i choose rental the employed type become hidden and here's my code :
<label>Type</label>
<select id="Type-option" class="form-control">
<option value="employed">Employed</option>
<option value="rental">Rental</option>
</select>
<label>Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
<option value="fulltime">FULLTIME</option>
<option value="parttime">PARTTIME</option>
</select>
$(function() {
var select = $('#Type-option');
select.on('change', function() {
if (select.val() == "rental") {
$('#employedType-option').hide();
} else {
$('#employedType-option').show();
}
});
});
any idea ?
Few suggestions here
1. Never mix your mark up with your javascript.Consider binding events at javascript
2. I have modified your markup a bit,because when you hide employeetype u need to hide the label too
check the following snippet
$(document).ready(function(){
var select = $('#Type-option');
var employeeTypeOption=$('#employedType-option');
var employedType=$('#employedType');
select.on('change', function() {
var selectOption=select.find('option:selected').val();
if (selectOption == "rental") {
employeeTypeOption.hide();
employedType.hide();
} else {
employeeTypeOption.show();
employedType.show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Type</label>
<select id="Type-option" class="form-control">
<option value="employed">Employed</option>
<option value="rental">Rental</option>
</select>
<span id="employedType">
<label>Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
<option value="fulltime">FULLTIME</option>
<option value="parttime">PARTTIME</option>
</select>
</span>
Hope this helps
wrong syntax.
check $(document).on.('action','selection',function(){}); signature.
Tyr with below code
$(document).on('change','#Type-option', function() {
if ($(this).val() == "rental") {
$('#employedType-option').hide();
} else {
$('#employedType-option').show();
}
});
I am not sure but i guess you have missed one of these otherwise your code is working fine
Add reference to jquery library
Wrap your jquery code inside script tag.
<script>
$(function() {
var select = $('#Type-option'); select.on('change', function() {
if (select.val() == "rental") {
$('#employedType-option').hide();
}
else {
$('#employedType-option').show();
}
});
});
</script>
I think this is what you want. try the working demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<label>Type</label>
<select id="Type-option" class="form-control">
<option value="employed">Employed</option>
<option value="rental">Rental</option>
</select>
<label id="emp">Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
<option value="fulltime">FULLTIME</option>
<option value="parttime">PARTTIME</option>
</select>
<script type="text/javascript">
$("#Type-option").on('change',function(){
var theVal = $(this).val();//get the selected value
if(theVal == "rental"){
$("#emp").hide();
$("#employedType-option").hide()
}
else{
$("#emp").show();
$("#employedType-option").show()
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1 id="hey">List King</h1>
<div class="Select-DB">
<select id="DB" class="chosen-select" title="Select Database" data-placeholder="Select database you want!" style="width: 300px;">
<option value=""></option>
<option value="Pubchem3D"> Pubchem3D</option>
<option value="molport"> Molport</option>
<option value="ChemAxon"> ChemAxon</option>
<option value="ChemSpider"> ChemSpider</option>
</select>
</div>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script src="chosen_v1.6.2/chosen.jquery.js" type="text/javascript"></script>
<script src="ff.js" type="text/javascript"></script>
</body>
</html>
jquery chosen not working, what's wrong in my code?
My select tag just appear as default form....
p.s. Jquery code is located in another file ("ff.js")
$(document).ready(function(){
$(".chosen-select").chosen({no_results_text: "Sorry, We don't have such database ;-)"});
});
You need to change your javascript file like this
$('.chosen-select').change(function(){
var aaa = $("#DB").val(); // get option value
if(aaa === '') {
// user select empty item
console.log("Sorry, We don't have such database ;-)");
}
else{
// user select valid item
console.log(aaa);
}
});
How about using on change event?
$('.chosen-select').change(function(){
console.log(this.val());
});
I don't quite understand your question but try this
LINK
HTML
<h1 id="hey">List King</h1>
<div class="Select-DB">
<select id="DB" class="chosen-select" title="Select Database" data-placeholder="Select database you want!" style="width: 300px;">
<option value=""></option>
<option value="Pubchem3D"> Pubchem3D</option>
<option value="molport"> Molport</option>
<option value="ChemAxon"> ChemAxon</option>
<option value="ChemSpider"> ChemSpider</option>
</select>
</div>
JS
$('.chosen-select').change(function(){
var aaa = $("#DB").val();
if(aaa != ""){
console.log(aaa);
}
else{
console.log("Sorry, We don't have such database ;-)");
}
});