Im trying to update a text box when a selection changes.
Here is the code.
<script type="text/javascript">
$("#name").change(function () {
var selectedValue = $(this).val();
var result = string.substring(string.lastIndexOf(":") + 1);
document.getElementById('newname').value = result ;
});
</script>
Being an extream noob to this i dont understand why this is not working?
The #name is the dropdown list "selection" and the newname is the text box i want to update.
In the var result, string.substring, do you mean selectedValue.substring ?
<script type="text/javascript">
$("#name").change(function () {
var selectedValue = $(this).val();
var result = selectedValue.substring(selectedValue.lastIndexOf(":") + 1);
document.getElementById('newname').value = result ;
});
</script>
Related
I'm sorry if this is too simple of a question. I am trying to change all instances of & to and using the event-handler blur. I am seeming to get no changes on blur even if my function is simply
id.value = "Random test string";
so I am assuming this is a problem with the event handler itself. Any help would be appreciated, thanks.
I have the code for changing & commented out because I was checking to see if the function tied to the blur eventhandler was triggering at all, which it was not. This code also has an HTML file with a text box with an ID of textid
<script type="text/javascript">
//var for saving the string
var textvar;
//var for the texta area
var id = document.getElementById("textid");
id.addEventListener("blur", function() {
//textvar = id.value;
//textvar = textvar.replace("&", " and ");
//id.value = textvar;
textvar = "Correct!!";
id.value = textvar;
}, false);
</script>
This code is working fine and as expected:
<input type="text" id="textid" />
JS Code
//var for saving the string
var textvar;
//var for the texta area
var id = document.getElementById("textid");
id.addEventListener("blur", function() {
textvar = id.value;
textvar = textvar.replace(/\&/g, " and ");
id.value = textvar;
}, false);
You can find the working Pen here
You might want to consider this other approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function change(element) {
let textvar = element.value;
if (textvar.indexOf('&') !== -1) {
textvar = textvar.replace("&", " and ");
}
element.value = textvar;
}
</script>
</head>
<body>
<input type="text" onblur="change(this)" />
</body>
</html>
I hope this could help.
How can I get the value of variable mjt_plan1 by using a dynamic variable plan?
jQuery(document).ready(function () {
var plan = 'plan1';
var mjt_plan1 = '10000';
alert('mjt_' + plan);
});
jQuery(document).ready(function(){
var plan = 'plan1';
var mjt_plan1 = '10000';
alert(window['mjt_' + plan]);
});
How to find JavaScript variable by its name
<script type="text/javascript">
jQuery(document).ready(function(){
var plan = 'plan1';
var mjt_plan1 = '10000';
alert (eval ('mjt_'+plan));
});
</script>
I am trying to show prices of a product that is select previously by analyzing a form.
With a shortcode I can display the price of a product by it's ID, but I have to hard code it on a section.
This works...
<script type="text/javascript">
var x = "4145";
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('input').innerHTML = "[woocommerce_price id=4145]";
})
</script>
And this doesn't...
<script type="text/javascript">
var x = "4145";
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('input').innerHTML = "[woocommerce_price id=" + x + "]";
})
</script>
How can I make this work on the client side?
Hello I am trying to make my jquery code in working order but its not working at all, I don't know whats a problem behind it but it contains multiple text boxes in multiple rows, each row calculates its own sum
Here is Fiddle link
Here is my Code
$(document).ready(function(){
$('.employee input[type="text"]').keyup(function() {
var basic_salary = parseInt($('input[name^=txtMonthlyRate]').val());
var advance_salary = parseInt($('input[name^=txtAdvance]').val());
var recover_comm = parseInt($('input[name^=txtRecovery]').val());
var sales_comm = parseInt($('input[name^=txtSales]').val());
var deduction_salary = parseInt($('input[name^=txtDeduction]').val());
var adjustment_salary = parseInt($('input[name^=txtAdjustment]').val());
var total_sum = ((basic_salary+recover_comm+sales_comm) - (deduction_salary + advance_salary)) + adjustment_salary;
$('input[name^=txtTotal]').val(total_sum);
console.log(total_sum)
);
});
The txtSales1, txtDeduction1, txtAdjustment1 variables are camel cased in your javascript, but not on the html input name. So these return NaN.
UPDATE Also, you need to set the context of what you're referring to using the second parameter of a selector function:
$('.employee input[type="text"]').keyup(function(e) {
var $scope = $(this).closest('.employee');
var basic_salary = parseInt($('input[name^=txtMonthlyRate]', $scope).val());
var advance_salary = parseInt($('input[name^=txtAdvance]', $scope).val());
var recover_comm = parseInt($('input[name^=txtRecovery]', $scope).val());
var sales_comm = parseInt($('input[name^=txtSales]', $scope).val());
var deduction_salary = parseInt($('input[name^=txtDeduction]', $scope).val());
var adjustment_salary = parseInt($('input[name^=txtAdjustment]', $scope).val());
var total_sum = ((basic_salary+recover_comm+sales_comm) - (deduction_salary + advance_salary)) + adjustment_salary;
$('input[name^=txtTotal]', $scope).val(total_sum);
});
The txttotal1 needs to be changed to txtTotal1
The fiddle needs a closing }
Below is my HTML code:
<select id="sourceNameDropdownId" label="condition " style="width:300px;">
</select>
<div id="tabs" class="selector">
</div>
Here, is my javascript code:
$("#DropdownId").change(function () {
var sid= $("#DropdownId option:selected").text();
afterclick(sid);
});
I am calling an onchange event on dropdown list, and the selected value i am passing to function afterclick
function afterclick(sid){
var tabsContainer = document.getElementById("tabs");
var crawlTab=document.createElement("ul");
//here in my actual code i am making a ajax call to fetch values for crawlList, providing static values here
var crawlList=["name1","name2","name3","name4"];
$.each(crawlList, function( index, crawlType ) {
var crawlTabElement=document.createElement("li");
crawlTabElement.innerHTML= '' +crawlType+'';
crawlTab.appendChild(crawlTabElement);
});
tabsContainer.appendChild(crawlTab);
var count=1;var tabCount=1;
$.each(crawlList, function( index, crawlType ) {
var contentCrawlTab=document.createElement("div");
contentCrawlTab.setAttribute("id",crawlType);
var p='<p>'+crawlType+'</p>';
contentCrawlTab.innerHTML=p;
tabsContainer.appendChild(contentCrawlTab);
});
$( ".selector" ).tabs();
}
This code is working fine when for the first time page gets loaded and a value is selected from the dropdown, but when i re-select value from the dropdown tabs are not getting displayed properly.
This is when i select value for the first time after page is loaded.
And when i reselect the value from dropdown its showing like this-
Is there something like reload to reload the tabs div entirely, as it seems that its appending the previous values and next time when afterclick function is called tab elements are not getting displayed properly.
I tried clearing the "tabs" div too, using **$( "#tabs " ).empty()**But it didn't worked for me.
Please help me out.
Check this working code.
$().ready(function () {
$(".selector").tabs();
$("#DropdownId").change(function () {
var sid = $("#DropdownId option:selected").text();
afterclick(sid);
});
});
function afterclick(sid) {
var tabsContainer = document.getElementById("tabs");
tabsContainer.innerHTML = '';
var crawlTab = document.createElement("ul");
//here in my actual code i am making a ajax call to fetch values for crawlList, providing static values here
var crawlList = [sid + "1", sid + "2", sid + "3", sid + "4"];
$.each(crawlList, function (index, crawlType) {
if (crawlType != null) {
var crawlTabElement = document.createElement("li");
crawlTabElement.innerHTML = '' + crawlType + '';
crawlTab.appendChild(crawlTabElement);
}
});
tabsContainer.appendChild(crawlTab);
var count = 1; var tabCount = 1;
$.each(crawlList, function (index, crawlType) {
if (crawlType != null) {
var contentCrawlTab = document.createElement("div");
contentCrawlTab.setAttribute("id", crawlType);
var p = '<p>' + crawlType + '</p>';
contentCrawlTab.innerHTML = p;
tabsContainer.appendChild(contentCrawlTab);
}
});
$(".selector").tabs('destroy');
$(".selector").tabs();
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<select id="DropdownId" label="condition " style="width:300px;">
<option selected="selected" disabled="disabled">--Select--</option>
<option>Bilna-ID</option>
<option>IndiatimesShopping</option>
</select>
<div id="tabs" class="selector">
</div>