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());
});
});
Related
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>
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/
The problem: I have a page with many <input> fields (just say all are text fields)
I would like to have a button, when click on it, all input fields will become plaintext only.
e.g. <input type="text" value="123" /> becomes 123
and if I click on another button, the text will change back to
e.g. 123 becomes <input type="text" value="123" />
Is there an automatic way to scan for all the <input>s and change them all at once using javascript and jquery.
Thank you!
Edited
Seems you guys are getting the wrong idea.
Read what I have written again: e.g. <input type="text" value="123" /> becomes 123
I have value="123" already, why would I want to set the value again???
What I want is e.g.
<body><input type="text" value="123" /><input type="text" value="456" /></body> becomes <body>123456</body> and later <body>123456</body> back to <body><input type="text" value="123" /><input type="text" value="456" /></body>
Use this to go one way,
$('input').replaceWith(function(){
return $('<div />').text(this.value).addClass('plain-text');
});
and this to go the other.
$('.plain-text').replaceWith(function(){
return $('<input />').val($(this).text());
});
Check this link http://jsfiddle.net/Evmkf/2/
HTML:
<div id='divInput'>
<input type="text" value='123' />
<br/>
<input type="text" value='456' />
<br/>
<input type="text" value='789' />
</div>
<div id='plainText' style='display:none'></div>
<div>
<input type="button" id='btnPlain' value='Make It Plain' />
<input type="button" id='btnInput' value='Make It Text' />
</div>
Javascript:
$("#btnPlain").bind('click',function(){
$("#plainText").html('');
$("#divInput input[type=text]").each(function(index){
$("#plainText").append('<span>'+$(this).val()+'</span>');
$("#divInput").hide();
$("#plainText").show();
});
});
$("#btnInput").bind('click',function(){
$("#divInput").html('');
$("#plainText span").each(function(index){
$("#divInput").append('<input type="text" value="'+$(this).text()+'"/><br/>');
$("#plainText").hide();
$("#divInput").show();
});
});
Try this FIDDLE
$(function() {
var arr = [];
$('#btn').on('click', function() {
var $text = $('#inp input[type="text"]');
if( $text.length > 0){
$text.each(function(i) {
arr[i] = this.value;
});
$('#inp').html(arr.join());
}
else{
if(arr.length <= 0){
}
else{ // Add Inputs here
var html = '';
$.each(arr, function(i){
html += '<input type="text" value="' + arr[i]+ '"/>'
});
$('#inp').html(html);
}
}
});
});
You need to create a hidden element for each input, then use jquery to hide the input, show the hidden element and give it the inputs value.
<input type="text" value="123" id="input_1" />
<div id="div_1" style="display:none;"></div>
$("#div_1").html($("input_1").val());
$("#input_1").hide();
$("#div_1").show();
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();
});
});
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" />