How to get the name of input filed in jquery - javascript

I have a multiple-input field and an onchange function. When we change the input field from the event it triggered, I want to get the name or id of the input field (to distinguish it from other input fields). Many thanks.

$('input[type="text"]').on('change', function(){
// name is a unique attribute
$(this).attr("name"));
});
<input type="text" name="text1" />
<input type="text" name="text2" />
<input type="text" name="text3" />

Related

Trigger required attribute for form fields based on conditions

If radio one (#choice_one) is checked how to make input field one (#field_one) required and if radio two (#choice_two) is checked how to make input form two (#field_two) is required and remove required from input field_one using JS?
<input type="radio" id="choice_one">
<input type="text" class="form-control" id="field_one" name="item_name" value="">
<input type="radio" id="choice_two">
<input type="text" class="form-control" id="field_two" name="item_name" value="">
You can use clickevent :
$("#choice_one").on("click",function(){
var checked = $(this).prop("checked");
$("#field_one").prop("required",checked);
});
//and same thing with #choice_two
Or using a same function :
$("#choice_one,#choice_two").on("click",function(){
var checked = $(this).prop("checked");
$(this).next().prop("required",checked);
});

Perfom action of "tab" key onkeyup()

I have 4 text fields. When i enter a value in first text box cursor should move to next text box. That is onkeyup() i need to perform action of tab key.
Is there any javascript or jquery for that
You can try this
HTML
<input type="text" class="focus" />
<input type="text" class="focus" />
<input type="text" class="focus" />
<input type="text" class="focus" />
JS
$(".focus").keyup(function(){
if($(this).val() != "")
{
$(this).next(".focus").focus();
}
});

set the value of the input field as value of the hidden field using JS

This question seem to be very silly! but I am looking for the best answer,
I have a input field and a hidden field. How to set the value of the input field as value of the hidden field?
<input class="class1" id="id1" name="name1" value="06/30/2015" />
<input type="hidden" name="hidden" id="hidden" value="I want the value of above field">
Please try this
$(document).ready(function(){
$("#id1").change(function(){
$("#id1").val($("#hidden").val());
});
});
DEMO
You can use a change event handler to update the value of hidden field
//set the initial value
hidden.value = id1.value;
<input class="class1" id="id1" name="name1" value="06/30/2015" onchange="window.hidden.value=this.value" />
<input type=hidden name="hidden" id="hidden" value="I want the value of above field">
You can this by below why, i used onblur for set values from input to hidden. same why you can use different method for this.
Or if you strictly want to use javascript then add one onblur function and do code as i do with callthis() function.
$("#id1").blur(function(){
$("#hidden").val($(this).val())
console.log($("#hidden").val());
});
function callthis(inputobj)
{
document.getElementById("hidden").value = inputobj.value;
console.log(document.getElementById("hidden").value)
}
<input class="class1" id="id1" name="name1" onblur="callthis(this)" value="06/30/2015" />
<input type="hidden" name="hidden" id="hidden" value="I want the value of above field">

How to restore default value of text field in jQuery?

I have a page with a table having some <input type="text"> fields. I have a button next to each field. I allow user to change the text of input fields. But when the user click the button next to input field, the corresponding input field's value need to be restored to default (previous) value.
I tried to make an array with index as input field's name. This array can store default values, and can be retrieved easily and restored to their corresponding fields. I tried to do this using keyup(function(), but I know that this triggers each time key is pressed.
Here is my HTML;
<input class="zx" type="text" name="qwer" value="Google" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Yahoo" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Bing" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Ask" /><button class="cncl">X</button><br />
Here is the fiddle.
How can I restore the default values to the fields?
You can use the defaultValue property of the input element
$('.cncl').click(function(){
$(this).prev().val(function(){
return this.defaultValue;
})
})
Demo: Fiddle
Try this, use .attr('value') to get the default value:
$('.cncl').on('click', function () {
$(this).prev().val($(this).prev().attr('value'));
});
DEMO
I have done something similair in the past. I stored the default value in an attribute of the html-tag itself.
<input class="zx" type="text" name="qwer" default-value="Google" value="Google" />
When you like to restore it you can execute
$('selector').val($('selector').attr('default-value'));

Replicating the values to another textbox

I have a question regarding JSP. I have two textboxes. When I type the value in the first text box, it should replicate automatically in the second text box.
<input type="text"
class="formtext"
name="List.lItemList<c:out value='[${status.index}]'/>.value1"
value="0.0"
onChange="validateOnChange(this,'desc','minvalue','maxValue','float')">
<input type="text"
class="formtext"
name="List.clItemList<c:out value='[${status.index}]'/>.value2"
value="0.0"
onChange="validateOnChange(this,'desc','minvalue','maxvalue','float')">
Assuming that the first box has ID input1 and the second input2 (so you'll have to add those IDs), you can do it like this:
document.getElementById('input1').onkeyup = function () {
document.getElementById('input2').value = this.value;
};
You can do this using JavaScript. Attach an keyup event handler on the first textbox which should copy its value to the second one.
<input type="text" id="t1" onkeyup="document.getElementById('t2').value=this.value" />
<input type="text" id="t2" />

Categories

Resources