Clear specific input fields with jQuery - javascript

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>

Related

How to work multi input fields at once

I would like to disabled onchange by only defal4-disabl except (defalt1enabl,defalt2enabl,defal31enabl).
And work (enabled/disabled) both input fields at once?
Can any expert provide me modified Fiddle?
Here's your updated fiddle: http://fiddle.jshell.net/rbwtq/348/
This HTML:
<input name="test" type="text" id="disabled_input"/>
<br /><br />
<input name="test" type="text" id="disabled_input"/>
is changed to:
<input name="test" type="text" class="disabled_input"/>
<br /><br />
<input name="test" type="text" class="disabled_input"/>
And this JavaScript:
var defalt1enabl = $(this).val();
if(defalt1enabl == "defalt1enabl"){
$('#disabled_input').removeAttr('disabled');
}
else{
$('#disabled_input').attr('disabled','disabled');
}
is changed to this:
var selectedOption = $(this).val();
if(selectedOption == "defalt4-disabl"){
$('.disabled_input').attr('disabled','disabled');
}
else{
$('.disabled_input').removeAttr('disabled');
}
Please replace your piece of code as provided below.
For HTML:
<input name="test" type="text" class="disabled_input"/>
<br /><br />
<input name="test" type="text" class="disabled_input"/>
For Script:
$(document).ready(function() {
$('.disabled_input').attr('enabled','enabled');
$('select[name="facility"]').on('change',function(){
var defalt1enabl = $(this).val();
if(defalt1enabl == "defalt1enabl"){
$('.disabled_input').removeAttr('disabled');
}
else{
$('.disabled_input').attr('disabled','disabled');
}
});
});

How can i enable checkbox by clicking Reset button in 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/

How do I get text/html between consecutive <input>s?

Since input tags aren't supposed to have closing tags, is there a simple way to extract the text/HTML in between a series of input tags? For example, for the below I want to retrieve <b>Bob and Tim</b><br>Tim <i>after</i> Bob<br>.
<div id="inputs">
<input type="text" value="bob" size="4" />
<b>Bob and Tim</b><br>
<input type="text" value="tim" size="4" />
Tim <i>after</i> Bob<br>
<input type="button" value="get textbox values" id="mybutton" />
</div>​
http://jsfiddle.net/gLEZd/5/
I can get the textbox's values, but how do I accomplish the above?
With a minor markup change you can do it easily,
HTML:
<div id="inputs">
<input type="text" value="bob" id="bob" size="4" />
<label for="bob"><b>Bob and Tim</b><br></label>
<input type="text" value="tim" id="tim" size="4" />
<label for="tim">Tim <i>after</i> Bob<br></label>
<input type="button" value="get textbox values" id="mybutton" />
</div>
JS:
$("#mybutton").click( function() {
$.each($('input[type="text"]'), function() {
alert($('label[for=' + this.id + ']').text());
});
});
DEMO
Incase if you don't like label tags, then simply wrap the contents inside a span like below,
<div id="inputs">
<input type="text" value="bob" id="bob" size="4" />
<span><b>Bob and Tim</b><br></span>
<input type="text" value="tim" id="tim" size="4" />
<span>Tim <i>after</i> Bob<br></span>
<input type="button" value="get textbox values" id="mybutton" />
</div>
And in JS,
$("#mybutton").click( function() {
$.each($('input[type="text"]'), function() {
alert($(this).next().text());
});
});
DEMO
already more or less available in the fiddle and stated in the comment. but here also the code for the others directly with a small explanation:
$("#mybutton").click( function() {
var tempContainer = $("#inputs").clone();
tempContainer.find("input").remove();
alert(tempContainer[0].innerHTML);
});​
this way the container is cloned and then the inputs get removed from the cloned container... in the end we have an innerHTML without the inputs
Not sure if this is desirable, but you can strip down to text like this:
alert ( $('#inputs').unwrap().text() );
This will also strip your <b></b> and other tags though.
$("#mybutton").click( function() {
var x = $('div#inputs :not(:input)');
$.each(x, function() {
console.log(this.innerHTML);
});
});
UPDATE
$("#mybutton").click( function() {
var x = $('div#inputs :not(:input)').filter(function() {
return this.toString();
});
console.log(x); // x is the array of DOM Object
});
Ideally, if the information is linked to the input element, you should be using <label for="">. Then you could easily access the value which is associated:
<div id="inputs">
<input id="input1" type="text" value="bob" size="4" />
<label for="input1"><b>Bob and Tim</b><br></label>
<input id="input2" type="text" value="tim" size="4" />
<label for="input2 ">Tim <i>after</i> Bob<br></label>
<input type="button" value="get textbox values" id="mybutton" />
</div>
Either:
$("#mybutton").click( function() {
$.each($('input[type="text"]'), function() {
alert($(this).next('label').text());
});
});
Or:
$("#mybutton").click( function() {
$.each($('input[type="text"]'), function() {
alert($('label[for='+this.id+']').text());
});
});

Get nested element value

i have the html:
<div>
<label>
<input type='radio' name='a'>
<span></span>
<input type='hidden' value='1'>
</label>
<label>...
</div>
I need to get value of hidden input by click event on label.
I have javascript like this:
$('label').live('click', function () {
var value = $(this).children('input:hidden').val();
});
But this is not work. Can anybody help?
Works fine:
<div>
<label>
<input type='radio' name='a'>
<span></span>
<input type='hidden' value='1'>
</label>
</div>
<script type="text/javascript">
$('label').live('click', function () {
var value = $(this).children('input:hidden').val();
console.log(value);
});
</script>
Output: 1
First, unless you absolutely have to, you should avoid live() function. Depending on jQuery version, use bind(), click() or on()
But your code works fine, see this Fiddle.
<form action="form_action.asp" method="get">
Email: <input type="text" name="email" /><br />
<input type="hidden" name="country" value="Norway" />
<input type="submit" value="Submit" />
</form>
$(function() {
$('label').on('click', function () {
var value = $(this).children('input:hidden').val();
});
});

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