How can i enable checkbox by clicking Reset button in Javascript? - javascript

Hi i'm new to JS and i'm trying to do a BMI(Body/Mass Index) calculator for my website.
What i want to do is when a user clicks to Temizle(Reset) button disabled checkbox should be usable again. I wrote a function which is called "temizle" but it didn't work. I want to know 2 things for the solution.
If there is a easy way to do what i ask, please tell me.
If there is not, how should i change my code?
<html>
<head>
<script language="JavaScript">
<!--
function temizle(){
if(document.getElementById('e').disable=true)
{
document.getElementById('e').disable=false
}
if(document.getElementById('k').disable=true)
{
document.getElementById('k').disable=false
}
}
//-->
</script>
</head>
<body>
<form name="bmiForm">
Cinsiyetiniz: Erkek<input type="checkbox" id="e" name="erkek" onclick="if (this.checked) document.getElementById('k').disabled=true; else document.getElementById('k').disabled = false;"/> Kadın<input type="checkbox" id="k" name="kadın" onclick="if (this.checked) document.getElementById('e').disabled=true; else document.getElementById('e').disabled = false;"/><br />
Kilonuz(kg): <input type="text" name="kilo" size="10" /> Örn:75<br />
Boyunuz(cm): <input type="text" name="boy" size="10" /> Örn:183<br />
<input type="button" value="Kütle/Vücut İndeksi Hesapla" onClick="bmihesaplama()" /><br />
Kütle/Vücut İndeksiniz(BMI): <input type="text" name="bmi" size="10" /><br />
Bunun Anlamı: <input type="text" name="sonuc" size="45" /><br />
<input type="reset" value="Temizle" onclick="temizle()" />
</form>
</body>
</html>
Thx for your help.

You've typed disable as the property, but it's disabled. You need to change that; it's important.
if(document.getElementById('k').disable=true)
Should also be changed; this is an assignment. You could use ==, but you can also just do:
if (document.getElementById('k').disabled)
http://jsfiddle.net/ExplosionPIlls/3AMtG/2/

Related

Clear specific input fields with jQuery

I am trying to clear certain fields in my form.
I have used the following jQuery code, but they do not work for me:
My HTML
<section id="clear-section" class="clear-section">
<a id="clear-link" href="javascript:void(0)">Clear</a>
</section>
jQuery Code 1
let clearLink = $("#clear-link");
clearLink.on("click", function () {
$("#calc-form-section-1")
.find('input[type="text"],input[type="number"]')
.each(function () {
$(this).val("");
});
});
jQuery Code 2
clearLink.on("click", function () {
let fieldsArray = [
totalHomeSqftInput,
calcRoofSqftInput,
annualKwInput,
calcKwInput,
systemSizeInput,
roofCompInput,
pwrWallBattInput,
totalCostInput,
roofPriceBeforeItc,
estTotalBeforeItc,
estItc,
pwrWallPriceBeforeItc,
];
$.forEach(fieldsArray, function () {
$(this).trigger("reset");
});
});
Any help would be greatly appreciated.
Thank you
One approach would be to label the input elements that you wish to clear with a data-clear attribute. You can use a selector to search for these input values and clear them using an each call.
See demo:
$("#clear-link").on("click", function(e) {
$("#calc-form-section-1 input[data-clear='true']").each(function(i) {
$(this).val("");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="clear-section" class="clear-section">
<form id="calc-form-section-1">
<input type="text" data-clear="true" id="totalHomeSqftInput" value="abc" /><br />
<input type="text" data-clear="true" id="calcRoofSqftInput" value="abc" /><br />
<input type="text" data-clear="true" id="annualKwInput" value="abc" /><br />
<input type="text" data-clear="true" id="calcKwInput" value="abc" /><br />
<input type="text" data-clear="true" id="systemSizeInput" value="abc" /><br />
<input type="text" id="other" value="abc" /><br />
<a id="clear-link" href="javascript:void(0)">Clear</a>
</form>
</section>

In which TextBox is the cursor.?

I have 4 textboxes and a submit button in my web page.
Suppose the user enters data in 2 fields and then clicks the submit button.
I now want to know in which textbox the cursor was located just before the submit button was clicked.
Any idea on how to do this in Javascript?
You're looking for document.activeElement, which returns the currently focused element.
Your question does specifically say in javascript, but FWIW here is another option in jQuery:
Working jsFiddle here
HTML:
<input id="in1" type="text" /><br />
<input id="in2" type="text" /><br />
<input id="in3" type="text" /><br />
<input id="in4" type="text" /><br />
<input type="button" id="mybutt" value="Submit" />
jQuery:
var inFocus = false;
$('input, textarea').focus(function() {
inFocus = $(this).attr('id');
});
$('#mybutt').click(function() {
alert('Cursor was last in element id: ' + inFocus);
});
you can use document.activeElement
here is the simple example for the same.
<head>
<script type="text/javascript">
function GetActive () {
if (document.activeElement) {
var output = document.getElementById ("output");
output.innerHTML = document.activeElement.tagName;
}
}
</script>
</head>
<body onclick="GetActive ();">
Click anywhere on the page to get the active element
<input id="myInput" value="input field" />
<button>Sample button</button>
<div id="output"></div>
</body>

Get the value from input using JavaScript

I have a form with an input textbox and a button. When I click on a button I want to go to a different page depending on the value of the input textbox. For example:
<form name="frm1" id="frm1" action="page.php">
<input type="text" name="txt_name" id="txt_name" value="simple text" />
<input type="button" Onclick="redirect_to('page2.php/?id=8&input=this.txt_name.value')" value="Save" />
</form>
How can I get this value? Can this be done without using a function?
Well I would recommend a function for following reasons:
Cleaner code.
Better way if you have multiple buttons.
Less code.
Better manageability.
Add this to your buttons
onclick="redirect('mytextbox.value');";
Add this to your markup inside <head>(just few lines of code):
<script type="text/javascript">
function redirect(value){
window.location="page.php/?id=8&input="+value.ToString();
}
</script>
Why wouldn't you just do this?
<form name="frm1" id="frm1" action="page2.php">
<input type="hidden" value="8" name="id" />
<input type="text" name="txt_name" id="txt_name" value="simple text" />
<input type="submit" value="Save" />
</form>
if you have something like :
<form>
<input type="text" name="formelem" />
<input type="button" />
</form>
you can put to the button :
onclick="redirect_to('page.php/?id=8&input='+this.form.formelem.value)"
you are on the button, so "this" will be the button and you need to get the form from which you can get the input
another way ( if you don't need a form for another purpose ) would be to just put :
<input type="text" id="formelem" />
<input type="button" onclick="redirect_to('page.php/?id=8&input='+document.getElementById('formelem').value)" />
onclick="window.location.href = 'page.php/?id=8&input=' +this.value.toString()"

Making sure an input is of a certain type with jQuery.each()

I'm trying to loop over all inputs in my form that are either "text" or "file".
Here's my form markup:
<form action="" method="post" id="upload_form">
<p>
<label for="name">Skin name:</label><br />
<input type="text" name="name" />
</p>
<p>
<label for="desc">Skin description:</label><br />
<input type="text" name="desc" />
</p>
<p>
<label for="aname">Authors name:</label><br />
<input type="text" name="aname" />
</p>
<p>
<label for="aname">Skin image file:</label><br />
<input type="file" name="skin" />
</p>
<p>
<input type="submit" value="Upload" />
</p>
</form>
I basically want to check all of these inputs apart from the submit button. Here's my code so far:
$('#upload_form').submit(function(e) {
$('#upload_form input').each(function(index) {
if( this.type == "input" ) {
}
});
});
But it's wrong, I know. Can anyone tell me how to iterate over each input that is either a text or file input?
Thanks.
You can use the filter or the not selector to accomplish this.
I believe you could do this:
$('#upload_form').submit(function(e) {
$('#upload_form input').not(':submit').each(function(index) {
...
});
});
I think this would also work:
$('#upload_form').submit(function(e) {
$('#upload_form input').filter('[type=text], [type=file]').each(function(index) {
...
});
});
Use this.tagName It will give you the tag type as an uppercase string.

How to get innerhtml value in mozilla

I have below html code
<div id="divTest">
Hello
<input type="text" id="txtID" value="" />
<input type="button" onclick="getForm();" value="Click" />
</div>
And I have below javascript function to get innerHtml value
<script language="javascript" type="text/javascript">
function getForm()
{
var obj = document.getElementById('divTest');
alert(obj.innerHTML);
}
</script>
I am trying to get the complete innerHtml value. When user put some value in "txtId" and when he clicks on button it should show all the innerHtml with txtId value in it. It is working fine in Internet Explorer but failing in Mozilla.
Please suggest what type of changes I need to do in javascript function or I need some Jquery for this.
Thanks.
Best Regards,
I've run across this myself - try using obj.innerHtml (note capitalisation) instead.
I solved my problem by using below jQuery
<script type="text/javascript">
$(document).ready(function()
{
var oldHTML = $.fn.html;
$.fn.formhtml = function() {
if (arguments.length) return oldHTML.apply(this,arguments);
$("input,textarea,button", this).each(function() {
this.setAttribute('value',this.value);
});
$(":radio,:checkbox", this).each(function()
{
if (this.checked) this.setAttribute('checked', 'checked');
else this.removeAttribute('checked');
});
$("option", this).each(function()
{
if (this.selected) this.setAttribute('selected', 'selected');
else this.removeAttribute('selected');
});
return oldHTML.apply(this);
};
$.fn.html = $.fn.formhtml;
});
$(document).ready(function()
{
$('input[type=button]').click(function() {
alert($('#divTest').html());
});
});
</script>
and the html was as below:
<div id="divTest">
Hello
<input type="text" id="txtID" />
<input type="text" id="txtID" />
<input type="text" />
<input type="text" id="Text1" />
<input type="text" id="Text1" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" id="Text5" />
<input type="text" id="Text6" />
</div>
<input type="button" value="Click" />

Categories