I made a list of components that user can add/remove rows of input fields at liberty, so user can freely remove/add a row of data dynamically:
----|_||____| -remove button-
----|_||____| -remove button-
----|_||____| -remove button-
----|_||____| -remove button-
----Add button- ---- Save button ----
However, here comes a problem: the data is arranged in html arrays in order to get back to JSP/sevlet model, like thie
<input id="row[0]" .../>
<input id="row[1]" .../>
<input id="row[2]" .../>
......
<input id="row[n]" .../>
So when user remove a row, especially in the middle of the section, then the array sequence is definitely messed up because I just use basic jquery command to do the job:
if (confirm(message_confirm_delete)) {
j(this).parent().remove();
}
so the question is: what is the best way to re-arrange all of the input fields array, when user remove one of the array elements between?
If I'm understanding your question correctly, you're saying the ids on the input fields are inaccurate after removing one from the middle, correct? If that is the case, something like this will update the id attribute after an element is removed.
<div>
<input id="row[0]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
<input id="row[1]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
<input id="row[2]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
<input id="row[3]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
<input id="row[4]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
<input id="row[5]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<script>
$('button.remove').click(function() {
$(this).parent('div').remove();
$('input.removableInput').each(function(index) {
$(this).attr('id', 'row[' + index + ']');
});
});
</script>
Related
I want to get the specific input element on clicking on the click button. And there might be more input element with this class "quan" in the future. So, I want to get the specific input element with class "quan" on clicking the click button which associate with it. The way I did in the js file only give me the first element of that class name. How do I get the specific element? Thanks for your help.
HTML
<div>
<div>
<button onclick="click(event)>Click<button>
</div>
<div>
<input class="quan" type="number" min="0" value="2"/>
</div>
</div>
Javascript
function click(event){
console.log(document.querySelector(".quan"));
}
Use a selector finding the common ancestor (using closest) of them and find the correct child.
function my_click(elem) {
// ideally elem.closest(".group-name")
// but this will also do
var parent = elem.parentNode.parentNode
var child = parent.querySelector(".quan")
console.log(child.value);
}
<div>
<div>
<button onclick="my_click(this)">Click</button>
</div>
<div>
<input class="quan" type="number" min="0" value="1" />
</div>
</div>
<div>
<div>
<button onclick="my_click(this)">Click</button>
</div>
<div>
<input class="quan" type="number" min="0" value="2" />
</div>
</div>
I have form that users fill out a set of checkmarks and when they click a button, the output is a sequence of notes. In this form, a div in my HTML is set up to pull a list of items which will appear in an email. Sometimes, the user needs to fill out an empty text box for one of the items. However, the way the code is written currently, I can get the text for items on the page, but it removes all the text inside the text boxes. Is there a way to include the text boxes too? Here is the code sample:
HTML
<div>
<p>
<input type="checkbox" class="DocsNeeded"> This <input class="DocsNeeded" checked="checked" type="text" size="20" /> information is an example of an item with an input field<br><br>
</p>
</div>
<div>
<p>
<input type="checkbox" class="DocsNeeded"> This is <input type="text" size="20" /> another example of an item with an input field<br><br>
</p>
</div>
JavaScript Function
$(".DocsNeeded:checked:visible").each(function() {
if ($(this).is(":checked")) {
docs += "• " + $(this).parent("p").text().trim() + "\r\n";
}
});
EDIT Based on the questions below:
Essentially the output text (what I'm hoping to get from this question) that the user will then copy and paste into a pre-formatted email will be:
Mr. Person
Here is a list of all the documents that you did not send us
• This [user input here] information is an example of an item with an input field
• This is [user input here] another example of an item with an input field
.text() sets/gets the "text" inside an HTML element. It is not the input type="text". Example close to what you achieve is below. I also included a sample usage of text().
Also, jQuery way of accessing an element's children is to use .children() or .find() (deeper).
$(document).ready(function() {
$('#clickme').click( function() {
var docs = '';
$(".DocsNeeded:checked:visible").each(function() {
if ($(this).is(":checked")) {
docs += "• " +
$(this).parent("p").find('.label-1').text() + ' ' +
$(this).parent("p").find('input[type=text]').val() + ' ' +
$(this).parent("p").find('.label-2').text() + "\r\n";
}
});
$('#result').text(docs);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>
<input type="checkbox" class="DocsNeeded"> <span class="label-1">This</span> <input class="DocsNeeded" checked="checked" type="text" size="20" /> <span class="label-2">information is an example of an item with an input field</span><br><br>
</p>
</div>
<div>
<p>
<input type="checkbox" class="DocsNeeded"> <span class="label-1">This is</span> <input type="text" size="20" /> <span class="label-2">another example of an item with an input field</span><br><br>
</p>
</div>
<button id="clickme">Click Me </button>
<hr />
<div id="result" style="white-space:pre"></div>
<hr />
I'm creating a script that takes the values of the fields and places them into a table for verification. The thing is though, the user is able to add multiple fields(up to 5) and each field has its own id. So, when a user inputs the values I want my script to take all the values from that field(even if they've added) and pass them into the table. How would I go about doing this?
User adds one 'set', clicks add chart
User adds another 'set'(up to 5).
When the user has added all the 'sets' he/she wants, They appear in the Jeppeson Charts section.
I need to get these values
<div id="charts">
<h3>Jeppeson Charts</h3>
<fieldset>
<label>Airport Identifier</label>
<input type="text" name="air_id_1" id="air_id_1" />
</fieldset>
<fieldset>
<label>Chart Identifier</label>
<input type="text" name="chart_id_1" id="chart_id_1" />
</fieldset>
<fieldset>
<label>Chart Description</label>
<input type="text" name="chart_desc_1" id="chart_desc_1" />
</fieldset>
</div>
Allows the user to add up to 5 different charts.
var jep_num = 1;
$("#add_chart").on("vclick", function(ev){
jep_num += 1;
if(jep_num <= 5){
$("#charts").append("<fieldset><input type='text' name='air_id_" +jep_num +"' id='air_id_" +jep_num +"' /></fieldset><fieldset style='margin-left: 0.45%'><input type='text' name='chart_id_" +jep_num +"' id='chart_id_" +jep_num +"' /></fieldset><fieldset style='margin-left: 0.4%'><input type='text' name='chart_desc_" +jep_num +"' id='chart_desc_" +jep_num +"' /></fieldset>").trigger("create");
}
ev.preventDefault();
})
Table where the charts need to be added
<div class="full">
<div class="header">JEPPESON CHARTS</div>
</div>
<div class="half">
<div class="half">
<div id="air_id_field" class="table_field"></div>
</div>
<div class="half">
<div id="chart_id_field" class="table_field"></div>
</div>
</div>
<div class="half">
<div class="full">
<div id="chart_desc_field" class="table_field"></div>
</div>
</div>
I hope I made sense with my rambling. If not, let me know and I'll try to clarify. I also know how to do this using MySQL and PHP, and I was hoping to avoid doing so with this particular feature. But, if I need to I will.
You should add a class to each field and the added ones too. Also you need to wrap all three related fieldset in one div.
<div id="charts">
<h3>Jeppeson Charts</h3>
<div class="charts-fieldset">
<fieldset>
<label>Airport Identifier</label>
<input class="air-input" type="text" name="air_id_1" id="air_id_1" />
</fieldset>
<fieldset>
<label>Chart Identifier</label>
<input class="chart-input" type="text" name="chart_id_1" id="chart_id_1" />
</fieldset>
<fieldset>
<label>Chart Description</label>
<input class="chart-desc-input" type="text" name="chart_desc_1" id="chart_desc_1" />
</fieldset>
</div>
</div>
Then you can go through all of your sets one by one and get the values like that and then do what you want with them:
$('.charts-fieldset').each(function () {
var air = $('.air-input', $(this)).val();
var chart = $('.chart-input', $(this)).val();
var chartDesc = $('.chart-desc-input', $(this)).val();
});
I have to copy a div in which there are multiple input fields.
var a = $('#divscossalina1').html();
$('#riepilogo').html(a);
If i clone an input field directly,the relative value is cloned as well.
This is not happening if i clone the container div.(the fields are cloned but not the values)
Is there a way to clone all input fields with the values,simply cloning the container div?(or rather
writing only one clone() function and not how many the fields are.)
Html:
<div id="one">
<input type="text" name="product" value="5" class="in" />
<input type="text" name="product" value="6" class="in" />
<input type="text" name="product" value="7" class="in" />
</div>
<button id="button">Add field</button>
JQuery:
$('#button').click(function(){
$('#one').clone().insertAfter("#one");
});
This even clones the value in them, working Fiddle
In jQuery, there is a method named "clone". you can read api: http://api.jquery.com/clone/
$('riepilogo').html($('#divscossalina1').clone());
and see my fiddle demo : http://jsfiddle.net/bigxiang/533zU/
Hope it works:)
I have 2 divs, the first one has the label with the content to show, but when you click the "edit" button, it should show you the div="edit" and the content of the 1st label inside of the input that is linked to it (same id).
By the other way, I saw sites that when you type something inside that input, the original label of the "preview" div is getting updated in realtime.
Could someone help me with the script? Thank you!
<html>
<body>
<div id="preview">
<label id="companyName" class="workExperience">
This is my company
</label>
<label id="companyCountry" class="workExperience">
This is my company Country
</label>
<input type="button" value="edit"/>
</div>
<div id="edit">
<label>Company Name: </label>
<input type="text" id="companyName" />
<label>Company Country: </label>
<input type="text" id="companyCountry" />
</div>
</body>
</html>
You can use something like below. Notice though that I changed the id of the fields to be different. It is not a good practice to give multiple controls on the same page the same id. Some browsers do not work with this and it really doesn't make sense anyways.
$(document).ready(
function()
{
$("#companyNameText").keypress(
function()
{
$("#companyNameLabel").html(this.value);
});
$("#companyCountryText").keypress(
function()
{
$("#companyCountryLabel").html(this.value);
});
});