jQuery arranged index input name[?] - javascript

I want after remove input arranged index input name, for example:
After remove input row222[2] others input name as: row000[0] & row111[1] & row333[2]
After remove input row333[3] others input name as: row000[0] & row111[1] & row222[2]
After remove input row111[3] others input name as: row000[0] & row222[1] & row333[2]
etc...
What do i do?
DEMO
My full code:
$(document).on('click', '.RemOve', function(e) {
e.preventDefault();
$(this).closest('.CloSe').remove();
$('.CloSe').each(function(idx) {
var Input = $($('.Change input'), this);
Input.each(function(i) {
var str = $(this).attr('name');
var currentIdx = parseInt(str.match(/\d+/)[0], 10);
$(this).attr('name', str.replace(currentIdx, idx));
})
});
$('.CloSe').each(function(){
$('.namein', this).empty().append($(this).find('input').prop('name'))
})
})
.RemOve{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CloSe">
<span class="Change">
<b class="namein">rows[0]</b>
<input type="text" name="rows000[0]"> // rows000[0]
</span>
<span class="RemOve">Remove</span>
</div>
<div class="CloSe">
<span class="Change">
<b class="namein">rows[1]</b>
<input type="text" name="rows111[1]"> // rows111[1]
</span>
<span class="RemOve">Remove</span>
</div>
<div class="CloSe">
<span class="Change">
<b class="namein">rows[2]</b>
<input type="text" name="rows222[2]"> // rows222[2]
</span>
<span class="RemOve">Remove</span>
</div>
<div class="CloSe">
<span class="Change">
<b class="namein">rows[3]</b>
<input type="text" name="rows333[3]"> // rows333[3]
</span>
<span class="RemOve">Remove</span>
</div>

I've updated your code, check out here http://jsfiddle.net/chtvfkt2/1/
And I also commented on some of your codes. If there's a specific reason for using the commented codes, just uncomment and use it.
UPDATE
I'm a bit confused by your question. So I split the answers.
If you want to rename the rest of the elements after getting rid of one of them, take this below.
$(document).on('click', '.RemOve', function(e) {
//I see no point in using preventDefault() here ?
//e.preventDefault();
$(this).closest('.CloSe').remove();
$('.CloSe').each(function(idx, element) {
//var Input = $($('.Change input'), this);
//Improved :: better than using 'this'.
var Input = $($('.Change input'), element);
Input.each(function(i, el) {
//Improved :: No point using parseInt and str.replace ?
//var str = $(this).attr('name');
//var currentIdx = parseInt(str.match(/\d+/)[0], 10);
//$(this).attr('name', str.replace(currentIdx, idx));
var numb = i < 99 ? "rows00" + i : "rows0" + i;
if ( i > 100 ) {
numb = "rows" + i;
}
$(el).attr('name', numb);
})
});
$('.CloSe').each(function(){
$('.namein', this).empty().append($(this).find('input').prop('name'))
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CloSe">
<span class="Change">
<b class="namein">rows000</b>
<input type="text" name="rows000">
</span>
<span class="RemOve">Remove</span>
</div>
<div class="CloSe">
<span class="Change">
<b class="namein">rows001</b>
<input type="text" name="rows001">
</span>
<span class="RemOve">Remove</span>
</div>
<div class="CloSe">
<span class="Change">
<b class="namein">rows002</b>
<input type="text" name="rows002">
</span>
<span class="RemOve">Remove</span>
</div>
<div class="CloSe">
<span class="Change">
<b class="namein">rows003</b>
<input type="text" name="rows003">
</span>
<span class="RemOve">Remove</span>
</div>
Or if you want to just chop one of them off and expect no changes, take this.
$(document).on('click', '.RemOve', function(e) {
$(this).closest('.CloSe').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CloSe">
<span class="Change">
<b class="namein">rows000</b>
<input type="text" name="rows000">
</span>
<span class="RemOve">Remove</span>
</div>
<div class="CloSe">
<span class="Change">
<b class="namein">rows001</b>
<input type="text" name="rows001">
</span>
<span class="RemOve">Remove</span>
</div>
<div class="CloSe">
<span class="Change">
<b class="namein">rows002</b>
<input type="text" name="rows002">
</span>
<span class="RemOve">Remove</span>
</div>
<div class="CloSe">
<span class="Change">
<b class="namein">rows003</b>
<input type="text" name="rows003">
</span>
<span class="RemOve">Remove</span>
</div>
FINAL UPDATE
Just replcaing display text was what you wanted, this code will do.
$(document).on('click', '.RemOve', function(e) {
$(this).closest('.CloSe').remove();
$('.CloSe').each(function(idx, element) {
//Improved :: better than using 'this'.
var Input = $($('.Change input'), element);
Input.each(function(i, el) {
var numb = i < 99 ? "rows00" + i : "rows0" + i;
if ( i > 100 ) {
numb = "rows" + i;
}
$(el).prev().text(numb);
})
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CloSe">
<span class="Change">
<b class="namein">rows000</b>
<input type="text" name="rows000">
</span>
<span class="RemOve">Remove</span>
</div>
<div class="CloSe">
<span class="Change">
<b class="namein">rows001</b>
<input type="text" name="rows001">
</span>
<span class="RemOve">Remove</span>
</div>
<div class="CloSe">
<span class="Change">
<b class="namein">rows002</b>
<input type="text" name="rows002">
</span>
<span class="RemOve">Remove</span>
</div>
<div class="CloSe">
<span class="Change">
<b class="namein">rows003</b>
<input type="text" name="rows003">
</span>
<span class="RemOve">Remove</span>
</div>

Related

How to get the value of input and sum the total

This i'm trying to do, I want to get all the data in input fields using javascript and put the sum of all the fields in another input. But im getting an error, the value of total is null or blank. Can someone help me about this? Or give me clue what's causing the error.
Here my html code for the inputs i will not include all of the fields to lessen the code.
var ma = +(document.getElementById('majore').textContent);
var qu = +(document.getElementById('quize').textContent);
var hss = +(document.getElementById('hs').textContent);
var attt = +(document.getElementById('att').textContent);
var laboo = +(document.getElementById('labo').textContent);
var acttt = +(document.getElementById('act').textContent);
var recitss = +(document.getElementById('recits').textContent);
var total = ma + qu + hss + attt + laboo + acttt + recitss;
document.getElementById('totals').innerHTML = total;
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well total">
<label for="total">Total/label>
<div class="input-group">
<input type="text" class="form-control total" id="totals"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
here's my js. this code is inside in the `success function` of `ajax`.
Use value property, not textContent/innerHTML to get the value from Input-Element
Also note that you are accessing few elements which are not in the DOM, I have removed those statements from Demo
var ma = +(document.getElementById('majore').value);
var qu = +(document.getElementById('quize').value);
var hss = +(document.getElementById('hs').value);
var total = ma + qu + hss;
document.getElementById('totals').value = total;
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs" value="10" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<div class="well total">
<label for="total">Total/label>
<div class="input-group">
<input type="text" class="form-control total" id="totals" />
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
You may try this code
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
<input type="text" class="form-control quize" id="quize" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
<input type="text" class="form-control hs" id="hs" onchange="sum()"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<div class="well total">
<label for="total">Total</label>
<div class="input-group" id="totals">
<input type="text" class="form-control total" id="totals"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
<script>
function sum() {
var ma = parseInt(document.getElementById('majore').value);
var qu = parseInt(document.getElementById('quize').value);
var hss = parseInt(document.getElementById('hs').value);
var totals = ma + qu + hss;
document.getElementById('totals').innerHTML = totals;
}</script>
You can get or set the value for the input element using val property.
Get the value from the input element and sum the values
Set the value for the total input field
Here is the Code :
var total = +($('#majore').val()) + +($('#quize').val()) + +($('#hs').val());
$('#totals').val(total);
Check your output in Jsfiddle
This is simple and optimized way. Read more about val property here
function numberSum(N) {
var total = 0;
for(var i = 1; i <= N; i++){
total += i;
}
return total;
}
function run(){
val = document.getElementById("val").value;
document.getElementById("results").innerHTML=val+": "+numberSum(val)
}
<input id="val">
<input type="Submit" onclick="run();">
<p id="results"></p>
Your showing only your body part ...kindly do the script like this way

jquery increment only works in chrome

$(".incrementer").click(function(){
var values = $("#layernumber").val();
var item = $("input[type=file]:last").clone(true);
var txt = $(".layer_selector:last").after('<br>').clone(true);
if($("#layernumber").val() < 4){
$("#attach").append(item);
$("#attach").append(txt);
}
if($("#layernumber").val() > 2){
$(".incrementer").hide();
}
});
The above code increments the value of layers
as the layers increments the file upload option will also.
But this works only in Chrome. Not in FireFox or Internet Explorer.
HTML code is:
<div class="tab-pane active" id="tab2">
<h3 class="block">Provide your layer details</h3>
<div class="form-group">
<label class="control-label col-md-3">Number of layer
<span class="required" aria-required="true"> * </span>
</label>
<div class="col-md-4">
<div class="input-group bootstrap-touchspin">
<span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>
<input id="layernumber" type="text" class="form-control" name="layernumber" style="display: block;">
<span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span>
<span class="input-group-btn-vertical">
<button class="btn btn-default bootstrap-touchspin-up" type="button">
<i class="glyphicon glyphicon-plus incrementer"></i>
</button>
<button class="btn btn-default bootstrap-touchspin-down" type="button">
<i class="glyphicon glyphicon-minus decrementer"></i>
</button>
</span>
</div>
<span class="help-block"> Provide your number of layers </span>
</div>
</div>
<!-- fileupload starts-->
<!-- -->
<div class="form-group">
<label class="control-label col-md-3">Choose Layer
<span class="required" aria-required="true"> * </span>
</label>
<div class="col-md-9">
<div id="attach">
<div id="previewImg"></div>
<div class="col-md-9">
<input type="file" name="layerimages[]" onchange="preview(this);" class="myfile" id="fileid" multiple="">
<select id="layerid" class="layer_selector" name="layer_selector">
<option value="">Please Select</option>
<option value="0">First</option>
<option value="1">Second</option>
<option value="2">Intermediate</option>
<option value="3">Final</option>
</select>
</div>
</div>
<br>
</div>
</div>
<!-- fileupload ends-->
</div>
I have made a fiddle for this.
https://jsfiddle.net/w1gy8ruj/1/
The changes i did to your code is basically initialise the value of the layernumber input to 0 and increment it on every click.
$(document).ready(function() {
$(".incrementer").click(function() {
var values = $("#layernumber").val();
var item = $("input[type=file]:last").clone(true);
var txt = $(".layer_selector:last").after('<br>').clone(true);
if ($("#layernumber").val() < 4) {
$("#attach").append(item);
$("#attach").append(txt);
}
if ($("#layernumber").val() > 2) {
$(".incrementer-button").hide();
}
values++;
$("#layernumber").val(values);
});
});
You do not use
var values = $("#layernumber").val();
anywhere in this scope, so this is unneeded unless you don't want to use it in the if statement below and for incrementing.
And you do not increment the layernumber, so
if($("#layernumber").val() > 2) {
will never execute. You should increment it and set it like
$("#layernumber").val(values)

How to remove appended div on jquery

Hello I want to remove the cloned html when I click this, what is the best way? how to detect that it's what I've clicked on X
and this is the HTML
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Fields</h4>
</div>
<div class="panel-body">
<div class="field">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<a id="close" class="pull-right" href="#">
<i class="fa fa-times"></i>
</a>
</div>
<div class="panel-body">
<select class="form-control" name="custom_form[type]" required>
<option value="">Type</option>
<option>text</option>
<option>textarea</option>
<option>radio</option>
<option>checkbox</option>
</select>
<input class="form-control" type="text" name="customform[label]" placeholder="Label" />
</div>
</div>
</div>
</div>
+ Add attribute
</div>
</div>
</div>
and this is what I've used to clone the fields when I click the button + Add Attribute
<div class="clone-field hide">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<a id="close" class="pull-right" href="#">
<i class="fa fa-times"></i>
</a>
</div>
<div class="panel-body">
<select class="form-control" name="custom_form[type]" required>
<option value="">Type</option>
<option>text</option>
<option>textarea</option>
<option>radio</option>
<option>checkbox</option>
</select>
<input class="form-control" type="text" name="customform[question]" placeholder="Question" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(".container").on("click", "#add_attribute", function(e){
e.stopPropagation();
e.preventDefault();
alert("ok");
var append_att = $(".clone-field").html();
$(".field").append(append_att);
});
</script>
EDIT1
the close is already done, so I added one more since it's still same concept,
How to add <input type="text" name="customform[option]" placeholder="Ex. Male,Female" /> when I select Type = radio,select,checkbox and remove if it's not, then put it under on the Label input?
currently I have
$(".container").on("click", "#add_attribute", function(e){
e.stopPropagation();
e.preventDefault();
var append_att = $(".clone-field").html();
$(".fields").append(append_att);
}).on('click', '.remove', function() {
$(this).closest('.field').remove();
}).on('change', '.field-type', function(){
var input_option = '<input class="form-control" type="text" name="customform[option]" placeholder="Ex. Male,Female" /> ';
var valueSelected = this.value;
if(valueSelected == 'radio' || valueSelected == 'select')
//append
else
//remove
});
EDIT2
I've added this hidden input text
how to find closest into removeClass('hide')/addClass('hide') of my base on Type = radio,select
EDIT3 - MY TOTAL ANSWER
$(".container").on("click", "#add_attribute", function(e){
e.stopPropagation();
e.preventDefault();
var append_att = $(".clone-field").html();
$(".fields").append(append_att);
}).on('click', '.remove', function() {
$(this).closest('.field').remove();
}).on('change', '.field-type', function(){
var inputType = this.value;
var panel = $(this).closest('.panel-body');
var inputs = panel.find('input');
inputs.last().val("");
if(inputType=='radio' || inputType=='select') {
inputs.last().removeClass('hide');
} else {
inputs.last().addClass('hide');
}
});
Your are using duplicate id=close. Use class=close instead like following.
<a class="close" class="pull-right" href="#">
<i class="fa fa-times"></i>
</a>
And your js for removing item should be like this.
$('.container').on('click', '.close', function(){
$(this).closest('.col-md-6').remove();
});
Update
$('.container').on('click', 'select.form-control', function () {
var input_type = this.value;
var panel = $(this).closest('.panel-body');
var inputs = panel.find('input');
if (input_type == 'radio' || input_type == 'select') {
if (inputs.length > 1) {
inputs.last().removeClass('hide');
}
else {
var input_option = '<input class="form-control" type="text" name="customform[option]" placeholder="Ex. Male,Female" /> ';
panel.append(input_option);
}
} else {
if (inputs.length > 1)
inputs.last().addClass('hide');
}
});
Two simple steps:
change #close to class .close. You should not duplicate ids.
add some class to col-md-6 container to be able to select it later. You could use col-md-6 too but you don't want to tie JS code to layout specific classes
HTML becomes:
<div class="clone-field hide">
<div class="block col-md-6">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<a class="close" class="pull-right" href="#">
<i class="fa fa-times"></i>
</a>
</div>
<div class="panel-body">
<select class="form-control" name="custom_form[type]" required>
<option value="">Type</option>
<option>text</option>
<option>textarea</option>
<option>radio</option>
<option>checkbox</option>
</select>
<input class="form-control" type="text" name="customform[question]" placeholder="Question" />
</div>
</div>
</div>
</div>
Then you also need to add once more click handler similar to what you already have:
$(".container").on("click", "#add_attribute", function(e){
e.stopPropagation();
e.preventDefault();
alert("ok");
var append_att = $(".clone-field").html();
$(".field").append(append_att);
})
.on('click', 'close', function() {
$(this).closest('.block').remove();
});
You should use jQuery.closest() https://api.jquery.com/closest/ to travel from the button you clicked back to the parent container that holds all the panel
$('#close').on('click', function(){
$(this).closest('.clone-field').remove();
});
.clone-field is the top most DIV of the panel to delete
Edit:
Also, Difference between id and class in CSS and when to use it

jQuery getting previous input value

<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat">Wyślij</button>
</span>
</div>
</div>
I have HTML like above. My question is how to get the input value when I click on #btn-chat. I have been trying of jQuery functions like .prev() and .prevAll() but those didn't work for me.
Given that the input element has an id attribute it should be unique, so you can select it directly without the need to traverse the DOM:
$('#btn-chat').click(function() {
var inputVal = $('#btn-input').val();
// do something with the value here...
});
If, for whatever reason, you still want to use DOM traversal you can use closest() to get the nearest common parent to both elements, and then find():
$('#btn-chat').click(function() {
var inputVal = $(this).closest('.input-group').find('input').val();
// do something with the value here...
});
If you have multiple elements in your page with the same id attribute then your HTML is invalid and you would need to change it. In that case, use class attributes to identify and select the elements.
$("#btn-chat").click(function(){
var input_values = $(this).parent().parent().find("input").val();
alert(input_values);
});
As #RoryMcCrossan has pointed out, if you have multiple elements with the same id attribute, you would need to use a class attribute instead.
$(function() {
$('.btn-chat').on('click', function() {
var val = $(this).closest('.input-group').find('input.btn-input').val();
//OR $(this).parent().prev().val();
console.log( val );
});
});
$(function() {
$('.btn-chat').on('click', function() {
var val = $(this).closest('.input-group').find('input.btn-input').val();
console.log( val );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>

How to display a form on mouseover and hide it on mouseout?

i have a login p tag,when i mouse over on it i need to display a login form and hide it on mouse out,
How can i do that?
Javascript:
function showForm(){
document.getElementById('loginForm').style.display = "block";
}
function hideForm(){
document.getElementById('loginForm').style.display = "none";
}
html:
<form>
<p id="login" onmouseover="showForm();" onmouseout="hideForm();">
<span class="label">Login Here</span>
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" /></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" /></span>
</span>
<span class="form-elements">
<span class="submit-btn"><input type="submit" value="Submit" /></span>
</span>
</span>
</p>
</form>
Demo:
http://jsfiddle.net/rathoreahsan/aNWfV/ -- updated link
Jquery Solution:
$("#login").hover(function() {
$("#loginForm").css({"display":"block"});
}, function() {
$("#loginForm").css({"display":"none"});
});
HTML:
<form>
<p id="login">
<span class="label">Login Here</span>
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" /></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" /></span>
</span>
<span class="form-elements">
<span class="submit-btn"><input type="submit" value="Submit" /></span>
</span>
</span>
</p>
</form>
See Demo:
http://jsfiddle.net/rathoreahsan/SGUbC/
What did you try?
I have a login p tag
For the sake of simplicity (in my favor) let us make it a div tag
<div class="login">Login</div>
And the Form
<form id="loginForm"></form>
when i mouse over on it i need to display a login form and hide it on
mouse out
<div class="login" onmouseover="show()" onmouseout="hide()">Login</div>
function show()
{
document.getElementById("login").display = "block";
}
function hide()
{
document.getElementById("login").display = "none";
}
This is pretty simple, right? You may want to try something before you ask, from next time.
Hide and show the container div because you don't want the form to hide when the user mouse's out of the parent and mouses-in to the form.
Working example: http://jsfiddle.net/nivas/6dzBn/
var formObj = document.getElementById("formName");
formObj .onmouseover = function()
{
this.style.display = "block";
}
formObj.onmouseout = function()
{
this.style.display = "none";
}

Categories