In my application I have a need to keep some values hidden, for them to be later picked up by jQuery.
I have a following div for keeping map's data (after img is clicked I would like to show a map with 2 markers):
<div class="map-data">
<img src="../map.png">
</div>
In order to do that I need to store 4 hidden values (1_lat, 1_long, 2_lat, 2_long), like:
<label type="hidden" value="56.056180">
What would the right hidden element be for storing such values? Label, p or something else?
Since it seems that you will only use those values client-side, i.e. you are not going to send them back to the server, it seems wrong to me to use an input element.
The comments already have two very good advice, here expanded.
Personally I would use data attributes if I needed per-element data (data that varies per element).
<div id="sampleMap" data-lat1="0.241" data-lat2="0.56">
...
</div>
<div id="anotherSampleMap" data-lat1="0.87" data-lat2="0.283">
...
</div>
They can be accessed very easily.
function configureTheMap(map)
{
var lat1 = map.dataset.lat1;
var lat2 = map.dataset.lat2;
...
}
...
configureTheMap(document.getElementById('sampleMap'));
configureTheMap(document.getElementById('anotherSampleMap'));
You should check browser compatibility though.
If the data was global I would simply generate a JavaScript object
var coordinates_config = {lat1 : 0.241, lat2 : 0.56};
and use it accordingly
function configureTheMap(map)
{
var lat1 = coordinates_config.lat1;
var lat2 = coordinates_config.lat2;
...
}
You can generalize this method easily to be used for per-element data if data attributes are not supported by the browsers you are targeting.
In both cases, allow me to remember the importance of proper escaping when generating the markup/code.
You should probably use an input box of type hidden for this purpose:
<input id='1_lat' type="hidden" value="56.056180">
You can then update this value with $("#1_lat").val("22.0")
<input id='input_ID' type="hidden" value="whateveryouwant">
in dreamweaver you can use it as gui drag and drop from the php toolbox on the right
You can use the input type="hidden".
reference: w3schools
I suggest you always use INPUT for the hidden values.
There are a few alternatives as follow :
<input>element
HTML5 Custom Data Attributes
Custom non-visible data with data attributes
Related
I have a form with id and multiple inputs with ids as well how i get a specific input inside a form tag.
<form action="#" method="post" id="frm-location">
<input type="text" name="txt-location" id="txt-location" />
</form>
what I want is to get the txt-location from the frm-location
You want a reference to the <input> element itself?
var form = document.getElementById('frm-location'),
input = form.getElementsByTagName('input');
// or, more specifically:
var form = document.getElementById('frm-location'),
input = form['txt-location'];
// if the name didn't have a dash in it, you could write this instead:
input = form.txtLocation;
// or, even better, since the input has an ID:
var input = document.getElementById('txt-location');
https://developer.mozilla.org/en/DOM/document.getElementByID
https://developer.mozilla.org/en/DOM/element.getElementsByTagName
https://developer.mozilla.org/en/HTML/element/form
https://developer.mozilla.org/en/DOM/element
You want the value of that element?
var input = /* whatever */,
inputValue = input.value;
https://developer.mozilla.org/en/DOM/HTMLInputElement
HTML is a static type markup language. As such, by itself there are not many options for accessing and processing data. There are a few general approaches for getting data from a web page. I'll keep the explainations generic, but they will translate to whatever platform/language you are using.
Access the data server side. This is accomplished by having the user submit the form. Once submitted, the values will be available via the query parameters. Various languages will have different methods to access the parameters.
Access the data client side. You can always use javascript to hook client side events like onblur, onchange, onfocus. Once your javascript fires, you can access various form elements with dom/js methods like getElementById/getElementByName -- Which would be able to reference your form elements but Id/Name respectively.
A Hybrid approach. AJAX is a mixture of the two approaches listed above. Client side code (javascript) makes async calls to the server. the server then processes the data in some manner and sends responses back to the client.
Hope this points you in the right direction. If you would like to clarify your question a bit, I can certainly try to cater the answer more to your specific case.
<select id="selectId">
<option>Please select product ...</option>
</select>
i try on firefox and it work
$('selectId').innertHTML = '<option>Test test</option>'
but on ie , it not work, how to add a option by string option like above in ie
Use the Element Class instead:
new Element('option', {
text: 'test option'
}).inject($('selectId'));
Example: http://www.jsfiddle.net/EJH5b/
If you are going to use Mootools, then you should really use the Mootools methods rather than switch between it and vanilla Javascript. One benefit from doing this is that Mootools is already taking care of browser inconsistencies for you. Therefore, if you ignore its methods, you will have to take care of them yourself.
To access the properties of an elements the Mootools way, you can use the set and get methods on any element. The dollar ($) function returns an element so you can just chain set and get to that.
//returns selectId's HTML
var foo = $('selectId').get('html');
//Sets the HTML of selectId to <option>Test test</option>
$('selectId').set('html', '<option>Test test</option>'); //
In this case, you just need to use set.
One thing you should be aware of it is this does not add an option to a select box but instead replaces everything inside of the select box with an option. Consequently, if you wanted to use this to add multiple options to a select box, it will not work as you are resetting the HTML each time. It does not make much sense to have a select box that only has a single option so I will assume you are trying to append an option, rather than replace everything with an option. In that case, do the following:
//get the current options selectId's options
var options = $('selectId').get('html');
//Add your own option onto the end
options = options + '<option>Test test</option>';
//Set the HTML of selectId to whatever is stored in options
$('selectId').set('html', options);
I don't know if it has been asked before, couldn't find it either.
Is it possible to control the type of the input text that is rendered by an asp:TextBox? I would like to change it to <input type="date">
any suggestions or comments are welcome, thanks
There is an update for .NET framework 4 which allows you to specify the type attribute
http://support.microsoft.com/kb/2468871.
See feature 3 way down the page
Feature 3
New syntax lets you define a
TextBox control that is HTML5
compatible. For example, the following
code defines a TextBox control that is
HTML5 compatible:
<asp:TextBox runat="server" type="some-HTML5-type" />
If you don't mind subclassing, you can do this by overidding AddAttributesToRender
public class DateTextbox : System.Web.UI.WebControls.TextBox
{
protected override void AddAttributesToRender(System.Web.UI.HtmlTextWriter writer)
{
writer.AddAttribute("type", "date");
base.AddAttributesToRender(writer);
}
}
Here is how I did it... hope it helps...
Add a new item to your project of the type "JScript File", then paste this code in:
var setNewType;
if (!setNewType) {
setNewType = window.onload = function() {
var a = document.getElementsByTagName('input');
for (var i = 0; i < a.length; i++) {
if (a[i].getAttribute('xtype')) {
a[i].setAttribute('type', a[i].getAttribute('xtype'));
a[i].removeAttribute('xtype');
};
}
}
Now add this line into your aspx page after the body tag (change the file name to whatever you called it above!):
<script type="text/javascript" src="setNewType.js"></script>
Finally, add something like the following to your code behind PageLoad ( I used VB here):
aspTxtBxId.Attributes("xtype") = "tel" ' or whatever you want it to be
The important part above is the Attributes.("xtype"), as it places the attribute XTYPE in the rendered html for the "textbox", which the javascript then finds and uses to replace the original "type" attribute.
Good Luck!
FJF
I know this question is old, but I was having the same issue in a Web Forms application. You need to use TextMode
While the documentation states that
Use the TextMode property to specify how a TextBox control is displayed. Three common options are single-line, multiline, or password text box.
You can also use html5, date, time, number, etc built in Visual Studio 2012/2013.
https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.textmode(v=vs.110).aspx
I went the route of building my own set of html5 inputs by building custom controls. I get the custom keyboards on iPad and iPhone plus the postback coding of true asp.net controls. It worked for my inhouse project, so I decided to license the whole suite to save other people the time and trouble of doing it from scratch.
Hope this helps!
Actually there is no easy way to override the type attribute in standart asp:TextBox.
You can simly use an input element
Here is an example
<input type="date" id="Input1" runat="server" />
Let me know if it helps...
Can I replace the maxlength attribute with something in CSS?
<input type='text' id="phone_extension" maxlength="4" />
No.
maxlength is for behavior.
CSS is for styling.
That is why.
No. This needs to be done in the HTML. You could set the value with Javascript if you need to though.
You can use jQuery like:
$("input").attr("maxlength", 4)
Here is a demo: http://jsfiddle.net/TmsXG/13/
I don't think you can, and CSS is supposed to describe how the page looks not what it does, so even if you could, it's not really how you should be using it.
Perhaps you should think about using JQuery to apply common functionality to your form components?
Not with CSS, no.
Not with CSS, but you can emulate and extend / customize the desired behavior with JavaScript.
As others have answered, there is no current way to add maxlength directly to a CSS class.
However, this creative solution can achieve what you are looking for.
I have the jQuery in a file named maxLengths.js which I reference in site (site.master for ASP)
run the snippet to see it in action, works well.
jquery, css, html:
$(function () {
$(".maxLenAddress1").keypress(function (event) {
if ($(this).val().length == 5) { /* obv 5 is too small for an address field, just want to use as an example though */
return false;
} else {
return true;
}
});
});
.maxLenAddress1{} /* this is here mostly for intellisense usage, but can be altered if you like */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class="maxLenAddress1" />
The advantage of using this: if it is decided the max length for this type of field needs to be pushed out or in across your entire application you can change it in one spot. Comes in handy for field lengths for things like customer codes, full name fields, email fields, any field common across your application.
Use $("input").attr("maxlength", 4)
if you're using jQuery version < 1.6
and $("input").prop("maxLength", 4)
if you are using jQuery version 1.6+.
I want to store some additional data on an html page and on demand by the client use this data to show different things using JS. how should i store this data? in Invisible divs, or something else?
is there some standard way?
I'd argue that if you're using JS to display it, you should store it in some sort of JS data structure (depending on what you want to do). If you just want to swap one element for another though, invisible [insert type of element here] can work well too.
I don't think there is a standard way; I would store them in JavaScript source code.
One of:
Hidden input fields (if you want to submit it back to the server); or
Hidden elements on the page (hidden by CSS).
Each has applications.
If you use (1) to, say, identify something about the form submission you should never rely on it on the server (like anything that comes from the client). (2) is most useful for things like "rich" tool tips, dialog boxes and other content that isn't normally visible on the page. Usually the content is either made visible or cloned as appropriate, possibly being modified in the process.
If I need to put some information in the html that will be used by the javascript then I use
<input id="someuniqueid" type="hidden" value="..." />
Invisible divs is generally the way to go. If you know what needs to be shown first, you can improve user experience by only loading that initially, then using an AJAX call to load the remaining elements on the page.
You need to store any sort of data to be structured as HTML in an HTML structure. I would say to properly build out the data or content you intend to display as proper HTML showing on the page. Ensure that everything is complete, semantic, and accessible. Then ensure that the CSS presents the data properly. When you are finished add an inline style of "display:none;" to the top container you wish to have dynamically appear. That inline style can be read by text readers so they will not read it until the display style proper upon the element changes.
Then use JavaScript to change the style of the container when you are ready:
var blockit = function () {
var container = document.getElementById("containerid");
container.style.display = "block";
};
For small amounts of additional data you can use HTML5 "data-*" attribute
<div id="mydiv" data-rowindex="45">
then access theese fields with jQuery data methods
$("#mydiv").data("rowindex")
or select item by attribute value
$('div[data-rowindex="45"]')
attach additional data to element
$( "body" ).data( "bar", { myType: "test", count: 40 } );