I have the need to create a hidden field in of my table. Later upon button click, i need to retrieve the data saved in the hidden field. Below is the code:
<td>
<input id="hdnr<%=RowNumber%>c<%=ColumnNumber%>" type="hidden" value="{{Html.HiddenFor(model => item.Key)}}" />
</td>
Where rownumber and colnumber are variables.
Later in jquery, upon button click, I am attempting to retrieve the value of the hidden field as per the code below:
var value = $('#hdnr'+i+'c'+j).val();
alert(value);
Somewhere something is wrong. Either the value is not getting saved in the html tag or it is not being retrieved correctly.
Please help.
Thanks in advance.
Your value in the input is not correct. You can put the value directly from the model.
<input id="hdnr<%=RowNumber%>c<%=ColumnNumber%>" type="hidden" value="<% model.Key %>" />
if you want to use the helper, but in this case the id will be generated automatically. :
Html.HiddenFor(model => item.Key)
You can still add custom attribute. I'm not sure of the syntax :
Html.HiddenFor(model => item.Key, { #class = "myClass" })
Related
I am trying to set value attribute in HTML when it gets changed.
I need this because I export HTML code for importing it later.
I tried the following code:
<input onchange="this.value = value" />
And would like to have the following code so value gets auto-filled after import:
<input onchange="this.value = value" value="some-value" />
There is lots of lines like above but whatever I tried value just doesn't get set.
If you want the attribute to update, you got to set the attribute.
<input onchange="this.setAttribute('value', value)" />
Alternatively, you can add this JavaScript code and omit the onchange HTML attribute:
document.addEventListener("input", e => e.target.setAttribute('value', e.target.value));
<input>
Notes:
the input event triggers with every change, not just when the value is "entered".
this works for all input elements on the page, including textarea and select elements.
I am trying to implement an ActiveCampaign form in Wordpress site. The same form will be using on a different page but I would like to know which page the contacts are coming from. So, I use a hidden filed where the value will be updated dynamically using Javascript I believe but can't figure out how to use javascript to get that. Can anyone help me with this?
value=" " would be change dynamically with the page title.
To get the title from the document via JavaScript (check out the docs for more details),
var docTitle = document.title;
To more easily access your input field from JavaScript side, I would suggest you add an ID to your input field:
<input type="hidden" name="field[46]" value="" id="title_field" />
So what you can now do is to change the value of your input field as such:
document.getElementById('title_field').value = document.title;
EDIT:
On another note, why do you need to have a hidden field specially for obtaining the title, when you would have obtained the document's title using document.title?
EDIT 2: Snippet
document.addEventListener('DOMContentLoaded', allContentLoaded, false);
function allContentLoaded() {
var docTitle = document.title;
document.getElementById('title_field').value = docTitle;
console.log(docTitle);
}
<input type="text" name="field[46]" value="" id="title_field" />
<!--For the sake of visibility, I changed the type of your input to text.-->
For page title
const titleEL = document.getElementByTagName('TITLE'); // Get the title html tag
const hiddenInputEl = document.getElementById('hidden'); // Get hidden input
hiddenInputEl.value = titelEl.textContent // Set input value to the content of the title-tag
or if you want the url.
hiddenInputEl.value = window.location.href
You could also use document.title see the documentation here.
I'm using struts 1.2 with angular js to send a jsp form, I am having problems setting the value of an input field. Here's the javascript code to set the default value of the field "city" that comes from the server into the jsp when the page loads, this is because i cannot use the html struts tag to pre-populated because it does not support the angularjs attributes i need to use in the input field:
<script>
$(function() {
var defaultCity = $("[name='city']").val();
$('#city').val(defaultCity);
});
</script>
here's the jsp section:
<body ng-controller="TypeaheadCtrl">
<form name = "LocationForm" method="POST" action="someaction.do">
<div class='container-fluid typeahead-demo' >
<div class="section">
<label class="field prepend-icon">
<input type="text" ng-model="asyncSelected" uib-typeahead="address for address in getLocation($viewValue)" id="city" class="gui-input" placeholder="City">
<span class="field-icon"><i class="fa fa-envelope"></i></span>
<html:hidden property="city"/>
</label>
</div><!-- end section -->
</div>
......
</form>
The problem with this is that once i input something in that field to override what's pre-populated, the text doesn't take, the struts action gets the original value the page loaded with only. So i tried to add the following in the jsp to see if at the time of submitting the form, the value can be changed, here's the code:
//Needed to override load value at submition time
$("[name='LocationForm']").submit(function(e) {
var cityValue= $("[name='city']").val();
$('#city').val(cityValue);
});
However it didn't work either, debugging into it would still return the original value even though i can see in the browser the new value i typed.
If on the other hand, i remove all the javascripts, then the jsp will send the newly typed value, however, it won't set the default value of the field at load time, i need both things to happen, load the default value and if i type something different in the input field, then the new value should be submitted.
Can someone please tell me what am i missing to be able to submit whatever is typed on the field on submission and not have always the default value sent over?
Thanks in advance
Resolved, apparently the problem was the binding, i put the submit function of the javascript code at the bottom of the page and it picked it up.
I have a page with multiple forms calling the same javascript function. Each form posts a picture to a given database item and has an ID that references that database item (e.g. id="form123"). When the user selects a picture, they should get a "spinner" (indicating file uploading) and then the form should submit.
Problem is, no matter which form gets an onchange event (from selecting a picture on the client), the browser always passes variables for the first form with "onchange" on the page.
function submitForm(formId, spinner) {
console.log(formId);
console.log(spinner);
setDisplay(document.getElementById(spinner), 'inline-block');
return document.forms.formId.submit();
};
function setDisplay(element, value) {
return element.style.display = value;
};
<form method="post" name="form28236" id="form28236" class="submit-image" action="/image/new" enctype="multipart/form-data">
<input type="hidden" name="on" value="28236">
<label for="image-file">Add photos</label>
<input type="file" id="image-file" name="image" onchange="submitForm('form28236', 'spinner28236')">
<div id="spinner28236" class="spinner"></div>
</form>
Console:
form28330
spinner28330
Note that the console is not logging the same form ID or spinner id that should be passed to the javascript function. The result is that the "spinner" displays for the wrong form (the first on the page) and no form actually gets submitted.
The problem with the form submit is in this line:
document.forms.formId.submit();
This syntax would work if your form was actually named "formId". However, instead you have a variable formId that holds the respective id, so you have to do it like this:
document.forms[formId].submit();
Maybe it becomes clearer when you see that your variable only substitutes the actual name. This would also work to access a specific form:
document.forms['form28236'].submit();
So the problem was that I didn't have a unique ID for the <input type="file"> and the corresponding <label for="unique-id">. I was using the <label> as a button for the input (and hiding the input). But since it wasn't a unique ID, the browser was just going with the first <input> with that ID on the page.
How do I access hidden fields in angular? I have an app, where I want to submit a form for each of items in the list. The form is simple - it has submit button and a hidden field holding the ID value. But it does not work. The value is empty.
I updated the default angular example to display the situation - the todo text is in hidden field.
http://jsfiddle.net/tomasfejfar/yFrze/
If you don't want to hardcode anything in your javascript file, you can either load it via AJAX, or do:
<input type="hidden" name="value" ng-init="model.value=1" value="1">
this way, you can keep the form functionality with JS off, and still use the hidden field in AngularJS
If you want to pass the ID from the ng-repeat to your code, you don't have to use a hidden field. Here's what I did:
For example, let's say I'm looping through a collection of movies, and when you click the "read more" link it will pass your ID to your JS code:
<ul>
<li ng-repeat="movie in movies">
{{movie.id}} {{movie.title}} read more
</li>
</ul>
Then in your JS code, you can get the ID like this:
$scope.movieDetails = function (movie) {
var movieID = movie.id;
}
In your simpler fiddle, the problem can be fixed by using ng-init or setting an initial value in the controller. The value attribute won't effect the ng-model.
http://jsfiddle.net/andytjoslin/DkMyP/2/
Also, your initial example (http://jsfiddle.net/tomasfejfar/yFrze/) works for me in its current state on Chrome 15/Windows 7.
You can do something like this.
It is a dirty trick, but it works (like most dirty tricks ;-)
You just use the form name as Your hidden field
and always give the form the id "form"
<!doctype html><html ng-app><head>
<script src="angular-1.0.1.min.js"></script>
<script>
function FormController($scope) {
$scope.processForm = function() {alert("processForm() called.");
$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("form").name;}
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
};
}
</script></head><body>
<div ng-controller="FormController">
<form name="YourHiddenValueHere" id="form">
<input type="text" ng-model="formData.foo" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
</div></body></html>
This allows You to use ONE Controller for ALL forms and send
them to ONE server script.
The script than distinguishes by the
form name (formData.foo) and knows what to do.
The hidden field names the operation in this scenario.
Voila - You have a complete application with as
many forms You want and one server script
and one FormController for all of them.
Simpler:
<input type="hidden" name="livraisonID" value="{{livraison.id}}"/>
It works!
Use ng-binding="{{employee.data}}". It will work properly.
I have to correct (improve) myself:
You can do it more elegantly:
<form>
<input type="text" ng-model="formData.foo" />
<input type="hidden" id="bar" value="YourHiddenValue" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
and then in the JavaScript controller:
$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("bar").value;}
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
So you can have as many hidden fields as you like.