This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 6 years ago.
I try to make a calculator with javascript with the onclick event I want the value of the button to convert an input text box.
When I write the code the value of the button briefly in the text box , but it disappears instantly.
The code that i use can you find below this text, what am i doing wrong.
HTML:
var iGetal = 0;
function GetalRekenmachine()
{
iGetal = iGetal + 1;
document.getElementById("Display").value = iGetal;
}
<button id="Cijfer7" value="7" onclick="GetalRekenmachine()">7</button>
<input type="text" id="Display"/>
Because the default type of a button is submit. So either cancel the click action or set the type to be button.
<button id="Cijfer7" value="7" onclick="GetalRekenmachine(); return false;">7</button>
or
<button type="button" id="Cijfer7" value="7" onclick="GetalRekenmachine()">7</button>
var iGetal = 0;
function GetalRekenmachine(event)
{
iGetal = iGetal + 1;
document.getElementById("Display").value = iGetal;
event.preventDefault()
}
<button id="Cijfer7" value="7" onclick="GetalRekenmachine()">7</button>
<input type="text" id="Display"/>
Related
This question already has answers here:
Check/Uncheck checkbox with JavaScript
(12 answers)
Closed 7 months ago.
I have parent element like:
<span style="background: yellow; padding: 50px;" onClick="setCheckBox()"><span>
<span> </span> <input type="checkbox" name="f01" value="100"></span></span>
and js function:
function setCheckBox() {
document.getElementsByTagName('input'[0].checked = 'true';
}
Want to change the checkbox input on parent click (yellow color)
Thanks in advance!
you would use .checked = true; like so
document.getElementsByTagName('input')[0].checked = true;
<input type="checkbox" name="f01" value="100">
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have an input box on the left and a button next to it on the right. On some of the pages, I would like to place a checkbox next to the input box and move the button to underneath/below. Is there a way to do it using CSS flexbox or something? I have a JavaScript condition that determines whether the checkbox should be on the page or not, but not sure how I can get things to layout as stated above.
<div>
<input type="text" />
<!-- I would like this checkbox to be present only some of the time
<input type = "checkbox" /> -->
<button> click me </button>
</div>
This is simple with the adjacent sibling combinator, no JavaScript necessary. Simply select any button that is immediately adjacent to an input[type="checkbox"] and make it display block (rather than inline).
input[type="checkbox"] + button {
display: block;
}
<div>
<input type="text" />
<input type = "checkbox" />
<button> click me </button>
</div>
<div>
<input type="text" />
<button> click me </button>
</div>
Are you looking for something like this?
Run the snippet below:
//here we are getting each element by its id
var check = document.getElementById("check");
var input = document.getElementById("input");
var button = document.getElementById("button");
//this is the condition we're using (it could be anything but it was easy to use a boolean for this example)
var bool = false;
//here is the function we're calling on click
function clickMe() {
//when button is clicked we set bool from false to true
bool = true;
//if bool is true we we will apply the following styles to the check and button
if (bool === true) {
check.style.display = "inline-block";
button.style.display = "block";
}
}
#check {
display: none;
}
<input type="checkbox" id="check"><input id="input"><button id="button" onclick="clickMe();">Click Me</button>
Would recommend toggling the style of the parent
function toggleClass() {
const element = document.getElementById("container")
element.classList.toggle("toggle");
}
#checkbox {
display:none;
}
.toggle #checkbox {
display:block;
}
<div id="container">
<input type="text"/>
<input id="checkbox" type="checkbox"/>
<button onClick="toggleClass()">Button</button>
</div>
This question already has answers here:
Changing button text onclick
(19 answers)
Closed 4 years ago.
I have a function which returns bootstrap row and every row contains input field, textarea and remove button.
So I have multiple bootstrap rows as I am calling function for various time. After clicking on remove button I am changing border color of input and textarea just to indicate that I am not taking it into consideration. I have made remove button to work as toggle button so that it will add and remove error class that I am assigning to input and textarea.
Now I want to change the value of 'Remove' button to 'Add'. So that when I click on 'Add' button it will remove the style of input and textarea and it means that I can take those values into consideration.
function GetDynamicTextBox(value, tag) {
return'<div class="col-lg-4"><input class="form-control" type="text" value="'+tag+'" name="typetag" id="tags" data-role="tagsinput"/></div>'+'' +
'<div class="col-lg-6"><textarea class="form-control issuetext" name="comment" id="" cols="" rows="">'+value+'</textarea></div>'+
'<div class="col-lg-2">'+
'<input type="button" value="Remove" class="remove btn btn-default" /></div>'
}
$("body").on("click", ".remove", function () {
$(this).closest('#issue').find('.bootstrap-tagsinput').toggleClass('error')
$(this).closest('#issue').find('.issuetext').toggleClass('error')
});
<div class='row'id="issue">
<div class="col-lg-4">
<input class="form-control" type="text" value="'+tag+'" name="typetag"
id="tags" data-role="tagsinput"/></div>
<div class="col-lg-6">
<textarea class="form-control issuetext" name="comment" id="" cols=""
rows="">'+value+'</textarea></div>
<div class="col-lg-2">
<input type="button" value="Remove" class="remove btn btn-default" /></div>
</div>
It's pretty straightforward. Just add a click event to the button. The click event will give you an event (e) and you can then call the standard .innerText property on the element to set it. No need for jQuery here...
const btn = document.getElementById('testButton');
let clickCount = 0;
btn.addEventListener('click', (e) => {
e.currentTarget.innerText += clickCount++;
});
<button type="text" id="testButton">Initial Value</button>
You can add an event listener to the button and change its textContent according to the value of a global variable.
<button id="removeOrAdd">Remove</button>
<script>
var remove = true;
document.getElementById("removeOrAdd").addEventListener("click", function(e){
if(remove){
this.textContent = "Add";
remove = false;
} else {
this.textContent = "Remove";
remove = true;
}
});
</script>
This question already has answers here:
How to get the selected radio button’s value?
(19 answers)
Closed 8 years ago.
undefined output!! am i missing sth ? any idea ?
here is the radio button inputs :
<tr>
<td>Yes <input type="radio" name="email" id="email" value="yes"/></td>
<td></td>
<td>No <input type="radio" name="email" id="email" value="no"checked="checked"/></td>
</tr>
<input type="button" value="submit" onclick="doIt()" style="width: 150px; height:30px" />
<script type="text/javascript" language="javascript">
function doIt() {
var emailopt = document.getElementById('email').checked.value;
alert (emailopt);
}
The way you have tried is completely wrong. Instead use the below approach
1) Iterate through all the radio buttons with name property
2) Now using checked attribute, place an if statement and then extract the value
function doIt() {
var emailopt = document.getElementsByName('email');
for (i = 0; i < emailopt.length; i++) {
if (emailopt[i].checked) {
alert(emailopt[i].value)
}
}
}
Fiddle
Try using this:
function doIt() {
var emailopt = document.getElementById('email').checked;
alert (emailopt);
}
It will return true and false.
Lets me know if you have any questions.I hope it will help you.
This question already has answers here:
Radio Button and an Input field
(3 answers)
Closed 8 years ago.
im trying to activate/disable a textinput by activating/disabling a radio button.
html:
<input name="test" type="radio" value="one" onclick="activate();"/>
<input class="" name="info" type="text" size="5" maxlength="5" disabled>
<input name="test" type="radio" value="two""/>
javascript:
function activate(){
document.forms[0].info.disabled = !document.forms[0].test[0].checked;
}
when u activate the 1st radio button, the input text should be activated. when u activate 2nd button, it should be disabled.
but this code doesnt work. does anyone know better?
You need to run the activate function again when the other radio button is clicked.
Try this:
window.onload=function() {
var rad = document.getElementsByName("test");
for (var i=0;i<rad.length;i++) {
rad[i].onclick=function() {
this.form.info.disabled=this.value!="one";
}
}