We Keep Coding

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>

How to get last focused field?

This is my HTML code :
<input type="button" value="1000" onclick="myFunc(this.value)" />
<input type="button" value="2000" onclick="myFunc(this.value)" />
<input type="button" value="3000" onclick="myFunc(this.value)" />
<input type="button" value="4000" onclick="myFunc(this.value)" />
<input type="textbox" value="0" name="myTextbox1" />
<input type="textbox" value="0" name="myTextbox2" />
and here is JS :
function myFunc(value){
if($('[name=myTextbox1]').is(':focus')){
var prevVal = $('[name=myTextbox1]').val();
$('[name=myTextbox1]').val(parseInt(prevVal) + parseInt(value));
$('[name=myTextbox1]').focus();
}else if($('[name=myTextbox2]').is(':focus')){
var prevVal = $('[name=myTextbox2]').val();
$('[name=myTextbox2]').val(parseInt(prevVal) + parseInt(value));
$('[name=myTextbox2]').focus();
}
}
I need to add clicked buttons value to focused textbox value.
When i click button the focus is on button, so can i get last focused textbox?
Thank you ..

var lastFocused = null;
<input type="textbox"
value="0"
name="myTextbox2"
onfocus="lastFocused=this;"/>
I apologize if there are syntax errors, I'm submitting this from my phone, so I do not have a good way to test it.

Create a variable for lastFocused and set it in an onFocus event handler for each text box

<input type="textbox" value="1" class="is_focus"/>
<input type="textbox" value="2" class="is_focus"/>
<input type="textbox" value="3" class="is_focus"/>
<button class="get_data">Click</button>
$(function() {
var focus_variable = null;
$('body').on('focus', '.is_focus', function(e) {
focus_variable = $(this);
});
$('body').on('click', '.get_data', function(e) {
var focus_data = focus_variable.val();
console.log(focus_data);
});
});

JQUERY: Change value from text input having a checkbox selected

I need to change the value of a text input only if a checkbox is selected. Both inputs (text and checkbox) have the same class:
<label for="text_to_apply">Write your text: </label>
<input type="text" id="text_to_apply" name="text_to_apply" value="">
<button type="button" id="btn_apply">Change</button>
<form id="theform">
<input type="text" value="1" id="one1" class="one"><input type="checkbox" id="one1_" class="one"><br>
<input type="text" value="1" id="one2" class="one"><input type="checkbox" id="one2_" class="one"><br>
<input type="text" value="1" id="one3" class="one"><input type="checkbox" id="one3_" class="one"><br>
<input type="text" value="1" id="one4" class="one"><input type="checkbox" id="one4_" class="one"><br>
<input type="text" value="2" id="two1" class="two"><input type="checkbox" id="two1_" class="two"><br>
</form>
</div>
<script>
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('.one input:checked')) {
$('#theform').find('.one:text').attr('value', mytext);
}
});
</script>
</body>
I am running out of ideas. Please Help!
Thanks!!

If I got your question right - it will look like this:
$('#btn_apply').click(function() {
if ($('#yourCheckboxId').is(':checked')){
$('#inputId').val('some text you want');
}
});
Here is fiddle http://jsfiddle.net/Goodluck/2XBcK/

Try
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
$('#theform').find('input:checked').each(function(){
$(this).prev().val(mytext);
});
});
DEMO

There is no :text in jQuery that I'm aware of. Presuming your HTML stays the same, you can use the .prev() method to target the input before each input:checked.
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('input:checked')) {
$('#theform').find('input:checked').prev('input').attr('value', mytext);
}
});
Fiddle: http://jsfiddle.net/willthemoor/5qmH8/

Prevent tab text highlight / disable tab text selection

Here's a sample form:
<form action="#" method="post">
Name:<br />
<input type="text" name="name" value="your name" /><br />
E-mail:<br />
<input type="text" name="mail" value="your email" /><br />
<input type="submit" value="Send">
</form>
When you tab to a text input, the value gets highlighted. How can it be disabled?
Any help is appreciated!
Mike

var $yourInput;
$yourInput = $("#your_input");
setTimeout(function() {
return $yourInput.selectRange($yourInput.val().length, $yourInput.val().length);
}, 10);
selectRange function you can find here: jQuery Set Cursor Position in Text Area

Hello here is the solution. Dirty one:
html:
<input type="text" id="a" />
<input type="text" id="b" />
Javascript:
$("input").focus(function(){
if($(this).val() != ""){
var elm = $(this);
var val = elm.val();
setTimeout(function(){elm.val(val);},1);
}
});
Demo: http://jsfiddle.net/naveed_ahmad/S2UPs/

This is working, at least in Firefox. It triggers the "End" key:
$('input[type=text]').bind('focus',function(){
var e = jQuery.Event("keydown");
e.which = 35; // # key code for end key
$("input[type=text]").trigger(e);
return false;
});

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" />