Develop Reference

Limit length of characters in htm in javascript

I have question. I used editable plugin in octobercms project. I can't find this in documentation. How can I limit the length of the characters in my content in html. If there is no any way so how can I do this with JavaScript? I tried to use code like this but I am low in JavaScript.
var x = document.getElementById('gallery');
var tekst= x.outerText;
console.log(tekst);
console.log(x.outerText.length);
if (x.outerText.length > 150) {
var trimmedString = tekst.substring(0, 150);
document.getElementById('gallery').outerText = trimmedString;
}
But now this text not use dic and classes and editable. What can I do to fix this?

Maybe you should do it in the HTML instead.
<form action="demo_form.asp">
Username: <input type="text" name="usrname" maxlength="10"><br>
<input type="submit" value="Submit">
</form>
http://www.w3schools.com/tags/att_input_maxlength.asp

you can just put maxlength="10" for maxlength it will stop the cursor for input after 10 characters.

object HTMLInputElement error while entering a integer value to label in javascript

script code
intext = document.getElementById("intext");
totalin = document.getElementById("totalin");
function myFunction()
{
var x = document.getElementById("totalin");
x.innerHTML = intext.toString();
}
in the above code am getting object HTMLInputElement in the label with "totalin" id and textbox of number type with id = intext
i am new to javascript and i saw many other answers on similar problems but either cudn't understand the answers or they didn't worked .
thanks in advance for help.
part of Html code is as follows if required
<label for="text">input the income in numericals</label>
<input type="number" name="text" id="intext">
Submit
<label id="totalin" for="totalin">Label:</label>
i would really appreciate any help i am really in need of solution.

You need to get the value from the element:
x.innerHTML = intext.value;
You're also missing a quote close:
<input type="number" name="text id="intext">
^ RIGHT THERE

User input from text box and radio buttons reiterated in an alert, showing undefined? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Basically what I'm attempting to do is a mad lib story with user input. I've gotten to the stage where I need to show an alert with each input, alert("hello "+name+". You've chosen "+userinput+", etc)
My alert is showing up, but the information is not collecting from the textboxes/radio buttons. It is simply showing undefined.
This is what I have so far..
The purpose of this step is to add the code to the new function so that it will create our story.
Add JavaScript statements to your function to collect all the information from each form element.
Display the user’s information in one alert function.
For Example: ”Hello [name], your story values are [title], [vegetable], [adjective], [number #1], [number #2]”
function beginstory() {
alert("welcome "+name+". you have chosen: "+title+" "+hobby+" "+adjective+" "+number1+" ");
var name=(document.getElementById('username').value);
var title = document.getElementById("storytitle").value;
var hobby = document.getElementById("hobby").value;
var adjective = document.getElementById("adjective").value;
var number1 = document.getElementById("number1").value;
var number2 = document.getElementById("number2").value;
var trex = document.getElementById("trex").value;
var steg = document.getElementById("steg").value;
var diplod = document.getElementById("diplod").value;
var crazy = document.getElementById("crazy").value;
var charming = document.getElementById("charming").value;
var curious = document.getElementById("curious").value;
var he = document.getElementById("he").value;
var she = document.getElementById("she").value;
var ze = document.getElementById("ze").value;
var jurassic = document.getElementById("jurassic").value;
var colonial = document.getElementById("colonial").value;
var twenty = document.getElementById("twenty").value;}
<form id="story" action="">
What is your name? <input type="text" name="storyelements" id="username"><br>
What is the title of your story? <input type="text" name="storyelements" id="storytitle"><br>
Name a hobby: <input type="text" name="storyelements" id="hobby"><br>
Name an adjective trait: <input type="text" name="storyelements" id="adjective"><br>
Name a number greater than one: <input type="text" name="storyelements" id="number1"><br>
Name another number greater than one: <input type="text" name="storyelements" id="number2"><br>
Choose a dinosaur: <input type="radio" name="dinosaur" id="trex" checked="checked">Tyrannosaurus Rex
<input type="radio" name="dinosaur" id="steg">Stegosaurus
<input type="radio" name="dinosaur" id="diplod">Diplodocus<br>
Choose a personality trait: <input type="radio" name="trait" id="crazy" checked="checked">Crazy
<input type="radio" name="trait" id="charming">Charming
<input type="radio" name="trait" id="curious">Curious<br>
Choose your preferred pronoun: <input type="radio" name="pronoun" id="he" checked="checked">He
<input type="radio" name="pronoun" id="she">She
<input type="radio" name="pronoun" id="ze">Ze<br>
Choose an era: <input type="radio" name="era" id="jurassic" checked="checked">Jurassic
<input type="radio" name="era" id="colonial">Colonial
<input type="radio" name="era" id="twenty">The 1920s<br>
<!-- BUTTONS -->
<input type="button" onclick="beginstory()" name="storytime" value="Start Your Story!"></button><br>
<input type="reset" name="clearform" value="Clear Form">
</form>

Well, you might try defining the variables BEFORE you display them.
As is, you are trying this:
alert("welcome "+name+". you have chosen: "+title+" "+hobby+" "+adjective+" "+number1+" ");
var name=(document.getElementById('username').value);
var title = document.getElementById("storytitle").value;
...
See how you are telling it to display, for example, 'name'... and then in the very next line telling it what name should mean?
Try flipping that around.
...
var colonial = document.getElementById("colonial").value;
var twenty = document.getElementById("twenty").value;}
alert("welcome "+name+". you have chosen: "+title+" "+hobby+" "+adjective+" "+number1+" ");
By putting the alert at the end of the function instead of the beginning, you have defined the variables, and THEN told it where to display them.
Should work better for ya.
** EXPANDED **
OK... to grab the buttons that get selected:
All form elements will have a name or an id. These are used to pass information to the server in name=value pairs whenever the form is submitted.
Most people prefer id for most things, but on radio buttons specifically, you should have a name set; this allows you to have two or more buttons return their value under the same identifier:
<label>Male<input type="radio" name="gender" value="male"></label>
<label>Female<input type="radio" name="gender" value="female"></label>
That doesn't work with id's because id's need to be unique.
You can then create a variable and load it with the radio button itself:
var myButton = document.getElementByName('gender');
This returns BOTH radio buttons, because they both have the same name. It return them in an array, and to access them, you simply use array notation:
var maleButton = myButton[0]; // These are stored in the order they are found in
var femaleButton = myButton[1];// in the HTML
NOTE: document.getElementById('youridhere') returns a single value instead of an array, since id's are always unique... but we can't use it here, since these are not using id's.
You can then access the members of these objects just like you would any other:
alert("The value of maleButton is " + maleButton.value);
Should alert "male".
If that was the only data you needed out of the object, you could have grabbed that originally, however, and saved some typing:
var myValue = document.getElementByName('gender')[0].value;
Hope that helps!

javascript getting the value of a text box

I have this text box here...
<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />
and I also have this submit
<input type="submit" name="btnSearch" value="Search" onclick="location.href='http://www.website.com/search/';" id="btnSearch" class="buttonSearch" />
what I am trying to do is add whatever is in the text box in my
onclick="location.href='http://www.website.com/search/';"
so it would look like this..
onclick="location.href='http://www.website.com/search/what ever the user searches';"
how would I go about doing this, I have been googling my little heart out.

Please avoid mixing JavaScript and HTML. You can remove onclick attribute and replace it with this in plain JavaScript somewhere after the DOM has loaded:
document.getElementById('btnSearch').onclick = function() {
var search = document.getElementById('search').value;
var searchEncoded = encodeURIComponent(search);
window.location.url = "http://www.website.com/search/" + searchEncoded;
}
Also remember about escaping the search box, e.g. using encodeURIComponent(). Here is a working jsfiddle example.

This should work:
onclick="location.href='http://www.website.com/search/'+document.getElementById('search').value;"
But I wouldn't ever write that in one of my project as writing script directly on tags is a bad practice.

Here is a working jsfiddle
I moved the event handler out of the button as it is more maintainable. Also I encode the search query so that it gets to the server properly.
var search = document.getElementById('search');
var submit = document.getElementById('btnSearch');
submit.addEventListener('click', function(e) {
var searchValue = encodeURIComponent(search.value); // encode the search query
window.location.href = 'http://www.website.com/search/' + searchValue ;
});

You can add it to the onclick event like so
document.getEelementById("btnSearch").onclick = function(){
location.href='http://www.website.com/search/' + document.getEelementById("search").value;
}
edit: aaaaand too slow... oh well. At least this is not inline.

You would be better off using the < script> tag for this task. Example:
<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />
...
<input type="submit" name="btnSearch" value="Search" id="btnSearch" class="buttonSearch" />
<script type="text/javascript">
var button= document.getElementById('btnSearch');
button.onclick= function(){
var text= document.getElementById('search').value;
location.href='http://www.website.com/search/'+text;
}
</script>
However, you should try to 'clean' a little the text from the textbox so when you append it to the url you get a valid url. You should trim the text, then search for special characters and escape them, etc.

Unable to Limit the user input in JavaScript [duplicate]

This question already has answers here:
How to impose maxlength on textArea in HTML using JavaScript
(16 answers)
Closed 8 years ago.
I tried limiting the user input but it wasn't successful, please guide me where I am making mistake.
JS
<script type="text/javascript">
function countLength() {
var maxLength=10;
var length = document.getElementById("txt").value.length;
if(length>10) {
return false;
}
}
</script>
HTML code
<form name="formA" id="formA" action="#" >
<textarea id="txt" name="txt" onkeyup="countLength()"></textarea>
</form>

Your code basically replicates the maxlength attribute, which seems to work (and I don't think is being deprecated?). Just use that.
<input type='text' name='mytext' maxlength='10'>

return false on onkeyup does nothing (as you've probably noticed). I've seen solutions where someone would just alter the value of the textarea, perform a substring operation, and assign that new value back.

Try this:
function countLength() {
var maxLength=10;
var ta = document.getElementById("txt");
var length = ta.value.length;
if(length>maxLength) {
ta.value = ta.value.substr(0, maxLength);
return false;
}
}