Dynamically Created Text Box Number Increases On Each Page Load - javascript

I've a table in the front-end where multiple text boxes are appended to the table on button click. Here's the event that I am using:
//Add row to the table
$('#btnAdd').on('click', function () {
var $clone = $('#tblQuesAns tbody tr:last').clone();
$clone.find('input').val('')
$('#tblQuesAns tbody').append('<tr><td><input type="text" class="txtQuestionName form-control" placeholder="Input Name" /> </td> <td><input type="text" class="txtOptions form-control" placeholder="Input Value" /><span class="addOptions">(+)</span></td> <td><input type="text" class="txtAnswers form-control" class="form-control" placeholder="Input Value" /> Remove</td> </tr>');
});
The above works perfect, so it appends new row each time when 'Add' button clicked. There are two more buttons in the Options and Answers text box. So clicking on them, additional text boxes are created in the same column. So to take control of dynamic control, following is used where an event is bound:
//Add more rows for option
$('body').on('click', '.addOptions', function () {
$(this).parent().append('<div id="txtOptions"><input class="txtOptions form-control" name="" type="text" /></div><br />');
});
//Add more rows for answer
$('body').on('click', '.addAnswers', function () {
$(this).parent().append('<div id="txtAnswers"><input class="txtAnswers form-control" type="text" /></div><br />');
});
For now, the above also works. The problem is, say I navigate to another link and come back to Question Bank partial view, clicking on the plus sign (+) creates evenly text boxes each time that means double controls (Where it should create one text box for Options section on one click). Attached a screenshot below:
I tried to remove or clear the controls on page load but failed with the below:
$("#txtOptions").empty();
$("#txtAnswers").empty();
Any way I can overcome this?

The problem is this code runs in $(document).ready() so when you come back, it's binding new handlers for click event. You end up with more than one click handler and each one would add one row. Try removing existing click handlers if any by calling off() method.
//Add more rows for option
$('body').off('.addOptions').on('click', '.addOptions', function () {
$(this).parent().append('<div id="txtOptions"><input class="txtOptions form-control" name="" type="text" /></div><br />');
});
//Add more rows for answer
$('body').off('.addAnswers').on('click', '.addAnswers', function () {
$(this).parent().append('<div id="txtAnswers"><input class="txtAnswers form-control" type="text" /></div><br />');
});

Related

Why are arrows not working for input type number that I've used innerHTML on?

After I've used .innerHTML to replace a button with an input, the number is not changing its value if I click on both arrows.
Can you explain me why the second input is working properly but the one from the javascript is not?
const resetButton = document.getElementById("reset-btn");
resetButton.addEventListener('click', function(){
document.getElementById("reset-btn").innerHTML = '<input id="number" type="number" style="width:50px">';
});
<button id="reset-btn">Change Table Nr.</button>
<input id="number" type="number" style="width:50px">
The reason is you have placed the number field within a button. Instead of this, place both button and text field it within a div and hide the button.
As explained in the comments, when you click on the input buttons, you also click on the button containing the input; and your script replaces the content of your button.
That's why you get that behaviour.
const resetButton = document.getElementById("reset-btn");
resetButton.addEventListener('click', function(event) {
if (event.target !== event.currentTarget) return; // ignore clicks that bubbled up (from the input)
resetButton.innerHTML = '<input id="number" type="number" style="width:50px">';
});
<button id="reset-btn">Change Table Nr.</button>
<input id="number" type="number" style="width:50px">

how to call a function on alert something on cursor enter to the input text box by using TAB?

i just wants to call a function when my cursor on a form move to the input text box by pressing TAB.also when i click it->i just wants to show a message.mu html code-->
<input onclick="$('#limitDayExitWarning').show(),$('#limitDayExitWarning').html('Plase insert a value [1|2].Means, how many day of this batch class will be held in one Week')" class="w3-input w3-border w3-animate-input" type="number" placeholder="Day In A Week*" id="idayInAWeek" name="dayInAWeek" autocomplete="off">
<label id="limitDayExitWarning" style="display: none;color: red;"></label>
the level is show/apper html on click->means when cursor move by using mouse.but when i move cursor from other field to my desire field by using Tabs my desire level is not displaying.
I also tried OnFocus:
<input onfocus="$('#limitDayExitWarning').show(),$('#limitDayExitWa‌​rning').html('Plase insert a value [1|2].Means, how many day of this batch class will be held in one Week')" onclick="$('#limitDayExitWarning').show(),$('#limitDayExitWa‌​rning').html('Plase insert a value [1|2].Means, how many day of this batch class will be held in one Week')"
class="w3-input w3-border w3-animate-input" type="number" placeholder="Day In A Week*" id="idayInAWeek" name="dayInAWeek" autocomplete="off">
<label id="limitDayExitWarning" style="display: none;color: red;"></label>
Use the focus event to do something when the user tabs, clicks or otherwise moves into the <input>. Use blur to do something when they leave:
<input type="number" id="idayInAWeek" name="dayInAWeek">
<label id="limitDayExitWarning">blah blah</label>
<script>
$(function(){
$('#idayInAWeek').
on('focus', function() { $('#limitDayExitWarning').show(); }).
on('blur', function() { $('#limitDayExitWarning').hide(); });
});
</script>

jquery javascript add/remove button

I have a form, where I dynamically want to add additional inputfields. So when I click the "Add"-button, there should appear a new inputfield but now with both an add and remove button. When I now click the "Add" button next to the new inputfield, there shoud appear another new inputfield et. etc. The same goes fro the remove button. So far, so good... my issue is though, that I cant create a new inputfield after clicking "Add"...
So, my code looks like this:
<div id="fields">
<button class="add">Add</button>
<div class="newField">
<div class="check">
<input type="radio" id="field_1" name="correct" required></input>
</div>
<input type="text" id="input_1" required></input>
</div>
</div>
the CSS:
#fields {
width:350px
}
.check{
float:left
}
.add, .remove {
float:right
}
and most important, the javascript:
var InputsWrapper = $("#fields");
var x = InputsWrapper.length;
var FieldCount=1;
$('.add').click(function(e){
FieldCount++;
$(InputsWrapper).append('<div class="newField"><button class="remove">Remove</button><button class="add">Add</button><div class="check"><input type="radio" id="field_'+ FieldCount +'" name="correct"></div><input type="text" id="input_'+ FieldCount +'" /></div></div>');
x++;
return false;
});
$(document).on("click",".remove", function(e){
if( x > 1 ) {
$(this).parent('div').remove();
x--;
}
return false;
});
Here is a DEMO fiddle: http://jsfiddle.net/cwprf03o/
Can someone help me out?
Replace line
$('.add').click(function(e){
with
$(document).on("click", ".add", function(e){
The reason for this is that the click() function binds your function(e){} to .add elements that exist at the time the click() function is called.
The on() method works differently. On the click event it will also search for any .add items that exist at the time the click event is raised.
http://jsfiddle.net/1qq40qex/

Table rows inserted by Jquery not functioning like table rows from original HTML

I have a page that contains a table with the following format:
<table id="gigsTable">
<tr><th>Date</th><th>Time</th><th>Location</th><th>Remove</th></tr>
<tr class="gigRow">
<td><input name="date" type="text" value="Date goes here"></td>
<td><input name="time" type="text" value="Time goes here"></td>
<td><input name="location" type="text" value="Location goes here"></td>
<td class="remove"><input name="remove" type="checkbox" /></td>
</tr>
When the checkbox in the remove column is clicked its parent row fades out and then is removed using the following jQuery:
$("#gigsTable tr .remove input").click(function() {
$(this).parent().parent().fadeOut(500, function() {
$(this).remove();
rowCount--;
});
});
I also have a button that adds a row to the table when clicked:
$('#addGig').click(function() {
$('#gigsTable tr:last').after('<ROW FORMAT FROM HTML>');
rowCount++;
});
This all works fine however when I try to remove a row that is inserted using the above method nothing happens. Why?
The reason is that you set yur remove function when page loads and that doesn't contains new elements. So try to do with live function of Jquery which will bind click event to your new elements too.
$("#gigsTable tr .remove input").live("click",function() {
$(this).parent().parent().fadeOut(500, function() {
$(this).remove();
rowCount--;
});
});
Use on() instead of direct event click().
It will autosubscribe all newly created controls when you are inserting rows.
The rows you add have not been bound to the click event, you'll need something like on or live depending on your version of jQuery.
The click event handler can only access elements which are present when the page is initially loaded. To control dynamically added elements use on or delegate.
Also, rather than parent().parent(), you could use closest('tr')
Try this:
$("#gigsTable tr .remove").delegate('input', 'click', function() {
$(this).closest('tr').fadeOut(500, function() {
$(this).remove();
rowCount--;
});
});
Or if you are using jQuery 1.7+, use on.
$("#gigsTable tr .remove").on('click', 'input', function() {
$(this).closest('tr').fadeOut(500, function() {
$(this).remove();
rowCount--;
});
});

How to remove a particular div tag and reset its content using javascript

Code below contains certain tags in all four.
Image-1
here is the code :
<div style='background-color:YellowGreen;height:20px;width:100%;margin-top:15px;font-weight: bold;'>
Delegate(s) details: </div>
<div style="border:1px solid black;"><br/>
<div id="delegates">
<div id="0">
Name of the Delegate:
<input name='contact_person[]' type='text' size="50" maxlength="50" />
Designation:
<select name='delegate_type_name[]' class='delegate_type'>
<option value='select'>Select</option>
<option value='Main'>Main</option>
</select>
</div><br/>
</div>
<div>
<input type="button" name="more" value="Add More Delegates" id="add_more" />
<br />
<br />
</div>
</div>
In the above code on line 5 where <div id="0"> changes to value 1 in script that I mentioned in "add_more"
And the javascript for "add_more" is given below
jQuery('#add_more').click(function(){
var id = jQuery('#delegates > div:last').attr('id');
var temp = "<div id='"+(parseInt(id)+parseInt('1'))+"'> Name of the Delegate: <input type='text' size='50' maxlength='50' name='contact_person[]' /> Designation:";
temp += "<select name='delegate_type_name[]' class='delegate_type additional_delegate'><option value='select'>Select</option><option value='Additional'>Additional</option><option value='Spouse'>Spouse</option></select> <input type='button' name='rem' value='Remove' id='remove' /></div><br/>";
jQuery('#delegates').append(temp);
});
In the javascript code above I have added a remove button in the temp+ variable
<input type='button' name='rem' value='Remove' id='remove' />
Image-2 shows the remove button every time I click on "Add more Delegates" button.
In the image-2 I click on Add More Delegates button it shows the "remove" button on the right of drop down select list.
I want a jQuery function for remove button, so that when I click on remove it should remove <div id="1"> and also reset content before removing the div tag. Below image-3 is the output that I want when I click on remove button.
code that I tried was this from some reference is this
jQuery('#remove').click(function(){
var id = jQuery('#delegates > div:last').attr('id').remove();
});
but no luck.
Thanks.
You can't give an element id that is only a number, it must be #mydiv1, #mydiv2 or something similar, i.e. beginning with a letter not a number.
For starters your markup is a total mess. There is no way you should be using for layout purposes. Read up on tableless layouts and css.
The first thing you need to change is the id's of your div. An id cannot start with a numeric. I suggest naming the first div delegate0. Secondly, you are adding a remove button on every new row with the same id - all id's on a page should be unique so i suggest you change this to class="remove".
As for your question, it really boils down to needing to add a jQuery handler to the remove buttons using the .livedocs method.
This is as simple as:
jQuery('.remove').live('click',function(){
$(this).closest('div').remove();
});
Also, you need to keep a running counter of the id of the items added, and increment this every time a new row is added.
var nextDelegate = 1;
jQuery('#add_more').click(function(){
... your code here
nextDelegate++;
});
Also, I removed the superfluous <br/> after each div.
Live example: http://jsfiddle.net/cb4xQ/

Categories

Resources