After excuting alert, next line gives an error.how can I fix this using javascript or jquery?
for(var nI = 0; nI < aOrderNumList.length; nI++) {
if(!isEmpty(aOrderNumList[nI])) {
alert("Invalid Order Number");
var oTextRange = $("#OrderNumList").createTextRange();
var lFound = oTextRange.indexOf(aOrderNumList[nI])!=-1;
if(lFound) {
oTextRange.select();
}
return false;
}
}
HTML code
<tr>
<td>Order Number List:</td>
<td><textarea tabindex="<%=nIndex+1%>" id="OrderNumList" name="OrderNumList" rows="2" cols="35" <%=VClass("OrderNumList","")%>></textarea></td>
</tr>
Thank you very much.
As in your code, you need to select text content of the input element (text, textarea type input fields).
Java-Script
document.getElementById("selector").select()
//selector is element id
JQuery
setTimeout(function () {
$("#selector").select();
}, 1);
//selector is element id, also can you with class selector ie. $(".selector").select();
I think it should be:
var oTextRange = $("#OrderNumList")[0].createTextRange();
createTextRange is a method of DOM object, not jquery object.
Update:
The createTextRange method is supported by the body, button, textarea and the input elements, but the use of the method raises an exception for some input elements (checkbox, image, radio). The isTextEdit property can be used to avoid the exception.
see more: http://help.dottoro.com/ljfahrpo.php
I echo what everyone else said, but do keep in mind that if this is the only thing you are doing, you don't event need jQuery.
var oTextRange = document.getElementById("OrderNumList").createTextRange();
Related
This is what I've done so far - but I also need to handle and empty comment, clear the field after submission and post multiple comments. Don't want answers really - just hints as to where I need to look and if I'm completely off base.
function registerClickHandler() {
var commentButton = document.getElementByID('postComment');
commentButton.onclick = addComment();
}
function addComment() {
var list = document.getElementByID('commentList');
var commentContent = document.getElementByID('comment')
var newComment = document.createElement('li');
newComment.appendChild(document.createTextNode(commentContent));
list.appendChild(newComment);
}
<ul id='commentList'>
</ul>
<form>
<input type='text' id='comment'/>
<input type='button' id='postComment' value='Post'/>
</form>
Take a look to this code working example, basically you have syntax error:
change all ocurrencies of getElementByID for getElementById
document.getElementByID('postComment');
for
document.getElementById('postComment');
And call the function which define the click handler
registerClickHandler();
Get the value for the element
var commentContent = document.getElementById('comment').value;
Some hints:
There's no getElementByID function, only getElementById, because javascript is case-sensitive.
commentButton.onclick = addComment(); is wrong because you call addComment function instead of assigning it as an event-handler to the onclick event. You should remove the parentheses commentButton.onclick = addComment;.
Use document.getElementById('comment').value; to get or set the value of your text input.
How can i remove the style class applied to a textbox on the click event? I'm calling the textbox element using getElementsByName(). Here's my code:
<input id="userNameExists" name="popUpText" class="pop-upText" onclick="clearText(this);" />
function clearText(element)
{
id = element.getAttribute("id");
var textElement = document.getElementById(id);
textElement.value = "";
var element = document.getElementsByName("popUpText");
var count = 0;
for (count = 0; count < 2; count++) {
var id = element.item(count);
id.classname = "";
}
}
In the above script, im not getting the id in the variable id. Right now the values are like "#inputTextBoxName". Please help.
you can use removeClass();
you can manege your styling using attr();
exp:
$("#yourid").attr("style","float: right");
or remove class using
$("#yourid").removeClass("yourClass");
It is case sensitive so
id.className = '';
If you're trying to remove the class from the textbox when you click on the textbox itself, that code is far, far longer than it needs to be.
HTML:
<input type="text" id="userNameExists" name="popUpText" class="pop-upText" onclick="clearText(this);" />
Javascript:
<script>
function clearText(element) {
element.className = '';
element.value = '';
}
</script>
That said, inline event handlers (ie. declaring an onclick attribute on your HTML element) are a bad practice to get into.
Also, if you pass in a reference to an element, get its id, then call document.getElementById() with said id, you end up with two references to the same element. Yes, it should work, but totally pointless.
This is my jsfiddle(http://jsfiddle.net/mZGsp/). I was trying to answer a question here but my code won't work. Here is the code:
JS
var stateOfClick = null;
function initiateLine(){
document.getElementById('test').innerHtml = "Started";
}
function endLine(){
document.getElementById('test').innerHtml = "Line Ended";
}
function createLines(){
if(!stateOfClick) {
initiateLine();
stateOfClick = 1;
} else {
endLine();
}
}
HTML
<body>
<input type="text" id="test" onclick="createlines()">
</body>
A couple of things,
change createlines() to createLines (camel-case).
change <element>.innerHtml to <element>.value
Inside JSFiddle, don't wrap your code inside a function, as then createLines won't be global which it needs to be for the onclick to work.
Here's a working example.
Not even this simple example will work on jsFiddle. You need to attach the event listener with JavaScript:
document.getElementById("someElement").onclick = function() {
//Do stuff
}
For input element you must use the value attribute not the innerHTML field.
function initiateLine(){
document.getElementById('test').value = "Started";
}
also you've misspelled the innerHTML function (though not the primary problem). innerHTML is used for html elements that can contain other elements such as a div containg a p element. Input and option elements all have a value attribute that can be used to extract or set their values.
Someone please help me how to add new function to remove the field, i have js script function that add new field as follows
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
var htmlText = " <input type='text' name='friends[]' value='' size='auto' maxlength='45' /><br />";
var newElement = document.createElement('div');
newElement.id = 'new_field';
newElement.innerHTML = htmlText;
var fieldsArea = document.getElementById('new_field');
fieldsArea.appendChild(newElement);
fields += 1;
} else {
alert("Only 10 fields allowed.");
document.form.add.disabled=true;
}
}
</script>
but i need some helps to add new functions for removing field, For any suggestion and pointer I Would be appreciate.
Read here about removeChild() function removeChild() - mozilla developer
Edit Or here: removeChild() w3schools
First of all, there's already one problem I see with your code. You are setting each new field's ID to the same value, which is invalid HTML and asking for trouble. Be sure to fix that.
The .removeChild method of DOM elements is what you want. .removeChild will remove a node (element or text) from the DOM tree (the set of elements actually contained within the document) only if the node passed in is actually a child of that element, otherwise an error occurs.
You can easily remove the last field by finding the last child of its container:
function removeLastField() {
var fieldsArea = document.getElementById('new_field'),
lastChild = fieldsArea.lastChild;
if(lastChild) {
fieldsArea.removeChild(lastChild);
fields -= 1;
}
}
i would like to replicate that you see a regular input text and when you click it changes into textarea.
is this a hidden layer or is it actually changing the input to textarea? how to do it?
I do believe it's always a textarea and on focus they just change the height of the textarea.
Edit: yes, it is. They use scripting to do everything with a textarea, there is no input field.
<textarea onfocus='CSS.addClass("c4b900e3aebfdd6a671453", "UIComposer_STATE_INPUT_FOCUSED");CSS.removeClass("c4b900e3aebfdd6a671453_buttons", "hidden_elem");window.UIComposer && UIComposer.focusInstance("c4b900e3aebfdd6a671453");' id="c4b900e3aebfdd6a671453_input" class="UIComposer_TextArea DOMControl_placeholder" name="status" title="What's on your mind?" placeholder="What's on your mind?">
What's on your mind?
</textarea>
One method that I found was to have a text area that begins with a smaller width and height and then to dynamically resize it.
function sz(t) {
a = t.value.split('\n');
b=1;
for (x=0;x < a.length; x++) {
if (a[x].length >= t.cols) b+= Math.floor(a[x].length/t.cols);
}
b+= a.length;
if (b > t.rows) t.rows = b;
}
then you would call your function with an onclick event
onclick="function sz(this)"
I found this here
Fellgall Javascript
One problem that he does mention is that this only functions on browsers that support it.
You can combine the jQuery widget you can find here with some coding
Example:
<div id="myform">
<form>
<textarea></textarea>
<button type="submit" style="display:none;">Post</button>
</form>
</div>
<script>
$(document).ready(function(){
var widget = $('#myform textarea');
var button = $('#myform button');
var tarea = widget[0];
// turn the textarea into an expandable one
widget.expandingTextArea();
var nullArea = true;
tarea.value = "What's on your mind?";
widget.focus(function() {
button.css('display', 'block');
if (nullArea) {
tarea.value = "";
nullArea = false;
}
});
widget.blur(function() {
if ($.trim(tarea.value) == "") {
tarea.value = "What's on your mind?";
button.css('display', 'none');
nullArea = true;
}
});
});
</script>
This code will hide by default the post button and will show it only when the textarea is focused or when you already have written something into it (you may want to hide/show a div instead or anything you want).
If jQuery is an option for you at all, there's a jQuery plugin that does just this called Jeditable.
Check out the demos here.
One way to do this is to code a dynamic textarea. This article explains how to do it: http://www.felgall.com/jstip45.htm
Another way to do it is to change the type of the object. Let's say you place your input text in a div tag (its ID being "commentBox". The code would then be:
//when you click on the textbox
function makeTextArea()
{
document.forms[0].getElementById("commentBox").innerHTML = "<textarea id=\"comments\" onBlur=\"backToTextBox()\"></textarea>";
document.forms[0].getElementById("comments").focus();
}
//when you click outside of the textarea
function backToTextBox()
{
document.forms[0].getElementById("commentBox").innerHTML = "<input type=\"text\" id=\"comments\" onFocus=\"makeTextArea()\"/>";
}