Hey the task i try to achieve is to activate and deactivate a button depending on, if there is text in a textarea or not.
Here the code I'm trying to get going.
var button = document.getElementById("button_01");
var textarea = document.getElementById("textarea_01");
$(button).prop('disabled', true);
textarea.addEventListener('keyup', function() {
button.disabled = !this.value;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div_01">
<h1>String Editor</h1>
<textarea id="textarea_01" rows="5" placeholder="Paste your string here"></textarea>
</div>
<div id="div_02">
<h1>Options</h1>
<button id="button_01" type="button" value="submit">
Modify
</button>
</div>
and here a fiddle: Fiddle
What I'm really not understanding here is, why the button which I disabled in the js part is still active
I'm an absolute html/js/web developement newbie, so please give some explanation.
Thanks in advance
The jsFiddle doesn't work because there's no jQuery CDN link.
You can find an updated version, witch includes the jQuery CDN here.
You're using jQuery to disable the button on page-load.
I'll recommend using HTML for that:
<button id="button_01" type="button" value="submit" disabled>
Then, your code appears to work just fine because there's no jQuery needed anymore:
var button = document.getElementById("button_01");
var textarea = document.getElementById("textarea_01");
textarea.addEventListener('input', function() {
button.disabled = !this.value;
});
<div id="div_01">
<h1>String Editor</h1>
<textarea id="textarea_01" rows="5" placeholder="Paste your string here"></textarea>
</div>
<div id="div_02">
<h1>Options</h1>
<button id="button_01" type="button" value="submit" disabled>
Modify
</button>
</div>
Note;
Changed event from keyup to input so things like right-click and paste will trigger the event. (Thx to #freedomn-m)
Try like this.
var button = document.getElementById("button_01");
var textarea = document.getElementById("textarea_01");
button.disabled = true;
textarea.addEventListener('keyup', function() {
button.disabled = !this.value;
});
<div id="div_01">
<h1>String Editor</h1>
<textarea id="textarea_01" rows="5" placeholder="Paste your string here"></textarea>
</div>
<div id="div_02">
<h1>Options</h1>
<button id="button_01" type="button" value="submit">
Modify
</button>
</div>
Related
<div class="chat-input-holder">
<textarea class="chat-input"></textarea>
<input type="submit" value="Send" class="message-send"/>
</div>
How to retrieve data in textarea field after clicking on submit button. Using jquery, ajax?
This code should work:
function getdata(Event){
Event.preventDefault()
let chatInput = $('#chat-input').val();
$('#result').text(chatInput)
}
$('#message-send').click(getdata);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form class="chat-input-holder"> <!-- replace div with form -->
<textarea class="chat-input" id="chat-input"></textarea>
<input type="submit" value="Send" id="message-send" class="message-send"/>
</form>
<p> for the example we will place the text on the div bellow. but use the data however you like</p>
<div id='result'>
</div>
Note that I changed the div tag into a form tag, and added some IDs.
You can find here a solution using jQuery. The output is currently store in a div with id="out", you can customize the code.
document.forms["chat-input-holder"].addEventListener('submit', e => {
e.preventDefault();
let text = $(".chat-input").val();
$("#out").html(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="chat-input-holder">
<textarea class="chat-input"></textarea>
<input type="submit" value="Send" class="message-send"/>
</form>
<div id="out"></div>
I'm trying to make a table in Javascript that does not use a table element, and I'm using pure vanilla nodeJS. I can get a new row to show up very briefly, but it disappears when I hit the button that made it show up in the first place. My code is:
<!DOCTYPE html>
<html>
<body>
<h1> Title Tests </h1>
<div id="Experiments">
<form id="Exp">
<input type="text" name="url box" placeholder="publisher URL"><br>
<div class="Title">
<input type="text" name="title box" placeholder="Test Title"><br>
</div>
<button id="addButton" onclick="newRow()">+</button><br>
<input type=submit value="Submit">
</form>
</div>
<script>
function newRow(){
var number = 2;
var newTitleRow = document.createElement('div');
newTitleRow.setAttribute('id',`Title${number}`);
var newBT = document.createElement('input');
newBT.setAttribute('type','text');
newBT.setAttribute('name',`title box ${number}`);
newBT.setAttribute('placeholder','Test Title');
newTitleRow.appendChild(newBT)
var button = document.querySelector("#addButton");
button.before(newTitleRow);
number++;
}
</script>
</body>
</html>
The problem is that you're using a html <button> inside a <form> element. This means it will automatically act as a submit button unless you declare it to be something different. So as soon as you push the + button it will try to submit the form to an undefined URL.
To work around you need to define that + button to be of type "button" like:
<button type="button" id="addButton" onclick="newRow()">+</button><br>
JavaScript:
var editBtn = document.getElementById('editBtn');
var saveBtn = document.getElementById('saveBtn');
var textAreaHtml = document.getElementsByTagName("textarea");
editBtn.addEventListener('click', function (e) {
textAreaHtml[0].removeAttribute('readonly');
textAreaHtml[0].readOnly = 'false';
});
saveBtn.addEventListener('click', function (e) {
textAreaHtml[0].removeAttribute('readonly');
textAreaHtml[0].readOnly = 'true';
});
Html:
<div class="panel-body">
<div>
<input type="text" name="apexClass" id="autocomplete" placeholder="Type the name of the Apex class you want to edit"/>
</div>
<div class="btn-group-vertical" style="padding: 1%">
<button type="button" class="btn btn-primary" id="editBtn">Edit</button>
</button>
</div>
<div class="tab-content" align="left">
<div id='error' style='display:none'>{{apexClassWrapperError.message}}</div>
<div>{{apexClassWrapper.name}}</div>
<pre class="prettyprint">
<code class="language-java">
<textarea ng-model="apexClassWrapper.body" id="apexBody" readonly="true">{{apexClassWrapper.body}}</textarea>
</code>
</pre>
</div>
<button type="button" class="btn btn-primary" id="saveBtn" ng-click="postdata(apexClassWrapper)">Save</button>
</div>
I have two buttons, save and edit. I have placed event listener for Edit and save to make text area as editable, but this is not working. I am not able to edit the TextArea in the UI? Is there something I am missing?
With some slight tweaking to your click event handlers, you should be in business.
editBtn.addEventListener('click', function (e) {
textAreaHtml[0].removeAttribute('readonly');
});
saveBtn.addEventListener('click', function (e) {
textAreaHtml[0].setAttribute('readonly', true);
});
Your edit button was setting readOnly to false, but readonly is a boolean attribute. When it is present it makes the textarea readonly regardless of if it has a true or false value.
Instead of readonly, use the HTML attribute contenteditable!
I have never used readonly but by toggling the boolean on contenteditable you should be cookin!
https://www.w3schools.com/tags/att_contenteditable.asp
How to clear textarea field onclick? the problem is I am using AJAX. it won't reload the page. can anyone help me to solve this problem.
<div class="write_comment" style="">
<textarea type="text" id="form_task_comment" name="form_task_comment" value="" placeholder="Write your comment here..."></textarea>
<div class="buttons" style="float:right">
<button id="btn_comment_submit" class="btn btn-default btn hoverable btn-sm btn_comment_submit" style="margin:0rem;" type="submit">Add Comment</button>
</div>
</div>
Try this. Click on button to clear Textarea
$('.clearText').click(function(){
$("#form_task_comment").val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clearText">Click Here To Clear Textarea</button>
<br>
<textarea id="form_task_comment">This is textarea</textarea>
In case you do not want to use jQuery. And the other posts above do not mention how to reset your textarea ON send. When you bind onclick, it would clear the text BEFORE sending. Therefore you need to use form onsubmit
var textArea = document.getElementById("form_task_comment")
var form = document.getElementById("form-name")
form.addEventListener("submit", function(event) {
textArea.value = "";
event.preventDefault();
}, false)
<div class="write_comment" style="">
<form id="form-name" >
<textarea type="text" id="form_task_comment" name="form_task_comment" value="" placeholder="Write your comment here..."></textarea>
<div class="buttons" style="float:right">
<button id="btn_comment_submit" class="btn btn-default btn hoverable btn-sm btn_comment_submit" style="margin:0rem;" type="submit">Add Comment</button>
</div>
</form>
</div>
Simply just replace textarea.value with nothing when button is clicked??
html code:
<input type="button" value="Clear Text" onclick="eraseText();"></input>
Javascript:
function eraseText()
{
document.getElementById("form_task_comment").value = "";
}
You can simply clear the value of text area using .val() like this
$("#form_task_comment").val('');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="form_task_comment">This is textarea</textarea>
Add this line of code wherever you want to clear the text area
I have setup clipboardjs successfully. Now I am adding a framework to it for design purpose.
It is all working fine only when I add a new class to the button called "small button" than it will not work anymore. Before I used a button it will work very well.
I think there is an simple answer but I think I have the wrong look on the issue.
This is the not working example:
< script >
var clipboard = new Clipboard('.small button');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
}); < /script>
<div class="result">
<label>E-Mail Code:</label>
<p>
<textarea id="emailcode">
<?=$image;?>
</textarea>
</p>
<p>
<button class="small button" data-clipboard-action="copy" data-clipboard-target="#emailcode">
Copy to clipboard
</button>
</p>
<label>Digistore24 Code:</label>
<p>
<textarea id="ds24code">
<?=$ds24;?>
</textarea>
</p>
<p>
<button class="small button" data-clipboard-action="copy" data-clipboard-target="#ds24code">
Copy to clipboard
</button>
</p>
</div>
This is the working example:
< script >
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
}); < /script>
<div class="result">
<label>E-Mail Code:</label>
<p>
<textarea id="emailcode">
<?=$image;?>
</textarea>
</p>
<p>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#emailcode">
Copy to clipboard
</button>
</p>
<label>Digistore24 Code:</label>
<p>
<textarea id="ds24code">
<?=$ds24;?>
</textarea>
</p>
<p>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#ds24code">
Copy to clipboard
</button>
</p>
</div>
The argument passed when initializing the clipboard library is a CSS selector, so the code you have
new Clipboard('.small button')
will find button tags within tags of small class. What you want is probably
new Clipboard('.small.button')
which will find tags having both small and button classes.
Add a double class to your button as posted down below. First you post "btn" and then with a space the relevant css from the framework.
<button class="btn small button" data-clipboard-action="copy"
data-clipboard-target="#ds24code">