I've got a button which I want to reset three form inputs.
I've managed to clear the two text inputs (input 1 and input 2) but the checkbox won't clear.
<button id="reset">reset</button>
Here is my script:
<script type="text/javascript">
document.getElementById('reset').onclick= function() {
var field= document.getElementById('textbox1');
field.value= field.defaultValue;
var field= document.getElementById('textbox2');
field.value= field.defaultValue;
var field= document.getElementById('agreecheckbox');
field.value= field.defaultValue;
};
</script>
This is the structure you need. I added the onclick directly on the button and created a function(myFunctionName). I added a form around your button and checkbox because we are processing form data. THen check to see if the checkbox is checked with this method. if not it sets checked as empty.
CSS
function myFunctionName(){
if(document.getElementById('agreecheckbox').checked == true){
document.getElementById('agreecheckbox').checked = '';
var field= document.getElementById('textbox1');
field.value= field.defaultValue;
var field= document.getElementById('textbox2');
field.value= field.defaultValue;
}}
HTML
<form id="formName" method="post">
<button onclick="myFunctionName();" type="button" id="reset">reset</button>
<input type="checkbox" checked="" id="agreecheckbox">
</form>
Try doing like this
document.getElementById("agreecheckbox").checked = false;
This is a simple example to reset checkbox with jquery.
This Solutions checks if the id reset has been clicked, if so removes the checked attribute from the checkbox id.
$(function(){
$("#reset").click(function(){
$("#chkbox").removeAttr('checked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="reset">reset</button>
<input id=chkbox type=checkbox checked>
try changing to
var field= document.getElementById('agreecheckbox');
field.checked= false;
We are setting the checkbox property checked to false.
If you want to change it to true, you can set field.checked=true;
document.getElementById('reset').onclick= function() {
var field= document.getElementById('agreecheckbox');
field.checked= field.defaultValue;
};
<input id="agreecheckbox" type="checkbox">
<button id="reset">reset</button>
Related
I am trying to change a part of my html code with JavaScript, but I can't get it to work:
function trigger(){
document.getElementById('mycheckbox').innerHTML="<input type="checkbox" id="mycheckbox" checked>";
}
function triggerOff(){
document.getElementById('mycheckbox').innerHTML="<input type="checkbox" id="mycheckbox">";
}
<input type="checkbox" id="mycheckbox">
<button type="button" onclick="trigger()">test</button>
<button type="button" onclick="triggerOff()">test</button>
So if I press the button I want to add the checked status to my HTML and if I press the other button I want to remove the checked status.
Is this even possible?
All help is highly appreciated ! Thanks a lot guys!
You cannot set innerHTML to input type checkbox. Use the checked property to check/uncheck the checkbox
function trigger(){
document.getElementById('mycheckbox').checked = true;
}
function triggerOff(){
document.getElementById('mycheckbox').checked = false;
}
<input type="checkbox" id="mycheckbox">
<button type="button" onclick="trigger()">test</button>
<button type="button" onclick="triggerOff()">test</button>
Use checked property, like this:
function trigger(){
document.getElementById('mycheckbox').checked=true;
}
function triggerOff(){
document.getElementById('mycheckbox').checked=false;
}
<input type="checkbox" id="mycheckbox">
<button type="button" onclick="trigger()">test</button>
<button type="button" onclick="triggerOff()">test</button>
Just do it like that
function trigger(){
document.getElementById('mycheckbox').checked = true;
}
function triggerOff(){
document.getElementById('mycheckbox').checked = false;
}
The innerHTML property will create inside your mycheckbox another input element
In my HTML code I have
<form id="approve">
<input name="myDate" id="monthYearPicker" />
<button type="button"onclick="monthlytimesheets()">Submit</button>
</form>
In my Javascript file I have the following:-
function monthlytimesheets() {
$.post('http://localhost:8000/timer/monthly_timesheet/',
function(returnedData) {
for(i=0;i<returnedData.length;i++) {
for(j=i+1;j<returnedData.length;j++) {
if(returnedData[i]['id']==returnedData[j]['id']) {
returnedData.splice(j,1)
}
}
}
});
Now i want my returnedData[i]['full_name'] rendered on html page as radio buttons. How can i do that. How do you dynamically create radio buttons from JS? Also can i assign values to these radio buttons?
you can create radio buttons easily using jquery as you want. I wrote a code to show how to create radio button dynamically. automatically and when a button clicked.change the inside conditions as your needs. try below code.
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<!-- Example one , add radio button using jquery automatically-->
<h1>Example one , add radio button using jquery automatically</h1>
<form id="approve">
<input name="myDate" id="monthYearPicker" />
<div class="lastone"></div>
</form>
<br><br><hr>
<!-- Example two, add radio button using jquery when button click-->
<h1>Example two, add radio button using jquery when button click-</h1>
<form id="approveone">
<input name="myDate" id="monthYearPicker" />
<div class="lasttwo"></div>
<input type="button" id="addradio" value="submit">
</form>
</body>
<script type="text/javascript">
$(document).ready(function(){
for(var i=0;i<5;i++)
{
var labelname = "radio button"+i;
var value = i;
var create = $('<input type="radio" value="'+value+'"><label>'+labelname+'</label><br>');
$(".lastone").append(create);
}
});
$(document).ready(function(){
$("#addradio").click(function(){
for(var i=0;i<9;i++)
{
var labelname = "radio button"+i;
var value = i;
var create = $('<input type="radio" value="'+value+'"><label>'+labelname+'</label><br>');
$(".lasttwo").append(create);
}
});
});
</script>
</html>
You can create elements dynamically like this
var content = document.createElement('div');
var newElement = document.createElement('input');
newElement.setAttribute('type', 'radio');
newElement.value = "Your value"; ///Here you can assigned value to the radio button
content.appendChild(newElement);
Create a function that returns a radio element. Similar question was already asked.
It can be found here: How do you dynamically create a radio button in Javascript that works in all browsers?
function createRadioElement(name, checked) {
var radioHtml = '<input type="radio" name="' + name + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
var radioFragment = document.createElement('div');
radioFragment.innerHTML = radioHtml;
return radioFragment.firstChild;
}
Note that this is the snipped from the answer of the posted link, published by Prestaul.
Would have postet it as comment, but need 50rep to comment...
function monthlytimesheets()
{
var name = $('#monthYearPicker').val();
$('#approve').append('<input type="radio" />'+name);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="approve">
<input name="myDate" id="monthYearPicker" />
<button type="button"onclick="monthlytimesheets()">Submit</button>
</form>
I simply want to have a textbox on my webpage, using the HTML form, and input tags, and be able to have the inputted value be used by the Javascript on the page. My HTML looks like this:
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
</div>
and the Javascript I'm trying to use looks like this:
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice);
}
However, all I see on the webpage, underneath the textbox, is "[object HTMLInputElement]". What do I do to get this to work right?
Thanks
here's an example with change event listener for firing a function when there's a change in form
var div = document.querySelector('div');
var topMenuChoice = document.getElementById("firstinput");
topMenuChoice.addEventListener('change',function(e){
div.innerHTML = e.target.value/***e.target.value is your input***/
var divInner = div.innerHTML;
setTimeout(function(){
document.write(divInner);
},2000)
})
<form id="firstbox">Choice:
<input id="firstinput" type="text" name="choice" value=66>
</form>
<div>look here!!</div>
Check this !
document.write(document.forms['firstbox'].firstinput.value);
OR
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice.value);
}
See http://www.w3schools.com/jsref/prop_text_value.asp
var htmlInputElementObjet = document.getElementById("firstinput");
document.write(htmlInputElementObjet.value);
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice" value="initial value">
</form>
</div>
If you want to get the text typed in your input you need to use the value property of the element. You can also use another HTML tag to show the results (avoid using document.write):
HTML
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
<div id="result"></div>
</div>
JS
var topMenuChoice = document.getElementById("firstinput");
document.getElementById("result").innerHTML = topMenuChoice.value;
You have to consider the usage of an event (click, keypress) to control the exactly moment to retrieve the input value.
JS
document.getElementById('firstinput').addEventListener('keypress', function(e) {
if(e.which == 13) { //detect enter key pressed
e.preventDefault();
document.getElementById('result').innerHTML = this.value;
}
});
use the value property
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice).value;
}
I am using the following js code to disable the form submit button until at least one checkbox selection is checked.
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
The problem is the code doesn't work when the page first loads. When the user first comes to the page, he is able to click submit but if he checks something and then unchecks everything the submit is then disabled.
It looks like I need the code to start when the page first loads. Any suggestions?
Add submitButt.attr("disabled", !checkboxes.is(":checked")); to disable the the submit button at first. Also, better wrap it in either domready or onload to ensure jQuery can access the fully rendered DOM.
$(function() {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
// Add this line to set init status of the submit.
// submitButt.attr("disabled", true)); is ok as you don't have any checked checkbox when page loaded.
submitButt.attr("disabled", !checkboxes.is(":checked"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="checkbox" id="c1"/ >c1
<input type="checkbox" id="c2"/ >c2
<input type="checkbox" id="c3"/ >c3
<input type="submit" value="click" />
Since you are using jQuery use its ready function:
$(document).ready(function(){
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
});
That way code gets only executed when the page is loaded and jQuery is ready. So click handlers can be set upon checkboxes that actually exist.
2 options: 1) add in your html code the attribute "disabled"; 2) Use this code
document.addEventListener("DOMContentLoaded", function(event) {
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
});
You can use the following:
window.onload = function () {
submitButt.attr("disabled", !checkboxes.is(":checked"));
}
... and externalize the content into a function which is called for onload and for checkboxes.click.
Just create a function and call it on page load and on click of checkbook.
Note : you can change function name.
Please check below code snippet :
var checkboxes = $("input[type='checkbox']");
var submitButt = $("input[type='submit']");
var onloadCheckboxesCheck = function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
}
onloadCheckboxesCheck();
checkboxes.click(function() {
onloadCheckboxesCheck();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="lname">
<input type="checkbox" name="lname">
<input type="checkbox" name="lname">
<input type="checkbox" name="lname">
<input type="submit" value="Submit">
All you need is to trigger event:
$(function() {
$('input[type=checkbox]').on('change', function(e) {
$('input[type=submit]').prop('disabled', 0 === $('input[type=checkbox]:checked').length);
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="submit" />
.trigger('change') will fire change event on the checkbox.
$('input[type=checkbox]:checked') will give you list of checked, check-boxes
HTML:
<form id="myForm" >
<input id="oknovo" type="submit" value="OK & Novo" />
<input id="okfechar" type="submit" value="OK & Fechar" />
</form>
JS:
$("#myForm").submit(function(event){
var botao=$("input[type=submit][clicked=true]").id;
alert(botao);
});
How do I identify which of the buttons was clicked to submit the form?
I've also checked this
And tried this:
var botao=$("input[type=submit][clicked=true]").val();
But I always get "undefined".
Try this:
var buttonID;
$("#myForm input[type=submit]").on('click', function() {
buttonID = $(this).attr('id');
});
Update:
I've updated your code and added a little example here. Seems to work ok now.
Try this:
$("input[type=submit]").click(function(event){
alert($(this).attr('id'));
});
A form is submitted, when you click the input type="submit"
Here is the Fiddle
You can use .prop() to get the id of clicked element
Try this:
$("input[type=submit]").click(function(event){
alert($(this).prop('id'));
});