I have button in html
<input type="button" value="Clear">
<textarea id='output' rows=20 cols=90></textarea>
If I have an external javascript (.js) function, what should I write?
Change in your html with adding the function on the button click
<input type="button" value="Clear" onclick="javascript:eraseText();">
<textarea id='output' rows=20 cols=90></textarea>
Try this in your js file:
function eraseText() {
document.getElementById("output").value = "";
}
You need to attach a click event handler and clear the contents of the textarea from that handler.
HTML
<input type="button" value="Clear" id="clear">
<textarea id='output' rows=20 cols=90></textarea>
JS
var input = document.querySelector('#clear');
var textarea = document.querySelector('#output');
input.addEventListener('click', function () {
textarea.value = '';
}, false);
and here's the working demo.
Using the jQuery library, you can do:
<input type="button" value="Clear" onclick="javascript: functionName();" >
You just need to set the onclick event, call your desired function on this onclick event.
function functionName()
{
$("#output").val("");
}
Above function will set the value of text area to empty string.
Your Html
<input type="button" value="Clear" onclick="clearContent()">
<textarea id='output' rows=20 cols=90></textarea>
Your Javascript
function clearContent()
{
document.getElementById("output").value='';
}
You can simply use the ID attribute to the form and attach the <textarea> tag to the form like this:
<form name="commentform" action="#" method="post" target="_blank" id="1321">
<textarea name="forcom" cols="40" rows="5" form="1321" maxlength="188">
Enter your comment here...
</textarea>
<input type="submit" value="OK">
<input type="reset" value="Clear">
</form>
Related
How do I solve the error cannot read property of 'addEventListener' of null ? when I add this code,document.getElementById("myForm").addEventListener("submit", SaveBookmark) in my JS file
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="button" id="submitBtn">Submit</button>
</form>
First please notice that you're calling DOM is loaded or duplicated formID.
This code is working fine. please change <button type="button"> to be <button type="submit" .../>
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", SaveBookmark);
function SaveBookmark() {
alert('success');
}
</script>
I'm by no means an expert but to avoid that error your JS should look like this
const myForm = document.getElementById("myForm");
if (myForm) {
myForm.addEventListener("submit", SaveBookmark)
}
This ensures that your form element exists before you add the event listener
Should work easily:
document.getElementById('myForm').addEventListener('submit', function() {
alert("yes!")
})
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
It does not work because you have a
<button type="button" id="submitBtn">Submit</button>
instead of:
<button type="submit" id="submitBtn">Submit</button>
and you're trying to reach submit event.
Anyway, i recommend you not to add event listeners due to resource wasting. Use it when it's the only option.
I let you another way to reach the same with default click eventlistener:
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn" onclick="saveBookmark()">Submit</button>
</form>
<script type="text/javascript">
function saveBookmark(){
alert ("Bookmark saved");
}
</script>
You'll click on submit button anyway so, use onclick event instead of creating an eventlistener. It works simplest and waste much less resources...
And remember to add action attribute to the form, trying to re-program defined behaviour will only make your software heavy and heavy on codelines and timeloads. Thats why know the language its important.
Hope it help!
I have a small project I'm working on, and for some reason chrome says that the code below is undefined.
HTML:
<input type="reset" onclick="cleartxt()" class="rset" value="Clear Text"></input>
Javascript:
var cleartxt = function() {
document.getElementById("text").value = "";
};
Can someone help me figure out why this is functioning this way?
Your code is working fine. Here is the working snippet.
var cleartxt = function() {
alert('reset working');
document.getElementById("text").value = "";
};
<input type="text" id="text" />
<input type="reset" onclick="cleartxt()" class="rset" value="Clear Text"/>
Once you use onclick and call function directly in the dom, you must define a global function and define it before the document fully loaded, eg: put the function definition in the <head>.
The correct way to write an input is
<input type="reset" onclick="cleartxt()" class="rset" value="Clear Text">
without closing tag.
You have to declare the function in the head of your html, and you have tu put the input with the "text" id.
First <input> doesn't have a closing tag. Second if you want to use input type="reset" no need for javascript but they must be inside a form.. See the snippet below..
var cleartxt = function() {
document.getElementById("text").value = "";
};
<input type="button" onclick ="cleartxt()" class="rset" value="Clear Text" >
<input type="text" id="text" >
<br />
<br />
<p>With form</p>
<form>
<input type="reset" class="rset" value="Clear Text" >
<input type="text" id="text" >
</form>
I want to make submit event depend textarea value. cause i want to check textarea is vaild. so when I was using javascript function getElementByid, it result was placeholder value.
I just want to know how can I fix it.
<div class="clearfix">
<div class="input">
<textarea name="comment" id="comment" placeholder="<?php _e("Your Comment Here", "bonestheme"); ?>" tabindex="4" style="border:1px solid #cbcbcb; resize:none"></textarea>
</div>
</div>
<div class="form-actions">
<input class="btn-commnet" name="submit" type="submit" id="submit" tabindex="5" value="<?php _e("Submit Comment","bonestheme"); ?>" />
</div>
<?php endif; ?>
You can use .value. Here's a demo:
var textarea = document.getElementById('test');
var result = document.getElementById('result');
function updateResult() {
result.textContent = textarea.value;
}
textarea.addEventListener('keyup', updateResult);
<textarea id="test" placeholder="Some placeholder"></textarea>
<p id="result"></p>
A little unclear as to what you need to do but if you just want to validate that the textarea value is something other then the placeholder text, you could add a handler to call on click of the button, something like:
<input class="btn-commnet" name="submit" type="submit" id="submit" tabindex="5" value="<?php _e("Submit Comment","bonestheme"); ?>" onclick="return ValidationEvent()"/>
then have a javascript function that checks the value prior to submitting..
function ValidationEvent() {
commentElm = document.getElementById('comment');
if(commentElm.value === commentElm.placeholder)
return false;
return true;
}
This could be greatly simplified using Jquery.
Try below example. It's very easy. It doesn't return placeholder value it returns content that is written in textarea either you write static or dynamic. I just specify how to get simply textarea value instead of placeholder. If you want to set any validation then show me your java script code, so that i can give you better result.
<html>
<head>
<script type="text/javascript">
function abc()
{
var getTextArea = document.getElementById("txtArea");
var value = getTextArea.value;
alert(value);//It will show you text area value
}
</script>
</head>
<body>
<textarea id="txtArea" placeholder="hello">
</textarea>
<input type="submit" onclick="abc()"/>
</body>
</html>
Why does the following code not add another text input field when clicking on the add another field input button?
<html>
<head>
<script>
function add_field()
{
var elem = document.createElement("input");
elem.setAttribute('type','text');
elem.setAttribute('name','user');
document.body.insertBefore(elem, document.getElementById('su'));
}
</script>
</head>
<body>
<form name="input" method="get">
Put input here:<br>
<input type="text" name="user">
<input type="button" onclick="add_field()" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
</body>
</html>
According to the MDN reference page, you need to call parent.insertBefore(newElem, referenceElem). In your example, I suppose that <form> is the parent, not <body>. Changing the last line of your function to this:
var target = document.getElementById('su');
target.parentNode.insertBefore(elem, target);
will make it work.
jQuery solution here
<form name="input" method="get">
Put input here:<br>
<input id='ap' type="text" name="user">
<input id="addField" type="button" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
JavaScript
$('#addField').click(function(e)
{
$('<input type="text" />').insertBefore('#su')
});
how can i get a specific element of a text input into a variable via javascript, in other words take the example below
<form id="123">
<input type="text" id="supply_qty" />
<input type="submit" name="submit" id="123" />
</form>
How do i get the element within the text input into a variable when the submit button is clicked, the problem i have is that i have multiple instances of the code above, with lots of text inputs, so i only want to get the element specific to the submit button clicked. Hopefully you will get what i mean. The reason i need this done via JavaScript and not php etc... is that i later want to use ajax with it, but for the moment i just need the variable.
Thanks
The most easiest way is to give and id to the element and user getElementById() method to grab the element on variable. Just like what you are doing right now
Simple Example:
var button = document.getElementyById("123");
button.onclick = function() {
var text = document.getElementById('supply_qty'); //now you got your element in varaiblle
};
Using jQuery make a slight change to your markup. I am just going to add some classes.
<form>
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
then
$(".submit").click(function() {
var txtbox = $(this).parent("form").children(".textbox")[0];
});
Or, it might be better to bind to the submit handler of the form, on that case, give a common class to the form.
<form class="tinyforms">
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
Then
$('.tinyforms').submit(function() {
var txtbox = $(this).children(".textbox")[0];
});
If you accept using jQuery you can do this:
DOM
<form class="form" action="false">
<input type="text" value="some input" name="textInput" />
<input type="text" value="some text" name="textInput2" />
<input type="submit" class="sumbit" value="Send" />
<div id="results"></div>
</form>
And JavaScript
$(".form").submit( function(){
var inputs = $(this).serializeArray();
$.each(inputs , function(i, input){
$("#results").append(input.value + "<br />");
});
return false;
} );
EDIT: Updated code and Fiddle: http://jsfiddle.net/65Xtp/4/