I'm working with jQuery in a .NET MVC project.
I use the following code to update a total on my form whenever a key is pressed or the value changes on the Quantity or Amount fields.
$(document).ready(function() {
$('##Html.IdFor(i => i.Form.Qty), ##Html.IdFor(i => i.Form.Amount)')
.change(calculateTotal)
.keyup(calculateTotal);
});
function calculateTotal() {
var qty = $('##Html.IdFor(i => i.Form.Qty)').val();
var amount = $('##Html.IdFor(i => i.Form.Amount)').val();
$('##Html.Id("TotalCost")').val((qty * amount).toFixed(2));
}
Whenever a key is pressed, the input (either quantity or amount) loses focus. I have narrowed this problem down to the last line in calculateTotal(). It seems setting the value of TotalCost removes focus from the source input of the event.
I'd like to find a work around.
EDIT:
As per #Christian Varga's suggestion, further testing has shown that this is not a jQuery problem. Rather it is interference from jquery.inputmask.
Related
So I created the following script to select all check boxes on a page
(function(d) {
var input = d.querySelectorAll('input[type="checkbox"]');
var i = input.length;
while (i--) {
input[i].checked = true;
}
})(this.document);
It does work to do that, however when trying it in Quickbooks while it does select all the boxes, the website does not register it as actually being selected (the total cost at the bottom remains the same, its like it superficially checks the boxes, visually only with no actual register). Any help would be great.
EDIT: Maybe simulating a click instead of changing the box values?
The only thing that changes when physically selecting a box is the value posted below changes to true from false
You should do :
input[i].setAttribute("checked", "");
The checked attribute is a boolean attribute, so the standard way to add it to an element is to pass an empty string for value.
https://developer.mozilla.org/fr/docs/Web/API/Element/setAttribute#Exemple
I am dynamically creating combination of textarea and label, each combination having different ids. e.g: text-1, text-2 .... for textarea and lab-1, lab-2, .... for labels.
Each label displays the number of characters in each textarea. I am doing this by using following piece of code.
function updateCount(textAreaId, labelId) {
var cs = $('#'+textAreaId).val().length;
$('#'+ labelId').text(cs);
}
Calling above function onkeyUp and onKeyDown on textarea and its working fine.
In some of the textareas I am filling the data from the users last submission from database, In that case it shows default length as 0 till some key in not pressed in the textarea.
I want that as soon as page loads.
You can manually trigger keyup
$('textarea[id^="text-"]').keyup();
Make sure to place this line after binding the keyup events to all textareas
On page load, get the value of the textareas where the value has been added. Get the length of the value, and subtract the length from the maximum length.
$(window).load(function(){
var length = $('textarea').val().length;
Maxmlength = maxmlength - length;
$('span').text(Maxmlength); //element to display the remaiing character.
});
Hope this will help.
<script>
$( document ).ready(function() {
var textAreaId="textArea1";
$('#'+textAreaId).keyup(function() {
updateCount(textAreaId, labelId);
});
});
</script>
I have a DevExpress ComboBox to select an amount unit (g, mg, l, etc.) for an amount field.
#Html.DevExpress().ComboBoxFor( model => model.PackageAmountUnit,
settings =>{settings.Width= 60;}
).BindList(args => this.Model.Units, args => this.Model.Units).GetHtml()
I have two other amount fields on the page but the units of these fields have to be the same as the selected unit of the first amount field.
So I want to duplicate the selected unit value of the DevExpress ComboBox and duplicate it to the other two unit fields which are just text fields (so no user input possible).
Here's an example
Is there a way to get the selected value via JavaScript or is there another way to do this?
Thank you
You can do this in Javascript by adding a handler for the ValueChanged event of the ComboBox.
<script type="text/javascript">
function OnComboChanged(s,e){
var comboValue = PackageAmountUnit.GetValue();
AmountField.SetValue(comboValue);
}
</script>
#Html.DevExpress().ComboBoxFor( model => model.PackageAmountUnit,
settings =>{
settings.Width= 60;
settings.Properties.ClientSideEvents.ValueChanged = "OnComboChanged";
}
).BindList(args => this.Model.Units, args => this.Model.Units).GetHtml()
This question response from DevExpress may also help" https://www.devexpress.com/Support/Center/Question/Details/Q349035
This documentation may also help https://documentation.devexpress.com/#AspNet/DevExpressWebScriptsASPxClientEditBase_GetValuetopic.
So basically what I'm trying to do as a measure of security (and a learning process) is to my own "Capthca" system. What happens is I have twenty "label's" (only one shown below for brevity), each with an ID between 1 and 20. My javascript randomly picks one of these ID's and makes that picture show up as the security code. Each label has its own value which corresponds to the text of the captcha image.
Also, I have the submit button initially disabled.
What I need help with is figuring out how to enable the submit button once someone types in the proper value that matches the value listed in the HTML label element.
I've posted the user input value and the ID's value and even when they match the javascript won't enable the submit button.
I feel like this is a really really simple addition/fix. Help would be much much appreciated!!!
HTML code
<div class="security">
<label class="captcha enabled" id="1" value="324n48nv"><img src="images/security/1.png"></label>
</div>
<div id="contact-div-captcha-input" class="contact-div" >
<input class="field" name="human" placeholder="Decrypt the image text here">
</div>
<input id="submit" type="submit" name="submit" value="Send the form" disabled>
Javascript code
//Picks random image
function pictureSelector() {
var number = (Math.round(Math.random() * 20));
//Prevents zero from being randomly selected which would return an error
if (number === 0) {
number = 1;
};
console.log(number);
//Set the ID variable to select which image gets enabled
pictureID = ("#" + number);
//If the siblings have a class of enabled, remove it
$(pictureID).siblings().removeClass("enabled");
//Add the disabled class to all of the sibling elements so that just the selected ID image is showing
$(pictureID).siblings().addClass("disabled");
//Remove the disabled class from the selected ID
$(pictureID).removeClass("disabled");
//Add the enabled class to the selected ID
$(pictureID).addClass("enabled");
};
//Calls the pictureSelector function
pictureSelector();
//Gets the value of the picture value
var pictureValue = $(pictureID).attr("value");
console.log(pictureValue);
//Gets the value of the security input box as the user presses the keys and stores it as the variable inputValue
$("#contact-div-captcha-input input").keyup(function(){
var inputValue = $("#contact-div-captcha-input input").val();
console.log(inputValue);
});
console.log($("#contact-div-captcha-input input").val());
//Checks to see if the two values match
function equalCheck() {
//If they match, remove the disabled attribute from the submit button
if ($(pictureValue) == $("#contact-div-captcha-input input").val()) {
$("#submit").removeAttr("disabled");
}
};
equalCheck();
UPDATE
Fiddle here
UPDATE #2
$("#contact-div-captcha-input input").keyup(function(){
var inputValue = $("#contact-div-captcha-input input").val();
console.log(inputValue);
if (pictureValue === inputValue) {
$("#inputsubmit").removeAttr("disabled");
}
});
So I got it working 99.9%, now the only problem is that if someone were to backspace or delete the correct value they have inputted, the submit button does not then change back to disabled. Any pointers?
Known issue.
Give your button a name OTHER THAN submit. That name interferes with the form's submit.
EDIT
A link was requested for this -- I don't have a link for pure JavaScript, but the jQuery docs do mention this issue:
http://api.jquery.com/submit/
Forms and their child elements should not use input names or ids that
conflict with properties of a form, such as submit, length, or method.
Name conflicts can cause confusing failures. For a complete list of
rules and to check your markup for these problems, see DOMLint.
EDIT 2
http://jsfiddle.net/m55asd0v/
You had the CSS and JavaScript sections reversed. That code never ran in JSFiddle.
You never re-called equalCheck. I added a call to your keyUp handler.
For some reason you wrapped pictureValue inside a jQuery object as $(pictureValue) which couldn't have possibly done what you wanted.
Basic debugging 101:
A console.log inside of your equalCheck would have shown you that function was only called once.
A console log checking the values you were comparing would have shown
that you had the wrong value.
Basic attention to the weird highlighting inside of JSFiddle would have shown you had the code sections in the wrong categories.
I'm creating an order form in which users can select an amount of products and it should immediately change total prices. I made some HTML markup and jquery code to achieve this, but I can't get it working. Can anyone see what I'm doing wrong?
Fixed script:
$("input[type=number]").change(function () {
var value = parseFloat($(this).attr("title"));
var total = (value * this.value).toFixed(2);
if (total < 0) total = 0;
$(this).parent().next().find("input").val('€' + total);
});
Inside of event handler this refers to HTMLInputElement, not jQuery instance so you have to wrap it in $(this).
Also you need to traverse one level up to the parent node and then use next() to get target input field.
Finally I added basic validation to prevent negative prices. You can also add min="0" attribute to input fields.
Demo: http://jsfiddle.net/dfsq/X33pS/