Is it possible using jQuery to get whole div content(dynamically generated elements) with values? For example, child element may be a div, span, select, or input?
I am trying to save whole div content(generated on fly) with values as .html file. I tried with one div which has form and input elements.
HTML:
<div id="inputs">
<form class="mainForm">
<div style="height: 100%;" id="div1">
<label>Input1</label>
<input type="text" id="input1" name="input1"/>
</div>
</form>
</div>
<input id="addform" type="button" value="Click to add Input"/>
<input id="getform" type="button" value="Click to get html"/>
jQuery:
$(document).ready(function(){
$("input#addform").click(function(){
$("div#inputs").append($('form.mainForm').clone().html());
});
$("input#getform").click(function(){
alert($("div#inputs").clone().html());
});
});
FIDDLE:
http://jsfiddle.net/UhJfn/
How to get whole div#inputs content with values (entered by user) On click of Click to get html button?
Help would be appreciated.
P.S: Here I used only one input in form. But in my real case, we do have select, span, image, etc.
Try this,
You have to explicitly update the value attribute to achieve your need.
$(document).ready(function(){
$(document).on('keyup','input[type="text"]',function(){
$(this).attr('value',$(this).val());
});
$("input#addform").click(function(){
$("div#inputs").append($('form.mainForm').clone().html());
});
$("input#getform").click(function(){
alert($("div#inputs").clone().html());
});
});
DEMO
Related
I wanted to know how to display a value entered inside a textbox into a label by using the onkeyup method.
I am able to display it inside a textbox.
This is what i have done so far:
<script>
function multiply(value){
var x;
x= 2*value;
document.getElementById('out2x').value=x;
}
</script>
<body>
<div style="margin:auto; width:300px; background-color:lightblue; padding:5px;">
<label for="">Input</label>
<input type="text" name="" onkeyup="multiply(this.value);">
<br>
<label for="">Result(x2):</label>
<input type="text" id="out2x" name="" readonly>
</div>
</body>
I tried to set the id 'out2x' to label but it doesn't work.
Where do you actually have the script in the document? It should be just before the CLOSING body tag so that by the time it's reached, all the HTML will have been parsed. If the script runs before the HTML is parsed, your document.getElementById() statement won't find a matching element.
Also, the value of the input is always a string. You must convert that to a number in order to do math with it. There are several ways to do this and you need to be prepared for situations where the input incorrectly has a non-numeric value in it, but below, I've converted the value by prepending a + to it.
A couple of other things....
You are not using the label element properly. The for attribute must have a value that matches the id attribute value of the form element the label is "for" or you can nest the form element within the label so that it knows what element it relates to.
Don't use inline JavaScript - separate it into the JavaScript code.
<body>
<div style="margin:auto; width:300px; background-color:lightblue; padding:5px;">
<label>Input
<input type="text">
</label>
<br>
<!-- Not always best to use an input for output. -->
<span>Result(x2):
<span id="out2x"></span>
</span>
</div>
<!-- Place your script just before the closing body tag
so that by the time it's reached, all the HTML elements
will have been parsed. -->
<script>
// Do your event handling in JavaScript, not with inline JavaScript
document.querySelector("input").addEventListener("keyup", function(event){
// You must convert the input string to a number
document.getElementById('out2x').textContent = 2* +this.value;
});
</script>
</body>
In Your Case, I have a simple Keyup with jQuery like this
$('#value').keyup(function (){
$('#copy-value').val($(this).val());
});
So This Snippet for Example:
$('#value').keyup(function (){
$('#copy-value').val($(this).val());
});
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="margin:auto; width:300px; background-color:lightblue; padding:5px;">
<label for="">Input</label>
<input id="value" type="text" name="">
<br>
<label for="">Result(x2):</label>
<input id="copy-value" type="text" name="" readonly>
</div>
</body>
I have a small problem with a script that I want to find and show different divs depending on a search. The original script is something I found and used for a contact list, and that I now want to configure to do something else.
Original code (JSFiddle)
My edited code:
$('.Fruit').hide();
$('#search').click(function() {
$('.Fruit').hide();
var txt = $('#search-criteria').val();
$('.Fruit').each(function() {
if ($(this).id.toUpperCase().indexOf(txt.toUpperCase()) != -1) {
$(this).show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div class="Fruit" id="Apple">
<h3>Some text about apples</h3>
</div>
<div class="Fruit" id="Orange">
<h3>Some text about oranges</h3>
</div>
I don't know if you understand what I'm trying to achieve...? I have, in this case, two divs - Apple and Orange. By default both are hidden, but if I enter Apple for instance in the search field and push the search button, the div "Apple" will show, and if I instead search for "Orange" then obviously I want the "Orange" div to show. If I search for anything else nothing will show, as long as there's not a div with an id that matches the searchword.
So basically I'm trying to build a database of preloaded content that can be searched and shown on the fly without reloading the page.
The error is, as far as I can understand, when I try to address and compare the divs id with the searchword on row 6 in the JS. Does anyone know how to do this, and make this work? Or does anyone have another solution that can perform this task?
The issue is because jQuery objects do not have an id property. You need to use prop('id') or just this.id.
Also note that you can improve your logic by making the id attributes you match with lower case, then convert the input to lower case, then you can just use a normal selector, like this:
$('#search').click(function() {
var txt = $('#search-criteria').val();
if (txt)
$('.fruit').hide().filter('#' + txt.toLowerCase()).show();
});
.fruit {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div class="fruit" id="apple">
<h3>Some text about apples</h3>
</div>
<div class="fruit" id="orange">
<h3>Some text about oranges</h3>
</div>
I am adding some dynamic input controls via Jquery, I append them in the form, its working fine.
But these input controls are part of popup which I show using LightBox_me.js and when ever I open the hidden div with lihgtbox_me.js it puts these controls at the end of body tag and out of the form. Due to which data in these input controls are not being submitted with from.
Here is the html
<div id="attach" style="display:none" class="srpopup">
<input type="text" name="attach_name" id="sr1_name" />
<input type="text" name="attach_serial" id="sr1_serial" />
</div>
here is how i am showing the div as popup using lightbox_me.js
function showAttachment(){
$('#attach').lightbox_me({
centered: true,
onLoad: function() {
}
});
}
Your question is not clear enough. Any way I can't figure out where is your form start! Try to push your form inside the hidden div like below.
<div id="attach" style="display:none" class="srpopup">
<form>
<input type="text" name="attach_name" id="sr1_name" />
<input type="text" name="attach_serial" id="sr1_serial" />
</form>
</div>
Background:
I've got a set of input elements form invoice item details. I want a user to be able to add rows of input fields for each additional item.
Input Markup
<div class="input-row">
<div class="form-group">
<label for="item_name">Item:</label>
<div>
<input type="text" name="item_name[]" placeholder="Name">
</div>
<div>
<input type="text" name="item_qty[]" placeholder="Quantity">
</div>
<div>
<input type="text" name="item_price[]" placeholder="Price">
</div>
<div>
<input type="text" name="item_total[]" placeholder="Total">
</div>
</div>
</div>
And a button to add an additional item
Button Markup
<div class="col-lg-2">
<a id="add-item" href="#">Add Item</a>
</div>
Button Javascript
$('#add-item').click(function(){
$('.input-row:first').clone().appendTo('.input-row:last');
})
Problem:
When I click the add button the first time, it works fine and adds a row of input fields after the first one, however if I click it again it adds 2 rows and then click it again it adds 4 rows. I realise this may be because the cloned .input-row div is being included in the clone, but I'm trying to only copy the first div element using the :first selector. Any ideas how to resolve this?
Question
How can I ensure only one div is appended to the markup.
The best solution I've seen so far is the following jQuery Library:
http://www.andresvidal.com/labs/relcopy.html
Solution
The jQuery appendTo method adds the element into the existing div, meaning when you clone it the second time the div contains two rows of input fields and then the third time will contain 4 rows of input fields.
To overcome this use the insertAfter() method
Button Javascript
$('#add-item').click(function(){
$('.input-row:first').clone().insertAfter('.input-row:last');
})
This is a form validation for jquery:
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
I need something like that but the tips has to appear when I select the input text form by clicking on it and has to dissapear when I select another input text form.
Is there a way to do this with jquery, mootools, scriptaculus or any other library ?
Thanks ^_^
In jquery, I'd do something like this:
$('input').focus(function(){
$(this).sibling('div.form_tooltip').show();
});
$('input').blur(function(){
$(this).sibling('div.form_tooltip').hide();
});
corresponding html:
<div class="form_input">
<label for="..">label</label>
<input type="text" name="" id="" value="" />
<div class="form_tooltip" style="display: none;">
Here goes the html that appears in the tooltip, you probably want this div to be positioned relatively to the div.form_input.
</div>
</div>