I am trying to understand why the following doesn't work:
function SetMaxLength() {
var form = $("body").find("form");
form.each(function () {
var elements = $(this).find("input");
elements.each(function() {
var attr = $(this).attr('data-val-maxlength-max');
if (typeof attr !== typeof undefined && attr !== false) {
$(this).attr('maxlength', attr.value);
}
});
});
}
<form action="/go/somewhere" autocomplete="off" class="form-one" method="post" role="form" novalidate="novalidate">
<input data-val-maxlength="Invalid Email" data-val-maxlength-max="254" type="text" value="">
</form>
when I step through it, it finds 1 form but then on the each part it just skips it, steps over it.
Basically all it is suppose to do it when it sees data-val-maxlength-max attribute, it is suppose to take its value and inject maxlength attribute in the element.
JsFiddle: https://jsfiddle.net/j04vue8r/3/
Since you already have jQuery included in your page, it's better to rewrite your code and make it more "jQuery style".
Here we go:
$('[data-val-maxlength-max]').each(function(){
$(this).attr('maxlength', $(this).data('val-maxlength-max'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/go/somewhere" autocomplete="off" class="form-one" method="post" role="form" novalidate="novalidate">
<input data-val-maxlength="Invalid Email" data-val-maxlength-max="254" type="text" value="">
</form>
I've tried your code and it not step over the each function. The problem is the attr() function that doesn't set the maxlenght attribute because you have a mistake in the code: attr is just the value of data-val-maxlength-max and so you have to write something like this:
$(this).attr('maxlength', attr);
This does what you need:
$(function() {
$("form input").each(function() {
var attr = $(this).attr('data-val-maxlength-max');
if (typeof attr !== undefined && attr !== false) {
$(this).attr('maxlength', attr);
}
});
});
There are two problems with above code.
1. Function SetMaxLength is not called
2. variable attr already contains value. So you don't need to do attr.value
Below code works
function SetMaxLength() {
var form = $("body").find("form");
form.each(function () {
var elements = $(this).find("input");
elements.each(function() {
var attr = $(this).attr('data-val-maxlength-max');
if (typeof attr !== typeof undefined && attr !== false) {
$(this).attr('maxlength', attr);
}
});
});
}
SetMaxLength()
Try this
window.onload = function () {
SetMaxLength();
}
function SetMaxLength() {
var form = $("body").find("form");
form.each(function () {
var elements = $(this).find("input");
elements.each(function() {
var attr = $(this).attr('data-val-maxlength-max');
console.log(attr);
if (typeof attr !== typeof undefined && attr !== false) {
$(this).attr('maxlength', attr);
}
});
});
}
All I did was remove attr.value in your if statement. Works fine for me. You don't need the value, since you already grabbed it in the variable : ). I'd encourage you not to use generic terms like "form" and "elements" and "attr". They might cause issues.
By the way, in the future you may wish to use console.log. It helped me figure out the issue here. I did console.log(attr) right after the var attrline to see what we were getting. In Chrome you can view the console by hitting ctrl + shift + J. Since I saw that it was 254, I knew we didn't need to get a new value : ).
Related
I need to understand how to do real time calculation on Edit.js
By searching and looking around i came up with this code in Edit.js of the Contact Module.
calculate_amount: function (){
var units = $("input[name='cf_852']");
var value = $("input[name='cf_854']");
$(units, value).on('keyup', function(){
if (units.val() != '' && value.val() != ''){
var currentamount = units.val() * value.val();
$("input[name='cf_856']").val(currentamount);
}
});
}
Have i done something wrong? Because it doesn't work..
Thanks for all the help!
I should write your keyup function like this:
I tested, it's OK
calculateAmount: function (){
var units = $("input[name='cf_1512']");
var value = $("input[name='cf_1514']");
$(document).on('keyup',"input[name='cf_1512'], input[name='cf_1514']", function(){
if (units.val() != '' && value.val() != ''){
var currentamount = units.val() * value.val();
$("input[name='cf_1518']").val(currentamount);
}
})
},
You must call you function into the function registerBasicEvents.
If the registerBasicEvents function is not available in Edit.js of Contacts module so add it.
registerBasicEvents: function (container) {
this._super(container);
this.calculate_amount();
}
You should pass id's of element instead reference of element for Keyup function. Please find below code snippet and modify your code in vTiger. As I checked all syntax and function written correctly in your script. Just pass the comma separated id's and execute the code. Thanks!
var units = $('#Contacts_editView_fieldName_cf_1512');
var value = $('#Contacts_editView_fieldName_cf_1514');
$('#Contacts_editView_fieldName_cf_1512, #Contacts_editView_fieldName_cf_1514').on('keyup', function(){
if (units.val() != '' && value.val() != ''){
var currentamount = parseFloat(units.val()) * parseFloat(value.val());
$("#Contacts_editView_fieldName_cf_1516").val(currentamount);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Input1: <input type="text" id="Contacts_editView_fieldName_cf_1512"/><br/>
Input2: <input type="text" id="Contacts_editView_fieldName_cf_1514" /><br/>
Result: <input type="text" id="Contacts_editView_fieldName_cf_1516"/>
I know it is very simple.But Still it is not working.I am multiplying a input number with a fixed number,but is not showing the expected result.it always shows the Error message "Please enter some value" even i enter some integer e.g. 6.
This is Html Code.
<input type="text" class="cc" id="getdata" />
<div id="result"> <input type="text" id="show" /></div>
<input type="button" value="calculate" id="calculate" />
This is JQuery Code.
$(document).ready(function () {
$("#calculate").click(function () {
if ($("#input").val() != '' && $("#input").val() != undefined) {
$("#result").html("total value is::" + parseInt($("#input").val()) * 5);
}
else {
$("#result").html("Please enter some value");
}
});
});
Any help will be highly appreciated.
Can anyone tell me please how to concatenate all clicked values of different buttons in a textbox?I want to show previous and current clicked value of button in a textbox.
Thank you.
Do you not mean #getdata? Where is #input?
Replace ("#input") with ("#getdata") in your code.
Check out this fiddle.
$(document).ready(function () {
$("#calculate").click(function () {
if ($("#getdata").val() != '' && $("#getdata").val() != undefined) {
$("#result").html("total value is::" + parseInt($("#getdata").val()) * 5);
} else {
$("#result").html("Please enter some value");
}
});
});
You have no input whose id is "input". The jquery selector #somestring is looking for an element whose id is somestring.
Replace ("#input") by ("#getdata") in your code.
There is no field with the ID input in the HTML you posted, yet your jQuery is looking for one. Perhaps you meant $('#show')
With jQuery issues, ALWAYS suspect the selector before even wondering what else might be wrong. Confirm it actually finds the elements you think it does - never assume.
console.log($('#input').length); //0
if ($("#input").val() != '' && $("#input").val() != undefined) {
You dont have any field anywhere in your markup with the id input!
I think you intended all the instances of #input in that script to be #getdata, but you should also only read its value once into a variable and use that:
$("#calculate").click(function () {
var val = $('#getdata').val();
if (val != '' && val != undefined) {
$("#result").html("total value is::" + parseInt(val) * 5);
}
else {
$("#result").html("Please enter some value");
}
});
Live example: http://jsfiddle.net/82pf4/
$(document).ready(function () {
$("#calculate").click(function () {
if ($("#getdata").val() != '' && $("#getdata").val() != undefined) {
$("#result").html("total value is::" + parseInt($("#getdata").val()) * 5);
}
else {
$("#result").html("Please enter some value");
}
});
});
Checkout this Fiddle
I think that is what you want.
<input type="text" class="cc" id="getdata" />
<input type="button" value="calculate" id="calculate" />
<div id="result"></div>
<script>
$("#calculate").click(calculate);
$("#getdata").keypress(function(ev){
if(ev.keyCode == 13)
calculate();
});
function calculate()
{
var $getData = $("#getdata");
var $result= $("#result");
if ($getData .val() != '' && $getData .val() != undefined && !isNaN($getData .val()))
{
$result.append((parseInt($getData .val()) * 5) + "<p>");
}
else
{
$result.append("Please enter some value<p>");
}
$getData .val("").focus();
}
</script>
I have problem with passing an argument to my simple function in jQuery:
When function is attached directly to the element everything is OK.
$companyNameInputs.bind('blur keyup',function(){
if ($(this).hasClass('required')) {
if (this.value == ''){
$(this).addClass('inputError');
}else {
$(this).removeClass('inputError');
}
}
});
but when I want to declare this simple check as an different function it doesn't work:
this is my function:
var standardCheck = function($param){
$param.addClass('inputError');
if ($param.hasClass('required')) {
if ($.trim($param).value == ''){
$param.addClass('inputError');
}else {
$param.removeClass('inputError');
}
}
};
and this is how I call it:
$companyNameInputs.bind('blur keyup',function(){
standardCheck($(this));
});
variable declaration:
var $companyNameInputs = $("#companyName")
and the HTML:
<div>
<p>
<input class="text_input" type="text" id="companyName" name="companyName" value="" />
</p>
</div>
please help.
Since param is a jQuery container, you have to call .val() and trim the output of that:
if ($.trim($param.val()) == ''){
or get the corresponding DOM element and its value property.
if ($.trim($param[0].value) == ''){
I have two arrays, one with input names, and one with the value to give each input. There are 7 inputs, so I made a loop to fill out each input with it's value, then make it so that the text will disappear when that input is focused, and restore the original value text if nothing was typed. Is this possible to do through a loop with jQuery? It seems to me .live and .bind won't work for this purpose. Will I have to hardcore in each input event focus&blur event?
for (var i=0;i<7;i++) {
$('#user_' + input_names[i]).attr('value', default_values[i]);
$('#user_' + input_names[i]).live("blur", function(){
if(this.value == '')this.value=default_values[i];
});
$('#user_' + input_names[i]).live("focus", function(){
if(this.value == default_values[i])this.value='';
});
}
Update here, releasing the arrays as Eric requested:
var input_names = ['username', 'password'];
var default_values = ['Username', 'Password'];
for (var i=0;i<2;i++) {
$('#user_' + input_names[i]).attr('value', default_values[i]);
$('#user_' + input_names[i]).blur(function(){
if(this.value == '')this.value=default_values[i];
});
$('#user_' + input_names[i]).focus(function(){
if(this.value == default_values[i])this.value='';
});
}
Looks like you're looking for the HTML5 placeholder attribute. Just change your HTML to this:
<input id="user_username" placeholder="Username" />
<input id="user_password" placeholder="Password" />
If you want backwards compatibility, there's a jQuery plugin for that. With the plugin referenced, just do this:
$('input[placeholder]').placeholder();
As for what's wrong with your initial code, I suspect there's a closure problem, and i is retaining the value of 7. You'd do better to rewrite it like this:
var inputDefaults = {username: 'Username', password: 'Password'};
$.each(inputDefaults, function(field, defaultValue) {
$('#user_' + field)
.attr('value', defaultValue);
.blur(function() {
if($(this).val() == '')
$(this).val(defaultValue);
})
.focus(function(){
if($(this).val() == defaultValue)
$(this).val('');
});
});
I have some JQuery that isn't working and I need a little help. I a few forms on my website, and they all have a textarea with the class ".form-textarea". What I'm trying to do is use JQuery to get the default value of the textarea, clear the value on focus and reinstate the original value if the the textarea is empty. I realise that an ID would probably be better but I need a generic function to affect all of the textareas with this particular class.
$(document).ready(function()
{
var def = $(".form-textarea")
$(".form-textarea").focus(function(srcc)
{
if ($(this).val() == def)
{
$(this).removeClass("defaultTextActive");
$(this).val("");
}
});
$(".form-textarea").blur(function()
{
if ($(this).val() == "")
{
$(this).addClass("defaultTextActive");
$(this).val(def);
}
});
$(".defaultText").blur();
});
This is an old method I used for the exact same purpose. I believe this is what you're looking for (uses Textareas) : Live demo
This uses the jQuery data API. I've also added an extra class so you can markup your text nicely (disabled_text). This is a general purpose method so all you need to do is add the suggest class to your textarea/input and the script will do the rest
<textarea class='suggest'>Some default value</textarea>
<textarea class='suggest'>Some default value2</textarea>
<textarea class='suggest'>Some default value3</textarea>
<input type='text' value ='me too' class='suggest'>
$('.suggest').each(function() {
$this = $(this);
if ($this.val() != '') {
return;
}
$this.data('defaultval', $this.val());
$this.addClass('disabled_text').focus(function() {
if ($this.val() == $this.data('defaultval')) {
$this.val('');
}
$this.removeClass('disabled_text');
}).blur(function() {
var oldVal = ($this.data('defaultval')) ? $this.data('defaultval') : '';
if ($this.val() == '' && oldVal != '') {
$this.addClass('disabled_text').val(oldVal);
}
})
});
Here, give this a whirl and see if it does the trick.
<script>
$(document).ready(function(){
$default = "defaultText";
$(".form-textarea").focus(function(){
if( $(this).val() == $default ){
$(this).removeClass("defaultTextActive");
$(this).val("");
}
});
$(".form-textarea").blur(function(){
if( $(this).val() == "" ){
$(this).addClass("defaultTextActive");
$(this).val($default);
}
});
});
</script>
<input class="form-textarea" type="text" value="defaultText" />
<input class="form-textarea" type="text" value="defaultText" />
I've just tried to remove the value "srcc" from the focus function and it works fine