How can I update the text fields with HTML? I have a page with some textfields, and I need to update these fields at a specific time. I used the value property to display the default values, but how can I change the values later?
Thank you
I am forcing a JavaScript answer, since there is no way it can be done with only HTML.
Snippet:
<input type="text" id="textboxid" />
<script type="text/javascript">
var txtBox = document.getElementById("textboxid");
txtBox.value = "new value";
</script>
You need to use javascript in order to achieve this. I recommend jQuery, as it prevents most cross-browser "quirks" and "gotchas". Specifically, you're looking for http://api.jquery.com/html/ or http://api.jquery.com/val/.
JSFiddle: http://jsfiddle.net/dEUH5/
First of all, at the very least, HTML is used for Mark-Up, CSS is for styling, and JavaScript is for functionality. I suggest that if you want to add functionality and interactivity to your website, you look up how to use JavaScript. This will allow you to add the functionality you wish for your textbox, as you wished.
You can't do this with HTML, you could with PHP.
I'm sure someone will type out the code, but go to: http://uk.php.net/.
This question is way to broad too.
Related
Is it possible in CSS (only) to hide some text of a string?
I know there these attribute-selectores like:
[att^=val] – the “begins with” selector
But for instance, having this:
<div class="some_random_text">
This is a default text
</div>
I want to (display: none) only a certain substring - in thise case "default". I know how to do it with JS, but I'm looking for a CSS-solution only (if there is any).
Even though I guess it isn't possible to manipulate the DOM via CSS, which would be neccessary to have something like:
this is a <span class="hideThis">default</span> text
why would you need this and where does it occur?
For instance in a CMS (in my case OXID). You can add a title to a specific payment-method. Here I have
paypal
paypal (provider1)
paypal (another dude)
I want to have only PayPal visible in the frontend. The other PayPal-Paymenttypes have to remain however. Naming them all PayPal just leads to confusion.
there is the content-property. Is it somehow managable with that?
Again, no JS :-)
To answer your question - no, it's not possible using only CSS.
You can;
Edit the HTML as you suggested
this is a <.span class="hideThis">default<.span > text
Use JS to alter the elements innerHTML value
Use a pre-processing language (like PHP or ASP, whatever you are able to use) to reduce the string to a substring.
Sorry if that's not the answer you wanted, but those are your options.
It it not possible. The only thing that can actually modify the inside text is the content property. Assuming something changes in your dom, you can have rules like:
.some_random_text:after {
content: "This is a text";
}
other_select .some_random_text:after {
content: "This is a default text";
}
But sincerely, I don't get the point, as JS and consors are made for that.
It's not possible, here's the documentation on selectors: https://www.w3.org/TR/css3-selectors/#selectors
I just had a look at html of my twitter page as part of learning HTML. At the end of the page I can see a lot of state as the value of a hidden input tag (the value appears to be in json form).
I see no obvious form associated with this, and it doesn't appear in the html request.
I wonder if anyone might be able to guess how/why these inputs and their values might be used.
</body>
</html>
<input type="hidden" id="init-data" class="json-data" value="
{"scribeMetrics":0,"environment":"production","wtfOptions":
{"dismissable":true,"connections":true,"pc":true,"limit":3,"
disabled":false,"display_location":"wtf-component"}
........ and so on.
If you look at this javascript file, you see that the init-data element is used
var a=$("#init-data").val(),
b=JSON.parse(a),
c=$.makeArray(arguments);
b.moreCSSBundle?using("css!"+b.moreCSSBundle,d):d()}if($("html").hasClass("debug"))
//and so on
If you want to know, why they used a hidden field and not standard javascript variables, you have to ask the guys responsible for this at twitter themselves ;). I see no obvious reason and the minified code doesn't make it easier to understand what's going on.
I have error messages in anchor tag. When you click on it, it should focus/take the cursor to the respective form field. It works in IE but does not work in FF or Chrome. Am I doing something wrong here?
I have a sample in jsfiddle. http://jsfiddle.net/JaaTK/
I don't want to use JavaScript to achieve this.
EDIT I will have to go JS route as there doesn't seem to be a better way.
If you don't want use javascript - you have to use “label” tag instead “anchor”, i.e. instead of:
Go to the first name
you can use:
<label for="firstName">Go to the first name</label>
Why not
Go to first name
I think is the only way.
"I don't want to use JavaScript to achieve this."
Then you are out of luck. Applying focus to an element is JavaScript's job.
UPDATE
So, based on your comment, I think you are asking the wrong question. I think you want to ask:
"Is there a way to make my error messages more accessible?"
The best way to handle that would be for your error messages to link to the form field's LABEL rather than apply auto-focus to the field. At least, that'd be the best way to handle things sans JavaScript.
Error Message
<label for="field1" id="fieldlabel1">Label</label><input id="field1" />
I want to be able to just click inside a text field, so that it highlights all the text inside it (and possibly also copies it). Although, I'm satisfied with just getting it highlighted if that's possible with HTML only. Many people are using NoScript and such nowadays, so I'm trying to stay away from JavaScript etc.
TinyPic is one example which uses this little 'feature'.
Thanks for your help.
I'm pretty sure you need to use some javascript; no matter how trivial it might be.
For example; this does what you're asking:
<input type="text" value="Click Me to Select Text" onclick="this.select()">
in the head section add this script:
<script language="JavaScript">
function highlight(field) {
field.focus();
field.select();}</script>
And then for each field that you want to select all the text in when clicked, add this:
onClick='highlight(this);
I hope it works, try it by the way
I have an HTML form with radio buttons, check boxes, text fields and drop down lists.
Since I want user to fill everything in my form, none of the radio buttons and check boxes are checked and the text fields are empty.
I would like to write a CSS file that will fill the form with answers (I don't want to change my HTML file).
Is this possible ?
I would appreciate an example or any other idea ?
Thanks !
No, it isn't possible. CSS is for style, not markup, and changing the contents of an input field requires modification of the markup.
It sounds like you might want to consider JavaScript, which can be used to alter the contents of any element, including form elements.
Javascript is your best bet. If you want to fill in -sample- answers, however, like 'First Name' in the text area what would be labelled "First Name: " you can do something like <input type='text' value='First Name' name='emailForm'> and the value attribute will be filled in when the page loads.
You can use jQuery to accomplish what you want quite easily, using CSS-style syntax.
Here's a sample form:
<form ...>
<input name="firstName" />
<input name="lastName" />
</form>
And corresponding jQuery/JavaScript:
$(function () {
$("input[name=firstName]").val("John");
$("input[name=lastName]").val("Doe");
});
Should be easy enough to extend to a larger and more complex form. You can easily use classes or ids on the elements and in the jQuery selectors, as well.
CSS is for designing and styling the webpage. Although its capabilities have been exploited to pull of many tricks it is not a fix-all solution. What you need to do is pull the data you need to fill and put it in your fields.
You can do this two ways:
Use a server side language like PHP/ASP.Net to pre-fill this information.
Use Javascript/Jquery/MooTools or some other framework to fill it on the client-side, picking up the data from the server.
If the information is static then it is very easy, because you can just put this info as a part of the HTML content itself.
If this answer doesn't work for you, add more information to your question.