I am get the alert values of length and breadth .but I am not able to print the text in next div class i am using jquery.
Html:
<input type="hidden" id="len" name="len" value="len" />
<input type="hidden" id="bre" name="bre" value="bre" />
print the values in this div using id:
<div id="length"></div>
<div id="breadth"></div>
Jquery:
var len = ($('#len').attr('value'));
$('#length').text(len);
var bre =($('#bre').attr('value'))
$('#breadth').text(bre);
Jquery full code of submitting:
<script type="text/javascript">
$(window).load(function()
{
$('.green').hide();
$('.red').show();
});
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="red")
{
$(".box").not(".red").hide();
$(".red").show();
$(document).ready(function() {
$('#lenbredth').validate({
rules: {
length: {
required: true,
number: true,
range: [48, 84]
},
breadth: {
required: true,
number: true,
range: [24, 78]
}
},enter code here
messages: {
length: {
required: 'Please select a template'
},
breadth: {
required: 'Please select a template'
}
},
submitHandler: function(){
$('div[id ^=div]').hide();
$("#div4").show();
var dataString = $(this.currentForm).serialize();
var lenbreath = dataString.split('&');
var bed1= lenbreath[0];
var len = bed1.substr(7,9);
alert(len);
$("#len").val(len);
var bed2= lenbreath[1];
var bre = bed2.substr(8,10);
$("#bre").val(bre);
return false;
}
});
$("#summer5").click(function() {
$("#lenbredth").submit();
});
$("#length").change(function(){
var length =$(this).val();
$("#breadth").change(function(){
var breadth =$(this).val();
var lenbre= length * breadth;
//alert(lenbre);
var result =length.concat(breadth);
var len = (length * breadth) ;
});
});
});
}
if($(this).attr("value")=="green")
{
$(".box").not(".green").hide();
$(".green").show();
$(window).load(function()
{
$('.dimension').hide();
$('#d1').show();
});
$('.bed_type ul li ').click(function()
{
var i = $(this).index();
$('.dimension').hide();
$('#d' + (i+1)).show();
var type ='b' + (i+1);
document.getElementById(type).addEventListener("click", bedtype);
});
$('.dimension ul li').click(function () {
var i = $(this).index();
var single ='single' + (i+1);
//alert(single);
var doubles ='doubles' + (i+1);
var queen ='queen' + (i+1);
var king ='king' + (i+1);
document.getElementById(single).addEventListener("click", price);
document.getElementById(doubles).addEventListener("click", price);
document.getElementById(queen).addEventListener("click", price);
document.getElementById(king).addEventListener("click", price);
});
function price()
{
$(document).ready(function() {
$('#radioselection').validate({
submitHandler: function(){
$('div[id ^=div]').hide();
$("#div4").show();
var dataString = $(this.currentForm).serialize();
var lenbre = dataString.substr(22,27);
var arr = lenbre.split('*');
var len= arr[0];
$("#len").val(len);
var bre= arr[1];
$("#bre").val(bre);
return false;
}
});
$("#summerss").click(function() {
$("#radioselection").submit();
});
var price_btn=this.id;
var price_value = document.getElementById(price_btn).value;
var arr = price_value.split('*');
});
}
}
});
});
$(document).ready(function()
{
$('#plainpattern').validate({
rules: {
plainpattern:{
required: true
}
},
messages: {
plainpattern:{
required: 'Please select the image plain or pattern'
}
},
submitHandler: function(){
$('div[id ^=div]').hide();
$("#div5").show();
var len = ($('#len').attr('value'));
$('#length').text($('#len').val());
var bre =($('#bre').attr('value'))
$('#breadth').text($('#bre').val());
var dataString = $(this.currentForm).serialize();
var plainpattern = dataString.substr(13,16);
$("#mattersplainpatters").text(plainpattern + ' "');
return false;
}
});
$("#summer7").click(function() {
$("#plainpattern").submit();
});
$('li').click( function(){
$('li').removeClass('selected');
$(this).addClass('selected');
var legend = $(this).children("input[type=radio]").val();
});
});
Try this
$('#length').text($('#len').val());
$('#breadth').text($('#bre').val());
It worked after including jquery and writing your jquery code in $(document).ready() or $(function(){})
$(function(){
var len = ($('#len').attr('value'));
$('#length').text(len);
var bre =($('#bre').attr('value'))
$('#breadth').text(bre);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="len" name="len" value="len" />
<input type="hidden" id="bre" name="bre" value="bre" />
<div id="length"></div>
<div id="breadth"></div>
altrnatively to get value use
$('#len').val();
to get the value of len
Related
I have 48 inputs, and for each input I need to get its value and add it to the total sum. Currently I am only getting the values of two inputs and adding them but how would it be better to make this a "foreach function"
$(document).ready(function() {
$('.margin .custom-input:nth-child(1)').change(function() {
updateTotal();
});
$('.margin .custom-input:nth-child(2)').change(function() {
updateTotal();
});
var updateTotal = function () {
var input1 = parseInt($('.margin .custom-input:nth-child(1)').val());
var input2 = parseInt($('.margin .custom-input:nth-child(2)').val());
var total = input1 + input2;
$(".marginAttachment").text("Durchschn. Attachmentniveau = " + total + "mm");
};
});
<div class="margin">
<input class="custom-input" type="text" value="0">
</div>
You have to use the jQuery each function. your final code will be like this
$(document).ready(function() {
$('.margin .custom-input').change(function() {
updateTotal();
});
var updateTotal = function () {
var total = 0;
$('.margin .custom-input').each(function() {
total += parseInt($(this).val());
});
$(".marginAttachment").text("Durchschn. Attachmentniveau = " + total + "mm");
};
});
Or, you just directly get the value of active input so that no need to implement for loop. like this
$(document).ready(function() {
var total = 0
$('.margin .custom-input').change(function() {
total += $(this).val()
$(".marginAttachment").text("Durchschn. Attachmentniveau = " + total + "mm");
});
});
jQuery does have foreach support, in form of the .each() function:
var sum = 0;
$('.margin .custom-input').each(function() {
sum += parseInt($(this).val());
});
I"m trying to replace the values but always gets "undefined".
working
ids[0] = "n";
not working:
ids[0] = "nesya";
The full code here:
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form name="form1" method="post" action="">
<p>ids <input type="text" id="ids" name="id" class="ui-autocomplete-input" autocomplete="off"></p>
<p>use <input type="text" id="use" name="username" class="ui-autocomplete-input" autocomplete="off"></p>
<p>ful <input type="text" id="ful" name="full_name" class="ui-autocomplete-input" autocomplete="off"></p>
</form>
<script type="text/javascript">//<![CDATA[
var ids = new Array();
var use = new Array();
var ful = new Array();
ids[0] = "nesya";
use[0] = "aaa";
ful[0] = "text1";
ids[1] = "2";
use[1] = "bbb";
ful[1] = "text2";
ids[2] = "3";
use[2] = "ccc";
ful[2] = "text3";
function Choice(autoEle) {
if(autoEle === 'use') {
selectedIndex = use.indexOf( $('#use').val());
} else if(autoEle === 'ful') {
selectedIndex = ful.indexOf( $('#ful').val());
} else {
selectedIndex = ids.indexOf( $('#ids').val());
}
document.getElementById("ids").value = ids[selectedIndex];
document.getElementById("use").value = use[selectedIndex];
document.getElementById("ful").value = ful[selectedIndex];
}
$("#use").autocomplete({
source: use,
select: function(){
$('#selectUsers option[value="' + (use.indexOf( $('#use').val()) + 1) + '"]').attr('selected','selected');
Choice('use');
}
});
$("#ids").autocomplete({
source: ids,
select: function(){
$('#selectUsers option[value="' + (ids.indexOf( $('#ids').val()) + 1) + '"]').attr('selected','selected');
Choice('ids');
}
});
$("#ful").autocomplete({
source: ful,
select: function(){
$('#selectUsers option[value="' + (ful.indexOf( $('#ful').val()) + 1) + '"]').attr('selected','selected');
Choice('ful');
}
});
//]]>
</script>
</body>
Check the below code :
var ids = new Array();
var use = new Array();
var ful = new Array();
ids[0] = "nesya";
use[0] = "aaa";
ful[0] = "text1";
ids[1] = "2";
use[1] = "bbb";
ful[1] = "text2";
ids[2] = "3";
use[2] = "ccc";
ful[2] = "text3";
function Choice(autoEle, item) {
if(autoEle === 'use') {
selectedIndex = use.indexOf(item);
} else if(autoEle === 'ful') {
selectedIndex = ful.indexOf(item);
} else {
selectedIndex = ids.indexOf(item);
}
document.getElementById("ids").value = ids[selectedIndex];
document.getElementById("use").value = use[selectedIndex];
document.getElementById("ful").value = ful[selectedIndex];
}
$("#use").autocomplete({
source: use,
select: function(e, data){
$('#selectUsers option[value="' + (use.indexOf( $('#use').val()) + 1) + '"]').attr('selected','selected');
Choice('use', data.item.value);
}
});
$("#ids").autocomplete({
source: ids,
select: function(e, data){
$('#selectUsers option[value="' + (ids.indexOf( $('#ids').val()) + 1) + '"]').attr('selected','selected');
Choice('ids', data.item.value);
}
});
$("#ful").autocomplete({
source: ful,
select: function(e, data){
$('#selectUsers option[value="' + (ful.indexOf( $('#ful').val()) + 1) + '"]').attr('selected','selected');
Choice('ful', data.item.value);
}
});
How can I prevent duplicate values being added to a combobox? I also need to prevent the space value. This is my code but its not working.
An entry is entered the first time input but the second time I enter input its alerting me that I have entered a duplicate value even when I enter different values.
Please see this jsFiddle https://jsfiddle.net/adLxoakv/
<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<fieldset>
<legend>Combo box</legend>
Add to Combo: <input type="text" name="txtCombo" id="txtCombo"/>
Selected: <input type="text" name="selected" id="selected"/>
IMEI Selected: <input type="text" name="imei" id="imei"/>
<input type="button" id="button" value="Add" onclick="addCombo()">
<br/>
Combobox: <select name="combo" multiple id="combo"></select>
</fieldset>
</BODY>
</HTML>
<script>
$("#txtCombo").on("keydown", function (e) {
return e.which !== 32;
});
$(document).ready(function() {
$('#button').click(function(){
var data = [];
$.each($("#combo option:selected"), function() {
data.push($(this).attr("value"));
});
$('#imei').val(data.join(","));;
var count = $("#combo :selected").length;
$('#selected').val(count);
});
});
$("#combo").on('change', function () {
var count = $("#combo :selected").length;
$('#selected').val(count);
});
var text = $("#text").val();
function addCombo() {
var textb = document.getElementById("txtCombo");
var combo = document.getElementById("combo");
var option = document.createElement("option");
option.text = textb.value;
option.value = textb.value;
option.selected = true;
if (textb.length == 0) {
return false;
}
if (combo.length) {
alert("Duplicate found");
return false;
}
try {
combo.add(option, null ); //Standard
}catch(error) {
combo.add(option); // IE only
}
textb.value = "";
}
// separated by comma to textbox
$(document).ready(function() {
$("#combo").change(function() {
var data = [];
$.each($("#combo option:selected"), function() {
data.push($(this).attr("value"));
});
$('#imei').val(data.join(","));;
});
});
</script>
To find the duplicate you can use following function(using jQuery)
function isDuplicate(value,text){
/*Get text of the option identified by given value form the combobox and then check if its text matches the given text*/
if($('#combo select option[value="' + value + '"]').text() == text)
return true;
else
return false;
}
Update:
function addCombo() {
var textb = document.getElementById("txtCombo");
var combo = document.getElementById("combo");
var option = document.createElement("option");
var value = textb.value.trim();
option.text = value;
option.value = value;
option.selected = true;
if (textb.length == 0) {
return false;
}
if ($('#combo option[value="' + value + '"]').text() == value ) {
alert("Duplicate found");
return false;
}
try {
combo.add(option, null ); //Standard
}catch(error) {
combo.add(option); // IE only
}
textb.value = "";
}
I want to make editable list like MySQL but i can't get same DIV id when it's change to input field...can anyone tel me how to do that....
this is my code...
//<![CDATA[
$(window).load(function() {
$.fn.editable = function() {
var textBlocks = $(this);
for (var i = 0; i < textBlocks.length; i += 1) {
var textBox = $('<input class="my-text-box" onchange="myFunction(this.value)" />');
var textBlock = textBlocks.eq(i);
textBox.hide().insertAfter(textBlock).val(textBlock.html());
}
textBlocks.dblclick(function() {
toggleVisiblity($(this), true);
});
$('.my-text-box').blur(function() {
toggleVisiblity($(this), false);
});
toggleVisiblity = function(element, editMode) {
var textBlock,
textBox;
if (editMode === true) {
textBlock = element;
textBox = element.next();
textBlock.hide();
textBox.show().focus();
textBox[0].value = textBox[0].value;
} else {
textBlock = element.prev();
textBox = element;
textBlock.show();
textBox.hide();
textBlock.html(textBox.val());
}
};
};
var $edit = $('.makeEditable').editable();
});
function myFunction(val) {
document.writeln(val);
}
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<div class="makeEditable" id="fname">First Name</div>
<div class="makeEditable" id="lname">Last Name</div>
<div class="makeEditable" id="contacts">00 000 0000</div>
<div class="makeEditable" id="email">test#yourdomain.com</div>
please HELP me on this.....
You can get div id when it's change to input field like following.
In if (editMode === true) {} block add var divId = element.attr('id')); like below.
if (editMode === true) {
var divId = element.attr('id'));
console.log(divId);
}
Hope it will help you.
I want after add a input and remove it, arrange the numbers in input name element array by jQuery but don't work for me after remove input. How can fix it?
DEMO: http://jsfiddle.net/mUMdW/
My Code:
Html:
<div class="ch">
Add
</div>
<p class="ffdd"></p>
jQuery:
function removeidx(clss, type){
var remove = $(this).closest(clss);
remove.fadeOut('slow', function () {
$(this).remove(); // or change next line to $('.RowCheck:visible')
$(clss).each(function (idx) {
var checkBoxes = $('input[type="'+type+'"]',this);
checkBoxes.each(function(i) {
var str = $(this).attr('name');
var currentIdx = parseInt(str.match(/\d+/)[0], 10);
$(this).attr('name', str.replace(currentIdx,idx));
})
});
});
}
$(document).on('click change', 'a.adding', function(e) {
e.preventDefault();
var idx = $('.Row').length;
$('.ffdd').append('<div class="Row"> <input name="arr['+idx+'][]" type="text" value=""> Remove</div>');
});
$('.ffdd').on('click','a', function(e){
$(this).closest('.Row').remove();
removeidx('.ffdd', 'text');
})
I guess that you want to re-number the inputs after a remove, so that the array is made of contiguous numbers.
I have rewritten some things, among which the renumbering function, using an index contextual to the parent function.
function removeidx(context, clss, type) {
var remove = $(context).closest(clss);
remove.fadeOut('slow', function () {
$(this).remove();
var idx = 0;
$(clss).each(function () {
var checkBoxes = $('input[type="' + type + '"]', this);
checkBoxes.each(function () {
var name = $(this).attr('name');
name = name.replace(/\d+/, idx);
$(this).attr('name', name);
idx = idx + 1;
});
});
});
}
$(document).on('click change', 'a.adding', function (e) {
e.preventDefault();
var idx = $('.Row').length;
$('.ffdd').append('<div class="Row"> <input name="arr[' + idx + '][]" type="text" value=""> Remove</div>');
});
$('.ffdd').on('click', 'a', function (e) {
removeidx(this, '.Row', 'text');
})
You can see a working version there : http://jsfiddle.net/8sVWp/