Nothing happening on clicking on close button in newly inserted variable- block - javascript

inserAfter is working fine but I also want to perform remove. On clicking the button with closequest id, nothing happening even alert-message not coming.
//for adding ques ans and comment
var qBlock = '<div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" id="closequest" class="btn btn-purple" style="position: absolute;top: 3px;"><span> <i class="fa fa-close"></i></span>close</button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div>';
$("#addQuestion").on("click", function() {
$(qBlock).insertAfter(".qandaBlock");
});
$(document).ready(function() {
$("#closequest").on("click", function() {
alert("ok");
$('qblock').remove(".newqandaBlock");
});
}); < /script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 col-sm-12">`
<form id="resetblock" name="resetblock">
<div class="qandaBlock">
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-question"></i></span>
<input type="text" class="form-control" placeholder="Question Asked ">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-reply"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea>
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-comments"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea>
</div>
</div>
<button type="button" class="btn btn-default" id="addcomment" onclick="resetform()">Reset</button>
<button type="button" class="btn btn-purple" id="addQuestion">
<i class="fa fa-plus-square-o"></i> Add Another Question
</button>
</div>
</form>
</div>


Issue here is that dynamic added elements have to be told to jQuery that they exists. Earlier we were using live but now jQuery supports on. On is delegation. It says look for all events that occur on this element or it's child i.e you can scope it to specific child. So pick the closest parent that exists and not body or document.
Also id's have to be unique so you cannot use id's in this case instead use class.
Put the script tag just before closing body
var qBlock='<div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" id="" class="btn btn-purple closequest" style=""><span> <i class="fa fa-close"></i></span>close</button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div>';
$("#addQuestion").on("click",function(){
$(qBlock).insertAfter(".qandaBlock");
});
$("#resetblock").on("click",'.closequest', function(){
alert("ok");
$(this).closest(".newqandaBlock").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-md-12 col-sm-12">`
<form id="resetblock" name="resetblock" >
<div class="qandaBlock">
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-question"></i></span>
<input type="text" class="form-control" placeholder="Question Asked ">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-reply"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea>
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-comments"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div>
</div>
<button type="button" class="btn btn-default" id="addcomment" onclick="resetform()">Reset</button>
<button type="button" class="btn btn-purple" id="addQuestion">
<i class="fa fa-plus-square-o"></i> Add Another Question
</button>
</div>
</form>
</div>


You should delegate the event handler as shown below, so that your event handler works with dynamically added elements.
Other than that, don't use id in dynamically injected templates - use class names instead, otherwise it'll invalidate your HTML. Finally, you should keep a reference to the added block:
//for adding ques ans and comment
var qBlock = '<div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" class="btn btn-purple closequest" style="position: absolute;top: 3px;"><span> <i class="fa fa-close"></i></span>close</button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div>';
$(document).ready(function() {
var latestBlock;
$("#addQuestion").on("click", function() {
latestBlock = $(qBlock).insertAfter(".qandaBlock");
});
$(document).on("click", ".closequest", function() {
alert("ok");
latestBlock.remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 col-sm-12">`
<form id="resetblock" name="resetblock">
<div class="qandaBlock">
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-question"></i></span>
<input type="text" class="form-control" placeholder="Question Asked ">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-reply"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea>
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-comments"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea>
</div>
</div>
<button type="button" class="btn btn-default" id="addcomment" onclick="resetform()">Reset</button>
<button type="button" class="btn btn-purple" id="addQuestion">
<i class="fa fa-plus-square-o"></i> Add Another Question
</button>
</div>
</form>
</div>


$('qblock') is not valid a valid HTML element, this won't work, don't forget '.' or '#'.
Use something like $('.newqandaBlock').remove(), to remove the class.

Related

How to renumber items when one of them is removed?

I have a use-case where input controls are listed and a remove button. The user has the option to remove any of the item in the list. I need to be able to check that there is more then one item in the list before I can remove the item. I also need to renumber the div, span and input control. So if a user removes id=1 I want to remove that item and they renumber then starting with 1.
function RemoveRow(id) {
if (id > 0) {
let rowCount = $('[id^=newrowItem_]').length
if (rowCount != 1) {
let removeData = `#newrowItem_${id}`;
$(removeData).remove();
// Re-number
let inputdatagripPanel = $("#inputDataGrippanel");
var inputdatagripForm = inputdatagripPanel.find(".form-group");
let fieldItemid = 1;
// $(inputdatagripForm).each((index, item) => {
// console.log(item);
// let fieldItem = `#fieldrowItem_${fieldItemid}`;
// item.attr('id', fieldItem);
// id++;
// });
} else {
let fieldItem = `#fieldrowItem_${id}`;
$(fieldItem).addClass('error');
}
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<div id="inputDataGrippanel" class="col-sm-6 row">
<div id="inputDataGrippanel" class="col-sm-6 row">
<label>Rows</label>
<div class="form-group" id="newrowItem_1">
<div class="input-group">
<input type="text" id="fieldrowItem_1" class="form-control fieldrowItem mb-3" placeholder="Row 1" data-value="0" required="" value="a">
<span id="spanrowItem_1" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(1)">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_2">
<div class="input-group">
<input type="text" id="fieldrowItem_2" class="form-control fieldrowItem mb-3" placeholder="Row 2" data-value="0" required="" value="b">
<span id="spanrowItem_2" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(2)">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_3">
<div class="input-group">
<input type="text" id="fieldrowItem_3" class="form-control fieldrowItem mb-3" placeholder="Row 3" data-value="0" required="" value="c">
<span id="spanrowItem_3" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(3)">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_4">
<div class="input-group">
<input type="text" id="fieldrowItem_4" class="form-control fieldrowItem mb-3" placeholder="Row 4" data-value="0" required="" value="d">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_5">
<div class="input-group">
<input type="text" id="fieldrowItem_5" class="form-control fieldrowItem mb-3" placeholder="Row 5" data-value="0" required="" value="e">
<span id="spanrowItem_5" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(5)">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
</div>

I have fixed a missing span in your HTML, modified the code that calls RemoveRow to be dynamic and added the logic that renumbers
function RemoveRow(id) {
let divs = document.querySelectorAll('div.form-group');
if ((id > 0) && (id <= divs.length)) {
let rowCount = $('[id^=newrowItem_]').length
if (rowCount != 1) {
let removeData = `#newrowItem_${id}`;
$(removeData).remove();
// Re-number
/*let inputdatagripPanel = $("#inputDataGrippanel");
var inputdatagripForm = inputdatagripPanel.find(".form-group");
let fieldItemid = 1;*/
let index = 1;
divs = document.querySelectorAll('div.form-group');
for (let div of divs) {
div.id = `newrowItem_${index}`;
div.querySelector('input').id = `fieldrowItem_${index}`;
div.querySelector('span').id = `spanrowItem_${index}`;
index++;
}
// $(inputdatagripForm).each((index, item) => {
// console.log(item);
// let fieldItem = `#fieldrowItem_${fieldItemid}`;
// item.attr('id', fieldItem);
// id++;
// });
} else {
let fieldItem = `#fieldrowItem_${id}`;
$(fieldItem).addClass('error');
}
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<div id="inputDataGrippanel" class="col-sm-6 row">
<div id="inputDataGrippanel" class="col-sm-6 row">
<label>Rows</label>
<div class="form-group" id="newrowItem_1">
<div class="input-group">
<input type="text" id="fieldrowItem_1" class="form-control fieldrowItem mb-3" placeholder="Row 1" data-value="0" required="" value="a">
<span id="spanrowItem_1" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id.split('_')[1]))">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_2">
<div class="input-group">
<input type="text" id="fieldrowItem_2" class="form-control fieldrowItem mb-3" placeholder="Row 2" data-value="0" required="" value="b">
<span id="spanrowItem_2" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id.split('_')[1]))">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_3">
<div class="input-group">
<input type="text" id="fieldrowItem_3" class="form-control fieldrowItem mb-3" placeholder="Row 3" data-value="0" required="" value="c">
<span id="spanrowItem_3" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id.split('_')[1]))">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_4">
<div class="input-group">
<input type="text" id="fieldrowItem_4" class="form-control fieldrowItem mb-3" placeholder="Row 4" data-value="0" required="" value="d">
<span id="spanrowItem_4" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id.split('_')[1]))">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_5">
<div class="input-group">
<input type="text" id="fieldrowItem_5" class="form-control fieldrowItem mb-3" placeholder="Row 5" data-value="0" required="" value="e">
<span id="spanrowItem_5" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id.split('_')[1]))">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
</div>

How to iterate through input's content

As you guys can see, I have two columns: Name and Tickets.
So John has 15 tickets, bob 10 and so on...
Objective: I want to make some sort of "lottery" where each person has X tickets. More tickets the more chance you have to win the prize.
I was trying to get both column separated by its class and then create some sort of "main array/object" something like this:
lottery = {
John => 15
Bob => 10
Milla => 7
}
And then I would try to pick a winner randomly... Just don't know how to do it.
Here I'm getting the inputs but I don't know how to "connect" them.
$('#sort').click(function(){
let names = $('.names');
let tickets = $('tickets');
let size = Object.keys(names).length;
}
HTML Structure:
<section id="content">
<div class="container participant">
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control">
<input type="text" aria-label="tickets" class="tickets form-control">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
</div>
</section>

Given that each user has multiple tickets in order to have more chance of winning it would make more sense to create an array with multiple instances of their names in which you then select from randomly.
To build the array you can use map() and then fill() to populate it with the names, before randomly selecting from it, something like this:
var arr = $('#content .container .row').map(function() {
var $row = $(this);
return new Array(parseInt($row.find('.tickets').val(), 10)).fill($row.find('.names').val());
}).get();
var winner = arr[Math.floor(Math.random() * arr.length)];
console.log('Winner: ', winner);
console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="content">
<div class="container participant">
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control" value="John">
<input type="text" aria-label="tickets" class="tickets form-control" value="15">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control" value="Bob">
<input type="text" aria-label="tickets" class="tickets form-control" value="10">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control" value="Milla">
<input type="text" aria-label="tickets" class="tickets form-control" value="7">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Nome & Tickets</span>
</div>
<input type="text" aria-label="name" class="names form-control" value="Kurt">
<input type="text" aria-label="tickets" class="tickets form-control" value="3">
<div class="input-group-append">
<button class="addUser btn btn-outline-secondary" type="button">
<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
</button>
</div>
</div>
</div>
</div>
</section>

Swap div content with one button

I have two types content in each div. One is a table and another is the form. I want to swap it by pressing a button.
HTML
<a id="btn" class="btn btn-primary pull-right"><i class="fa fa-envelope"> Contact Us</i></a>
<br style="clear:both" />
<div class="well well-sm">
<div id="table">
<table class="table table-bordered">
<tr>
<th>ID</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>001</td>
<td>DL650XT</td>
<td>369000</td>
</tr>
</table>
</div>
<div id="formDiv">
<form class="form" method="post" action="" name="contact" id="contact">
<fieldset>
<legend> Contact Form </legend>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="name" name="name" placeholder="Name *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="Nachricht*"></textarea>
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-primary btn-lg">Submit</button>
<button type="reset" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
</div>
</fieldset>
</form>
</div>
</div>
Javascript
$(document).ready(function() {
$('#formDiv').css('border', 'red !important');
//swap content
$('#btn').on('click',function() {
$('#table').hide();
$('#formDiv').prop('display', 'show');
})
});
It's only working once. I want the content swap every click.
Here's the fiddle : https://jsfiddle.net/krm85qq3/5/

You can use toggle function in order to display or hide the matched elements.
$('#btn').on('click',function() {
$('#table').toggle();
$('#formDiv').prop('display', 'show');
})
$(document).ready(function() {
$('#btn').on('click', function() {
$('#table').toggle();
$('#formDiv').toggle();
});
});
#formDiv {
display: none;
border: red;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="btn" class="btn btn-primary pull-right"><i class="fa fa-envelope"> Contact Us</i></a>
<br style="clear:both" />
<div class="well well-sm">
<div id="table">
<table class="table table-bordered">
<tr>
<th>ID</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>001</td>
<td>DL650XT</td>
<td>369000</td>
</tr>
</table>
</div>
<div id="formDiv">
<form class="form" method="post" action="" name="contact" id="contact">
<fieldset>
<legend> Contact Form </legend>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="name" name="name" placeholder="Name *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="Nachricht*"></textarea>
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-primary btn-lg">Submit</button>
<button type="reset" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
</div>
</fieldset>
</form>
</div>
</div>

You can use the jQuery toggle() function to... toggle between a show/hide state automatically :)

Toggle works great, but you can also handle it manually. For example, if you want to be able to perform certain functionality when the contact form is showing vs when the table is showing. The following code does the same thing the toggle would do, only applied manually. Just for variety. :)
$(document).ready(function() {
var formEl = $("#formDiv"),
tableEl = $("#table"),
btnEl = $("#btn");
//swap content
btnEl.on('click',function() {
if (tableEl.is(":visible")) {
tableEl.hide();
formEl.show();
btnEl.find("i").text(" Return to Table");
} else {
tableEl.show();
formEl.hide();
btnEl.find("i").text(" Contact Us");
}
})
});
#formDiv {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<a id="btn" class="btn btn-primary pull-right"><i class="fa fa-envelope"> Contact Us</i></a>
<br style="clear:both" />
<div class="well well-sm">
<div id="table">
<table class="table table-bordered">
<tr>
<th>ID</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>001</td>
<td>DL650XT</td>
<td>369000</td>
</tr>
</table>
</div>
<div id="formDiv">
<form class="form" method="post" action="" name="contact" id="contact">
<fieldset>
<legend> Contact Form </legend>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="name" name="name" placeholder="Name *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="Nachricht*"></textarea>
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-primary btn-lg">Submit</button>
<button type="reset" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
</div>
</fieldset>
</form>
</div>
</div>
In the above example, if the table is showing and you click on the button, I also wanted to change the text of the btn el. Thus, knowing the state of the table el and using that as my manual toggle point, I can tinker with the state of other elements at will.

How hide text input by combobox

How hide
<input type="text" class="form-control" name="c_a" id="c_a" value="$" >
when i select
<option value="img/p.png" >Piad</option>
in combobox
this form i used thank for evey one .
<form name="Form1" method="post" action="dashboard.php" id="Form1">
<div class="form-group input-group">
<span class="input-group-addon" ><i class="fa fa-user"></i></span>
<input type="text" class="form-control" name="c_number" value="" placeholder="TEST#TEST"></div>
<div class="form-group input-group">
<span class="input-group-addon" ><i class="fa fa-key"></i></span>
<input type="text" class="form-control" name="c_bab" value="" placeholder="Password"></div>
<div class="form-group input-group">
<span class="input-group-addon" ><i class="fa fa-phone"></i></span>
<input type="text" class="form-control" name="c_serail" value="" placeholder="0723228499" ></div>
<div class="form-group input-group">
<span class="input-group-addon" ><i class="fa fa-usd"></i></span>
<input type="text" class="form-control" name="c_a" id="c_a" value="$" ></div>
<div class="form-group input-group">
<span class="input-group-addon" ><i class="fa fa-link"></i></span>
<input type="text" class="form-control" name="c_point" value="" placeholder="اذا كان اليوزر تابع لمسوق او وكيل" ></div>
<div class="form-group input-group">
<select name="c_status" id="c_status" size="1" class="form-control" >
<option value="img/p.png" >Piad</option>
<option value="img/un.png">unPiad</option>
</select>
</div>
<input type="submit" class="btn btn-success" name="cards" value="ادخال" >
</form>

A pretty basic function to do this would be:
function hideElements() {
var selected = document.getElementById('c_status').value;
if (selected == 'img/p.png') {
document.getElementById('c_a').style.display = 'none';
} else {
document.getElementById('c_a').style.display = 'inline';
}
}
then you could add the following to your select box:
<select name="c_status" id="c_status" size="1" class="form-control" onchange="hideElements(this);" >

Add and remove multiple input group with jquery or javascript

I'm so confused how to add/remove multiple input fields in my code.
This is my code :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
<label class="col-sm-2 control-label">Kode Barang</label>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
<span class='glyphicon glyphicon-search'></span>
</a>
</div>
<input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Rp </div>
<input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Qty </div>
<input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<div class="input-group-addon">% </div>
<input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-0">
<button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
</div>
</div>
I want to add new group of input fields when i'm click the button.
Please advice, Thanks

Try this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
<label class="col-sm-2 control-label">Kode Barang</label>
<div class="input-div">
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
<span class='glyphicon glyphicon-search'></span>
</a>
</div>
<input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Rp </div>
<input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Qty </div>
<input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<div class="input-group-addon">% </div>
<input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
</div>
</div>
</div>
<div class="col-sm-0">
<button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
<button id="b2" class="btn btn-success add-more"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
</div>
And this is de jquery code:
$('#b1').click(function(){
var newGroup = $('.input-div').last().html();
$('.input-div').last().after('<div class="input-div">'+newGroup+'</div>');
});
$('#b2').click(function(){
$('.input-div').last().remove();
});

Categories