I'm trying to change my 'send' button which onClick sends a message from an input box to a div, to also trigger the click of a 'checkbox' input.
HTML
<button type="submit" class="btn btn-default">Post</button>
<input name="stry" type="text" id="stry"/>
<input name="nope" type="text" id="message-input"/>
<input type="checkbox" name="sendsms" onclick="copyStory(this)">
*These buttons are actually in a form
JS
function copyStory(ch) {
if (ch.checked)
var text1 = document.getElementById("message-input").value;
else
text1 = '';
document.getElementById("stry").value = text1;
}
I've searched around but I can't find a way to make the send button trigger the checkbox, any suggestions?
So what you need is to have same handler for both onclick and onchange events. Try this way,
HTML :
<input type="button" id="sendButton" value="Send" onclick="copyStory(this)" />
<input name="nope" type="text" id="message-input"/>
<input type="checkbox" name="sendsms" onchange="copyStory(this)"/>
<div id="msgDiv"></div>
javaScript :
function copyStory(ch) {
var text1
if (ch.checked || ch.id == "sendButton")
text1 = document.getElementById("message-input").value;
else
text1 = document.getElementById("msgDiv").innerText = "";
document.getElementById("msgDiv").innerText = text1;
}
jsFiddle
Related
I would like the "Send" button to be disabled if the input is empty.
I want to manage this in the JavaScript file.
I know that it is possible in HTML to call a function on the input but I prefer to use an event in the js file.
https://codepen.io/leakcim-web/pen/gOYPpqo
//javascript
let inputElt = document.getElementById('input');
let btn = document.getElementById('button');
if (inputElt.value !== '') {
btn.disabled = false;
} else {
btn.disabled = true;
}
<input placeholder="Enter some text" name="name" id='input' />
<button id='button'>Réserver</button>
You can use addEventListener to add an event to the textbox and enable/disable as appropriate
let inputElt = document.getElementById('input');
let btn = document.getElementById('button');
inputElt.addEventListener("input", function(){
btn.disabled = (this.value === '');
})
<input placeholder="Enter some text" name="name" id='input'/>
<button id='button' disabled>Réserver</button>
Just as amusement, you can do this in just CSS and html, reference Matching an empty input box using CSS
#input:invalid + button {
opacity: 0.5;
pointer-events: none;
}
<input placeholder="Enter some text" name="name" id='input' required="required"/>
<button id='button'>Réserver</button>
And if you have something in between the button and input you can use #input ~ #button. also you don't need the id attributes you can use type="submit" on button then use input ~ [type="submit"] then it will work with any input at the same nesting.
This works but then it disappears after like a second
function tfw() {
var TFW = document.getElementById("TFW").value
if (TFW == "mexicans") {
document.getElementById("image").innerHTML = "<h1>worked!</h1>";
event.preventDefault();
}
}
Occasion:
<input type="text" id ='TFW'><br>
<input type="submit" value="Submit" onclick="tfw();">
Change input type="submit" to input type="button" and also get rid of event.preventDefault() to fix the issue.
This is the HTML code:
<body>
<form>
<input id="input" type="text" name="input" value="Enter Here">
<input type="submit" value="Submit">
</form>
<div id="display">
</div>
</body>
This is the JavaScript:
input = document.getElementById("input");
if (input.value == "Hello") {
display.innerHTML = "Hello";
} else {
display.innerHTML = "Type";
}
When I change the input value by clicking on the input field and typing "Hello", it does not display "Hello" in display.innerHTML. I would like it to display "Hello" when "Hello" is typed into the input field. That's a lot of "Hello"'s! Any help would be great! Thanks in advance.
var input = document.getElementById("input"),
display=document.getElementById("display");
input.oninput=function(){
if (input.value === "Hello") {
display.innerHTML = "Hello";
} else {
display.innerHTML = "Type";
}
};
<input id="input" type="text" name="input" value="Enter Here">
<div id="display">
</div>
Your javascript code only gets executed once before you have entered anything in the input field.
You need to either setup a change handler for the input field or a submit handler for the form and set display.innerHTML.
Also, did you miss a display = document.getElementById("display");?
If you want use your button for submit the value of your textbox (your input type text-field) use onclick event as follows:
function displayData() {
var div_display = document.getElementById('display');
/* This is your input, but you shoud use another Id for your fields. */
var textValue = document.getElementById('input').value;
/* Change the inner HTML of your div. */
div_display.innerHTML = textValue;
}
<input id="input" type="text" name="input" value="Enter Here" />
<input type="submit" value="Submit" onclick="displayData();" />
<div id="display">
</div>
Hope it helps.
I am dynamically rendering pages using Handlebars.js, and I have a "quiz-form template" with the following code:
<div id="right-pane">
<script type="text/x-handlebars-template" id="quiz-form-template">
<form class="cf" id="quiz-form">
<h2>Create a <span>quiz</span></h2>
<p>Enter a quiz name and description to get started.</p>
<div>
<input type="text" name="quiz-name" placeholder="Quiz Name" />
</div>
<div>
<textarea rows="5" cols="40" name="quiz-description"
placeholder="Description"></textarea>
</div>
<div id="checkbox">
<input type="checkbox" name="is_random" /> Create randomly generated quiz <br/>
<input type="checkbox" name="is_single_page" /> Render quiz on a single page <br/>
<input type="checkbox" name="is_immediate"/> Give immediate feedback <br/>
</div>
<input type="submit" class="btn" value="Add Questions" />
</form>
</script>
</div>
I am running into two problems that I have been trying to debug to no avail. After rendering this page on my html, when I click the checkboxes, they do not get checked at all. It seems like I click and it "almost bounces off".
Additionally when I click the submit button, it is not being listened to. I am console.log"ging" to check and their is not output. Here is my event listener:
rightPane.addEventListener("submit", function(event) {
console.log( event.target );
event.preventDefault;
if ( event.target.value === "Add Questions" ) {
//DOM elements
newQuizName = document.querySelector('#quiz-form input');
newDescription = document.querySelector('#quiz-form textarea');
randomStatus = document.querySelector('#quiz-form input[name="is_random"]');
singlePageStatus = document.querySelector('#quiz-form input[name="is_single_page"]');
immediateStatus = document.querySelector('#quiz-form input[name="is_immediate"]');
var pendingQuiz = getPendingQuiz();
pendingQuizMetaData = {name: newQuizName.value, description: newDescription.value,
random: randomStatus.checked, singlePage: singlePageStatus.checked,
immediate: immediateStatus.checked
pendingQuiz = { metadata: pendingQuizMetaData, questions: [] };
updatePendingQuiz( pendingQuiz );
rightPane.innerHTML = templates.renderQuestionType();
newQuestion = "";
newSubject = "";
// }
// Since add questions is clicked, we should send the user to select question type
// we'll need to render html on the right pane
}
});
Any input would be greatly appreciated.
I have an input text field with a placeholder attribute. The placeholder disappears when I enter text, but I would like the the placeholder text to reappear after I click the button, "clear," or when the text field is empty. What are some ways I can achieve this?
Below is the code I have below. I tried
document.text.value = "hello";
but the text "hello" stays in the box when I start typing.
HTML
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick(clearText)>
Javascript
function(clearText) {
document.text.value = " ";
}
When the text field is empty, the placeholder will reappear automatically.
When the clear button is clicked, you can use onclick attribute on the button and define the function like this:
Implementation with pure JS:
<script>
function clearText() {
// we use getElementById method to select the text input and than change its value to an empty string
document.getElementById("my_text").value = "";
}
</script>
<!-- we add an id to the text input so we can select it from clearText method -->
<input id="my_text" type="text" placeholder="hello">
<!-- we use onclick attribute to call the clearText method -->
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
Or you can use jQuery:
<script>
function clearText() {
$("#my_text").val("");
}
</script>
<input id="my_text" type="text" placeholder="hello">
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
The easiest way to do it:
<input placeholder="hello" onchange="if (this.value == '') {this.placeholder = 'hello';}"
/>
You were very close
HTML :
<input type="text" id='theText' placeholder="hello">
<input type="button" value="clear" onclick='clearText()'>
JavaScript :
clearText = function(){
document.getElementById('theText').value = "";
}
Demo : http://jsfiddle.net/trex005/7z957rh2/
There are multiple problems with your javascript syntax, starting from function declarations and ending with onclick event specification.
However, you were on the right way, and code below does the trick:
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('input').value=''">
However, it will only work if this is the only input box in your document. To make it work with more than one input, you should assign it an id:
<input type="text" id="text1" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('#text1').value=''">
and use "text2" and so on for other fields.
You should not forget to set "return false;"
document.getElementById('chatinput').onkeypress = function(){
var key = window.event.keyCode;
if (key === 13) {
var text = this.value;
var object = document.getElementById('username_interface');
email = object.email;
username = object.username;
empty = /^\s+$/;
// function Send Message
this.value = "";
return false;
}else{
return true;
}}