appending a piece of code to input field jquery - javascript

i want to add an element to the input field if the condition meets: i tried using below but nothing seems happening, i tried with the following code which to me seems to a good one but something is missing and what i am so lost
$("#anc").load('get.cfm?new=' + Math.random()).appendTo('#anc');
I tried getting it to work but this is somewhat not adding the attribute to the input field...
the get.cfm has the value of
disabled="false"
what can i pass to fix this issue

To add attribute, use .attr(attrName, attrValue)
.$("#anc").load("...", function(response) {
//if the response is "disabled='true'";
var keyValue = response.split("=");
$('#anc').attr(keyValue[0],keyValue[1])
}

Related

How to focus first input?

I have a ASP.NET MVC application and I want to focus the first field in error. On submit, if the last field has error and user tries to submit the form, the focus is going to the last field in error instead of the first field. I tried multiple including the below:
$().ready(function() {
$("#Form").submit(function() {
$('.input-validation-error').focus();
$(".input-validation-error").each(function() {
$(this).focus();
});
});
});
Is there any solution where the user can always go to the first field in error.
No need to use each here and loop over all errors. You can just set the focus to first element with error class input-validation-error like:
$('.input-validation-error:first').focus();
#Palash has a good answer but I will explain why your code does not work so you understand it.
You need to leave the loop after the focus is set to the first item by returning false like below:
$(".input-validation-error").each(function () {
$(this).focus();
return false;
});
When you return false, you are instructing jQuery to stop processing the rest of the elements.Otherwise, it will keep looping and you will end up focusing the last item.
You can use eq method.
eq method reduces the set of matched elements to the one at the
specified index.
$('.input-validation-error').eq(0).focus();

Setting Default value of input textbox in Jquery EasyUI dialog

I have googled and looked throughout the whole documentation and could not figure out why value of input text is not shown. I am using FireFox latest version and below is what I have done so far.
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
In regular html or php page we can give value="300" to set default value, but in EasyUI, it is not possible. So I was thinking possible alternative like below:
<script>
var m = '300';
document.getElementById("d_amount").value.innerHTML=m;
</script>
Nothing is shown and I am not getting any error. Any EasyUI expert, please help me.
NOTE: this input field is inside the dialog
To set the default value, you have to set the value attribute. However, that does not necessarily update the value property so you need to do both. So given:
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
set the default value by setting the value attribute:
var input = document.getElementById('d_amount')
input.setAttribute('value', 'whatever');
now set the value property:
input.value = 'whatever';
Note that you can also get a reference to the input as a member of the form that it's in:
var input = document.formName.d_amount;
Use the below code
$("#d_amount").numberbox({
min:0,
precision:2,
value:300
})
Reference : numberbox
Or try this one
$("#d_amount").textbox({
buttonText:'Search',
iconCls:'icon-man',
iconAlign:'left',
value:"300"
});
Reference : textbox
use this code to set the value inside $(document).ready(function(){}
....
$("#d_amount").numberbox('setValue','300');
....
if still not working, just try to set name and id as the same name and id
<input name="d_amount" class="easyui-validatebox" id="d_amount" value="">
I am always working with this numberbox and it's working
I have found your thread because I am also having the same issue and I have just across this thing today. Your case is a little bit different (maybe) then my case because you want to set the default which can be changed by the user later (I believe). In my case, the value will be fixed (will not be changed) so I have applied a trick and hopefully it can give some ideas to you and others who are having same issue. Please refer below:
In first page says pageA.php:
<select name="myThing" id="myThing">
<option value="Your Desired Value" selected="selected">Something</option>
</select>
Still in the same page, under your $(document).ready( function(){ put the code below:
$("#myThing").val($("#myThing option:first").val());
That code is to make sure your desired value appears at the first row in the drop down. I say this because in EasyUI it seems when I use drop down and put single option, the first row will be blank and the second row will hold your input. So that is the trick to ensure your desired value appears on top and selected. Put the select under the form then during normal post, you will be able to get the value of it in the posted page. Enjoy. Thank you.
Suggestion: if your value can be changed by user, use placeholder and you can hide the default value from user using my trick.
try this
document.getElementById("d_amount").value=m;
you don't need innerHTML
I found the answer here. The trick is to use the code inside $(function(){});
$(function(){
var m=300;
$('#d_amount').textbox('setValue', m);
});
I too had this problem and it was solved using the following
First my input was in the form like this:
<input name="hostFirstName" id="hostFirstName" class="easyui-textbox">
I needed to load content from the db then pre-fill the input with this data so the user could edit the content.
I used the following javascript.
NOTE: i didn't hide this away inside an anonymous function() and it is working. I tested this first from the F12 console to make sure it was working before changing my code.
//populate with existing data
$('#hostFirstName').textbox('setValue', "Is this working?");
The docs on jeasyui.com don't provide this example when you look at the textbox api reference. But they do provide an example when looking at the combobox (http://www.jeasyui.com/documentation/index.php#) the combobox and textbox use the same setValue method.
Hopefully this works for you like it does for me.

Assign value from one input to another input using jQuery...not working

I have a couple of radios (#LocalDelivery and #StandardShip) related to a couple text inputs (#LocalDate and #datepicker). Then, off in another section is another text input with class productAttributeValue.
If LocalDelivery is chosen/checked, I need its input, #LocalDate to get the value and name from the input with class productAttributeValue. Or, if #StandardShip is chosen/checked I need its input, #datepicker, to get the value and name from the input with class productAttributeValue.
I have tried various combinations of the following:
if (!$('#LocalDelivery').is(":checked")) {
$('#datepicker').val("");
$('#LocalDate').val($('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').val());
$('#LocalDate').attr('name',
$('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').attr('name'));
}
if (!$('#StandardShip').is(":checked")) {
$('#LocalDate').val("");
$('#datepicker').val($('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').val());
$('#datepicker').attr('name',
$('.productAttributeConfigurableEntryText div.productAttributeValue input[type="text"]').attr('name'));
}
Per my other thread, Issue with jQuery 'else', this method isn't working. According to the answers given there, this is the wrong method entirely but I'm not sure how else to go about this.
Here is a fiddle:
This is my glorious Fiddle
EDIT:
Per beautifulcoder's comment I have added a click function to both radios. While it would be preferable for the inputs to populate their value without clicking first, this is the first solution I've had that works. Created a fiddle here, hope it helps someone else:
My amazing working Fiddle

set the value for a checkbox using .prop

So, I have in my script the following code to assign the value of several text boxes that is working ok.
However, when I attempt to assign the value of a checkbox, nothing seems to be set for the checkbox. I have tried using .prop and .attr, so I am thinking my entire approach is wrong.
Some help would be greatly appreciated.
Here is my unchanged code. I am trying to assign the value of the "#id_language_detail_multiple_languages":
function setLanguageDetailsFormValues() {
$('#id_language_detail_display_type').val('{{ language_details.language_detail_display_type }}');
$('#id_language_detail_multiple_languages').val('{{ language_details.language_detail_multiple_languages }}');
....
If you want to assign the "value" of your text boxe, you will add to do something like this:
$('#YourId').attr('value', 'setYourValueHere')
If you want to have the value of your text box, just do:
var myValue = $('#YourId').attr('value')
That is the same thing for '.prop' !
If it wasn't what you wanted, be a little more specific or give us a http://jsfiddle.net/ :-)
By the way, you can also do:
if you go 1 checkbox:
$("input[type='checkbox']").val('yourValue');
Or just:
document.getElementById('yourCheckbox').value = 'YourValue';
If the value isn't set, it will return undefined, so be aware and check if it is !
Hi You can do it like following.Properties for checkboxes are different from textboxes.
$("#CheckboxID").prop("checked","True");
if you want to read the checkbox value use like following
$("#CheckboxID").prop("checked");
Thanks.

How to set the value of a text input with MooTools

I have just begun playing with MooTools, and I don't understand why the following happens:
var input = new Element('input');
input.set('type','text');
input.set('value','this is the value');
console.log(input);
results in: <input type=​"text">​, so setting the value hasn't worked.
But if I do this:
var input = new Element('input');
input.set('type','text');
input.set('someValue','this is the value');
console.log(input);
I get the expected result of <input type=​"text" somevalue=​"this is the value">​.
Am I overlooking something, is what I am trying to do not allowed, is this a bug in Chrome (11.0.696.71, OS X) or am I doing something else wrong?
Update: thanks for your answer! You are right, the value is actually being set; console.log(input.get('value')) gives back the proper value and I can see the value in the input field when I append the input object to the DOM.
Apparently, the value setting is just not reflected as an attribute of the HTML element, but only stored internally.
Are you sure the value isn't being set?
What do you get when you call: input.get('value')
I tested this (in firefox) and even though the console just logs <input type=​"text"> the value does in fact get set. Try adding the element to the page and you'll see it :)
I've had a similar problem with this 'red herring' which I've since solved, and thought I'd share.
I'm trying to make certain cells of a table row editable when the user clicks on the row:
var cells = this.getElements("td");
for (var ix=0;ix<cells.length; ix++){
if (cells[ix].hasClass("edType_text")){
var celltext = cells[ix].get("text");
cells[ix].set('text','');
var editTag = new Element ('input',{type:'text','value':celltext});
editTag.inject(cells[ix]);
}
}
This seemed to work OK but when I clicked on the cell I couldn't edit it. Firebug and Chrome tools showed the added input tag as
<input type='text'>
instead of the expected:
<input type='text' value='xxxxxx' />
However this is perfectly normal as commented on above.
Spotted the 'deliberate' error ?
Of course when I clicked on the input field it triggered the mouse event on the row again, thus preventing me getting at the input!!!! :-{
To avoid this just add this line of code at the end of the if block:
editTag.addEvent("mousedown",function(event){event.stopPropagation();});

Categories