#Html.ValidationMessageFor(m => m.name, "", new { id = "valName" })
I need to assign value for "valName" using JavaScript or jQuery.
Is there any way to assign value to the id?
It is not clear exactly what you want to do?
If you want to change the id of the validation message DOM element:
document.getElementById('valName').id = 'newId';
// or via jQuery
$('#valName').attr('id', 'newId');
If you want to change the text of the validation message DOM element:
document.getElementById('valName').innerHTML = 'new content';
// or via jQuery
$('#valName').html('new content');
This should work:
$(document).ready(function () {
$('[class^=field-validation]').each(function () {
var id = "val" + $(this).attr("data-valmsg-for");
$(this).attr("id", id);
});
});
It will set the id to the same as the form field but prefixed with "val".
Related
I'm grabbing the value of an input and setting this as a variable. How can I then use this as part of the selector name. Here's a demo of where I've got too and what I'm trying to achieve
// grab the id
var rowId = $('input[name="row-id"]').val();
// Use the variable as part of selector
$('body').on("click", ".upload-form-'rowId'", function(event) {
// do stuff here
})
The output of the selector would be like .upload-form-99 for example
Why not just do this:
// grab the id
var rowId = $('input[name="row-id"]').val();
rowId = '.upload-form-' + rowId;
// Use the variable as part of selector
$('body').on("click", rowId, function(event) {
// do stuff here
})
Any particular reason that this wouldn't work?
$('body').on("click", ".upload-form-" + rowId, function...
Here's a more elegant solution if you happen to be using ES6:
// grab the id
let rowId = $('input[name="row-id"]').val();
// Use the variable as part of selector
$('body').on("click", `.upload-form-${rowId}`, (event) => {
// do stuff here
})
I have a JavaScript function that sets a ViewBag value whenever you mouse up on a radio checkbox. I'm trying to submit the ViewBag in a hidden field on my form.
My JavaScript function is successfully getting the id. But I'm unable to get that value into my hidden form. I think my first problem is i'm using a ViewBag when I should be using a different type. But this is where I'm hoping to get some assistance. How can I set a value in a JavaScript and get that in a #Html.HiddenFor()?
$(document).ready(function () {
$('body').on('mouseup', 'td', function (e) {
e.preventDefault();
var id = $(this).attr("id");
#Html.Raw(Json.Encode(ViewBag.id)) = id;
});
});
#Html.HiddenFor(model => model.id, new {id = "id", Value = #Html.Raw(Json.Encode(ViewBag.id)) })
***UPDATE WORKING SOLUTION BELOW****
I'm marking #Ali Soltani solution as the correct answer. His answer lead me in the right direction. Here is my full working code:
$(document).ready(function () {
$('body').on('mouseup', 'td', function (e) {
e.preventDefault();
var id = parseInt($(this).attr("id"));
$("#Id").val(id);
});
});
Form:
#Html.HiddenFor(model => model.id, new { id = "Id" })
You can set the value attribute of a hidden input tag by selecting it using the property name and using the jquery val() method.
$("#id").val(id); // id in $("#id")
You should use $("#id") because you used model.id. Second id is var id = $(this).attr("id"); and just you need razor code like this if id in model.id is unique:
#Html.HiddenFor(model => model.id)
I have this code right here for getting the id of a clicked input element:
jQuery(event.target.id).change(function(){
if(event.target.id===null)
{
}
else
{
alert(event.target.id);
}
});
for example: i have a dynamically generated textbox. Upon clicking it using the code above, it returns the id.
However when I click a dropdown list input, it returns null, but when inspecting the element, the id is there. It still goes to the else block.
I am using this event for fields that were dynamically generated.
What might be wrong?
Sorry if it seems noobish I am new on jQuery.
On select elements you need to listen to the change event, not the click event:
$('select').change(function() {
var selectId = $(this).attr('id');
var optionId = $(this).find(":selected").attr('id');
alert('select id:' + selectId);
alert('option id: ' + optionId);
});
UPDATE
Usually in a select element you would be looking for the option value. This is how you would do that:
$('#selectId').change(function() {
var optionValue = $(this).find(":selected").val()
alert(optionValue);
});
Try access original target
var originalElement = event.srcElement || event.originalTarget;
console.log(originalElement.id)
I have an input type="tel" with id="#enter" and I want to add append values from button clicks. I have done this:
$("#one").click(function () {
$("#myInput").val("1");
});
$("#two").click(function () {
$("#myInput").val("2");
});
So every time a button is pressed from #id 1-9 it enters the corresponding numeric value.
However this doesn't append the value in the input field type just replaces the existing value with the value of the button clicked. How can it append the values?
This is the JSFiddle
You can use something like this to append values:
$("#myInput").val(function() {
return this.value + '1';
});
You can also improve your approach by giving each number button a class and register the same event listener for all buttons. For example:
$(".dial").click(function () {
var number = $(this).data('number');
$("#myInput").val(function() {
return this.value + number;
});
});
Where the button would be defined as
<button type="button" class="btn btn-primary btn-xs1 dial" data-number="4"> <b>GHI<br>4
as so on.
Demo: http://jsfiddle.net/8R9xL/2/
Try this
$("#one").click(function(){
$("#myInput").val($("#myInput").val()+"1");
});
Of course it doesn't append the value, you've done nothing to make it append the value.
To append the value you have to...append the value. Get the current value, add (append) something to it, and then set that.
$("#one").click(function(){
var input = $("#myInput");
input.val(input.val() + "1");
});
$("#two").click(function(){
var input = $("#myInput")
input.val(input.val() + "2");
});
$("#one").click(function(){
var input = $("#myInput");
input.val(parseInt(input.val() + 1));
});
$("#two").click(function(){
var input = $("#myInput")
input.val(parseInt(input.val() + 2));
});
I have done something like this.
$('.pin-number').on('click', (e) => {
$('#pin').val($('#pin').val() + e.target.innerText)
})
Where .pin-number is a set of divs containing a number from 0 to 9 (this is the reason that I use e.target.innerText instead of e.target.value), and #pin is the input where the values are inserted.
Hope this helps!
If I have id's of the form: t_* where * could be any text, how do I capture the click event of these id's and be able to store the value of * into a variable for my use?
Use the starts with selector ^= like this:
$('element[id^="t_"]').click(function(){
alert($(this).attr('id'));
});
Where element could be any element eg a div, input or whatever you specify or you may even leave that out:
$('[id^="t_"]').click(function(){
alert($(this).attr('id'));
});
Update:
$('[id^="t_"]').click(function(){
var arr = $(this).attr('id').split('_');
alert(arr[1]);
});
More Info:
http://api.jquery.com/attribute-starts-with-selector/
var CurrentID = $(this).attr('id');
var CurrentName = CurrentID.replace("t_", "");
That should help with the repalce.
Try this:
// handle the click event of all elements whose id attribute begins with "t_"
$("[id^='t_']").click(function()
{
var id = $(this).attr("id");
// handle the click event here
});
$("[id^='t_']").click(function()
{
var idEnding = $(this).attr("id");
idEnding.replace(/\t_/,'');
});
Using the click event capture the ID that begins with t_, then replace that with nothing giving a capture the end of the ID value.