Getting hiddenvalue HTML property from javascript - javascript

I am trying to access the hidden HTML value (hiddenvalue) from javascript and storing it into a variable env.
HTML:
<button id="slct" hiddenfield="Forest" type="button" class="btn btn-default">Hello</button>
JS:
$('#slct').click(function (event) {
document.getElementById('env').value = $('#' + $(event.target).data('hiddenfield')).value;
});
What am I missing?

I would create a hidden html field
<input type="hidden" id="someId" value="someValue">
Getting the value of this field would look like:
var theValue = document.getElementById('someId').value;
What you want is probably this:
html:
<input type="hidden" id="env" value="">
<button class="slct" hiddenfield="Forest" type="button" class="btn btn-default">This sets Forest</button>
<button class="slct" hiddenfield="Fruit" type="button" class="btn btn-default">This sets Fruit</button>
javascript:
$('.slct').click(function(event) {
// Set value to hidden field
$('#env').val($(this).attr('hiddenfield'));
});
you can use data() instead of attr(), but the attribute needs to start with 'data-' then. E.g. data('hiddenvalue') to retrieve the value of attribute data-hiddenvalue
(see https://jsfiddle.net/2k0791hk/1/)

Related

Reset for form not working after search has been done

I am trying to reset the form to blank values in the input textboxes after the data filled in the textbox have been searched.
<form id="myForm" class="mt-5" asp-controller="Leave" asp-action="GetAllLeaves">
<div class="form group col-md-6">
<label>Employee </label>
<div class="col">
<input type="hidden" id="employeeId" name="employeeId" />
<input type="text" name="employeeName" id="employeeName" value="#ViewData["CurrentFilterE"]" />
</div>
</div>
<button type="submit" class="btn btn-outline-success">Search</button>
<button type="reset" id="reset" class="btn btn-outline-primary">Reset</button>
</form>
I have tried bunch of different javascripts but none of them work after the search has been completed. They work fine before the search button is clicked. I am aware that there are questions already asked about this here and I have tried those codes but they don't work for me.
These are the different codes that I have tried. They don't work after the search button has been hit. Even refreshing the page does not delete the data in the input boxes.
function myFunction() {
document.getElementById("myForm")[0].reset();
};
$("#reset").click(function () {
$(this).closest('form').find("input[type=text], textarea").val("");
});
document.getElementById("reset").onclick = () => {
document.getElementById("myForm").reset()
};
let inputs = document.querySelectorAll('input');
document.getElementById("reset").onclick = () => {
inputs.forEach(input => input.value ='');
}
in your post method you need to have an IactionResult return type method and then you need to pass property name to ModelState.Remove method, not the value.
Either pass the property name in string, eg. ModelState.Remove("PropertyName"); or in the newer .NET framework, you can use nameof() keyword, eg. ModelState.Remove(nameof(model.Property));
The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's reset button. If a form control (such as a reset button) has a name or id of reset it will mask the form's reset method. It does not reset other attributes in the input, such as disabled.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset.
Your default input value = "#ViewData["CurrentFilterE"]". Reset method restores a form element's default values.
This will help to reset the input:
html:
<form id="myForm">
<input type="text" name="employeeName" id="employeeName" value="test" />
<button id="reset" class="btn btn-outline-primary">Reset</button>
</form>
js:
document.getElementById("reset").onclick = function(e) {
document.getElementById("employeeName").value = "";
}
I ended up using the following
$("#reset").click(function () {
// this for normal <input> text box
$('#employeeName').attr("value", "");
//this for checkbox
document.getElementById('searchAprroved').removeAttribute('checked');
});

Javascript getElementById based on ID formed using fixed name and input number

I am trying to create ID dynamically in the HTML object and use of getElementById() in my javascript to access the HTML input value based on the button I clicked and insert into their respective HTML Select list.
My HTML snippets:
<input type="text" id="addDesc1"><input type="button" value="Add" onclick="addDescText(1)">
<input type="text" id="addDesc2"><input type="button" value="Add" onclick="addDescText(2)">
....
....
<select id="desc1">....</select>
<select id="desc2">....</select>
My javascript snippets:
function addDescText(id) {
var descText = document.getElementById("addDesc".concat(id)).value;
var selList = document.getElementById("desc".concat(id));
....
....
some javascript to add the respective description to their respective select list
....
}
concat() is an array method, you can not use that on string. Simply use + to concatenate the parameter with the string.
Demo:
function addDescText(id) {
var descText = document.getElementById("addDesc"+id).value;
var selList = document.getElementById("desc"+id);
console.log(descText);
console.log(selList);
}
<input type="text" id="addDesc1"><input type="button" value="Add" onclick="addDescText(1)">
<input type="text" id="addDesc2"><input type="button" value="Add" onclick="addDescText(2)">
<select id="desc1">....</select>
<select id="desc2">....</select>
I would encourage you to make use of the event parameter that is passed to all event handlers (on-click-event in your case) and add that handler programmatically.
A possible solution would be
HTML
<input type="text" id="text1">
<input type="button" value="Add" class="add-desc-button" data-target="1">
JS
// get all buttons
let allButtons = document.querySelectorAll('.add-desc-button')
// add event handler
for (let i=0; i<allButtons.length; i++) {
allButtons[i].addEventHandler('click', addDescriptionHandler)
}
// event handler
function addDescriptionHandler(event) {
// retrieve the number you passed in before like this
let number = event.target.getAttribute('data-target')
// ... your code here
}

ViewBag Append In Onclick Button MVC

I need to retrieve a string value from viewbag and append it with a javascript function.
<input type="button" value="Open" id="relay1Cuc1" onclick="newAJAXCommand(#ViewBag.Address1+'/io.cgi?DOA1=20');">
I load the ViewBag value from controller in this mode:
ViewBag.Address1 = ConfigurationManager.AppSettings["Cucina1Address"];
The result of which I need in onclick is as follows:
<input type="button" value="Open" id="relay1Cuc1" onclick="newAJAXCommand('192.168.0.1/io.cgi?DOA2=20');">
Thanks
You can try the following:
<input type="button" value="Open" id="relay1Cuc1" onclick="newAJAXCommand('#(ViewBag.Address1)/io.cgi?DOA2=20');">

jQuery .val('xxx') not setting value, but .attr('value', 'xxx') is?

I have a table which is populated with javascript, fetching data via ajax. I have a <tr> template which I clone and set the values within to the data retrieved via the ajax request. I'm using Twitter bootstrap's popovers, so that users can click on a cell, which pops the popover with an input/select etc prompting the user to change the cell value. The problem occurs when I am setting the value of those inputs. When I am building each row, I set the value of the input in the popover template with .val('xxx'), but when I log it/click the cell and view the popover, nothing is changed; conversely, if I set it with .attr('value', 'xxx'), it works just fine.. why would .val('xxx') not work?
Here's what the meat of it looks like..
Row template:
....
<td>
<div class="last-name popover-toggle">
<span class="vlabel">----</span>
<div class="popout">
<input type="text" name="last_name" value=""/>
<div class="popout-button-container">
<button type="button" class="btn btn-primary btn-small cancel-field">Cancel</button>
<button data-url="{{ url('edit_lead.json') }}" type="button" class="btn btn-primary btn-small save-field">Save</button>
</div>
</div>
</div>
</td>
....
Setting input value:
...
if (data['last_name']) {
$nRow.find('.last-name input[name=last_name]').val(data['last_name']);//.attr('value', data['last_name']);
$nRow.find('.last-name .vlabel').text(data['last_name']);
}
registerPopover($nRow.find('.last-name'), 'Last Name');
....
Register popover:
function registerPopover(el, title) {
var options = {
animation: false,
content: el.find('.popout').html(),
html: true,
trigger: 'manual'
};
if (typeof(title) != 'undefined') {
options['title'] = title;
}
el.popover(options);
}
Not sure what is your actual problem, question is not very obvious to me but there is a difference between attr and val. The attr method sets/change the attribute of an input/element in the source and you may see it using browser's inspection tool, on the other hand, val method sets/update the rendered property which is in the memory but it doesn't effect the original source/HTML in the browser's source code. For example, if you do something like this
HTML:
<input type = "text" name="txt" id = "txt" value = "Hello!" />
JS:
$('#txt').val('World!').clone().insertAfter($('#txt'));
And check the source code, then you'll see there is two input elements and both have value attribute Hello! but on the screen both have world!. Check this detailed answer.

Javascript not properly passing variables to Modal

I screwed something up in my code and as a result a few variables are not being transferred from my HTML document to the modal dialog properly. What I'm trying to do here is to pass the variables data-uid and data-part and data-type to a modal dialog.
<div class="span11" style="text-align:center;">
Type 1
</div>
Javascript:
<script type="text/javascript">
$(document).on("click", ".myModal", function () {
var myType = $(this).data('data-id');
$(".modal-body #type").val( myType );
var myPart = $(this).data('data-part');
$(".modal-body #part").val(myPart);
var myUID = $(this).data('data-uid');
$(".modal-body #uid").val( myUID );
$('#myModal').modal('show');
});
Modal:
<div class="form_block" style="float:right;">
<input type="hidden" name="type" id="type">
<input type="hidden" name="part" id="part">
<input type="hidden" name="uid" id="uid">
<input class="btn btn-primary" type="submit" value="{% trans 'Submit' %}">
</div>
However in my views, when I try to get one of these variables, such as
type = request.POST.get ('type')
there is nothing contained within it.
What am I doing wrong? I know it must be a small minor thing...
You can access data-x attributes in 2 ways:
$(selector).attr("data-x")
or
$(selector).data("x")
the .data method automatically adds the "data-" prefix

Categories