I need to trigger the class "alert success" when the button is clicked in HTML,
The code is:
function appendText() {
var title = $("#title").val();
var content = $("#content").val();
var type = $("#type").val();
var markup = "<div>" + title + content + "</div>";
$(".alert success").append(markup);
$(".closebtn").append()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="margin-top: 2%">
<select id="type">
<option value="success">success</option>
<option value="info">info</option>
<option value="warning">warning</option>
<option value="error">error</option>
</select>
<label for="title">title:</label>
<input type="text" value="title" id="title">
<label for="content">content:</label>
<input type="text" id="content" value="content" style="width: 50%">
<button onclick="appendText()">Add Notification</button>
</p>
I need to create dynamically the following HTML code when the button is clicked.
<div class="alert success">
<span class="closebtn">×</span>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Can you suggest the correct Jquery code for my need?
Here is working and simplified snippet.
Its appending the notification data and also the closebtn close button is working as well and deleting the clicked notification.
Just run snippet to see in action.
function appendText() {
var title = $("#title").val();
var content = $("#content").val();
var type = $("#type").val();
var markup = "<div class='results'><button class='closebtn' onclick='closeAlert(this)'>X</button> " + type + ' ' + title + ' ' + content + "</div>";
if (type === 'success') {
$('.messages').css({
"background-color": "green"
});
} else if (type === 'warning') {
$('.messages').css({
"background-color": "yellow"
});
} else if (type === 'error') {
$('.messages').css({
"background-color": "red"
});
} else if (type === 'info') {
$('.messages').css({
"background-color": "blue"
});
}
$(".messages").html(markup);
}
function closeAlert(_this) {
$(_this).parent().remove()
}
label,
button {
display: block;
}
.results {
display: flex;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="margin-top: 2%">
<select id="type">
<option value="success">success</option>
<option value="info">info</option>
<option value="warning">warning</option>
<option value="error">error</option>
</select>
<label for="title">title:</label>
<input type="text" value="title" id="title">
<label for="content">content:</label>
<input type="text" id="content" value="content" style="width: 50%">
<button onclick="appendText()">Add Notification</button>
</p>
<div class="messages"></div>
function appendText() {
var title = $("#title").val();
var content = $("#content").val();
var type = $("#type").val();
var result = '<div>'
+ title + ' ' + content
+ '<div class="alert success">'
+ '<span class="closebtn">×</span>'
+ '<strong>Success!</strong> Indicates a successful or positive action.'
+ '</div>'
+ '</div>';
$('#result').append(result);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="margin-top: 2%">
<select id="type">
<option value="success">success</option>
<option value="info">info</option>
<option value="warning">warning</option>
<option value="error">error</option>
</select>
<label for="title">title:</label>
<input type="text" value="title" id="title">
<label for="content">content:</label>
<input type="text" id="content" value="content" style="width: 50%">
<button onclick="appendText()">Add Notification</button>
</p>
<div id="result"></div>
For HTML Tags or Content
var content = "Hello World";
$(".className").html(content);
Or
var content = "<b>Hello World</b>";
$(".className").html(content);
Related
i want to select a platform from checkbox1 and select the value from dropdown1
as a result i want in dropdown2 it shows the value related to the platfrom
example :
i check GI and 90 >> result in dropdown2 = 90 gi
if i check GI and xdo 190 >> result : 190 gi and 190 xdo
and would love that the value appear in the textbox 'lns'.
i tried some code but not working properly :
<script>
$(document).ready(function()
{$('option[id^=sb]').hide();
$('input[id^=chk]').change(function(){
var index = $(this).attr('id').replace('chk','');
if($(this).is(':checked'))
$('#sb'+index).show();
else
$('#sb'+index).hide();
}); });
$(function(){
$("#dropdown1").on("change",function(){
var levelClass = $('#dropdown1').find('option:selected').attr('class');
console.log(levelClass);
$('#dropdown2 option').each(function () {
var self = $(this);
if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") {
self.show();
} else {
self.hide();
}}); });});
function chlink(){
var dropdown2 = document.getElementById('dropdown2');
var a = dropdown2.options[dropdown1.selectedIndex].value;
var textbox = document.getElementById('lns');
textbox.value = a; }
Any Help :)
This should work
$(document).ready(function(){
$('.chlink').on('click', function(){
gatherValuesFromInputs();
});
});
function gatherValuesFromInputs() {
var result = '';
$('.chk:checked').each(function(index){
if(index == 0) {
result += $('#dropdown').val() + " " + $(this).val();
} else {
result += ' and ' + $('#dropdown').val() + " " + $(this).val();
}
});
$('#lns').val(result);
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="row">
<div class="column">
<div style="float:right">
<label for="option1">Xdo</label>
<input class="chk" id="option1" type="checkbox" name="option1" value="xdo">
</div>
<div style="float:right">
<label for="option2">GI</label>
<input class="chk" id="option2" type="checkbox" name="option2" value="gi">
</div>
<div style="float:right">
<label for="option3">PayF</label>
<input class="chk" id="option3" type="checkbox" name="option3" value="PayF">
</div>
<div style="float:right">
<label for="option4">HiP</label>
<input class="chk" id="option3" type="checkbox" name="option4" value="HiP"/>
</div>
</div>
</div>
<br>
<select id="dropdown" name="dropdown">
<option>choisissez un Pack</option>
<option value="90"> LIEN 90 </option>
<option value="190"> LIEN 190 </option>
</select>
<br><br>
<button class="chlink">Generer Lien</button>
<p><input name="lns" id="lns" type="text" /></p>
You can store checkboxes value to an array and whenever a checkbox is checked you can display values related to it and whenever a checkbox is unchecked hide the data related to it . Also i have made some changes in your html as well in script.Working example :
var index = [];
$(document).ready(function() {
//hide all contents
$('option[id^=sb]').hide();
$('input[id^=chk]').change(function() {
//checking if checkbox is check put it in array
if ($(this).is(':checked')) {
index.push($(this).attr('id').replace('chk_', ''));
} else {
//if uncheck remove the element from array
if ((index1 = index.indexOf($(this).attr('id').replace('chk_', '')) !== -1)) {
//hide all options related to that
for (var i = 0; i < index.length; i++) {
if (!$('#chk_' + index[i]).prop("checked")) {
//hide option
$('.' + index[i]).hide();
}
}
//removing values from array
index.splice($.inArray(index1, index), 1);
}
}
//if check box is checked show options related to that
for (var i = 0; i < index.length; i++) {
if ($('#chk_' + index[i]).prop("checked")) {
$('.' + index[i]).show();
}
}
});
$(function() {
$("#dropdown1").on("change", function() {
var levelClass = $('#dropdown1').find('option:selected').attr('class');
//looping through array
for (var i = 0; i < index.length; i++) {
$('#dropdown2 option').each(function() {
var self = $(this);
if (self.val() == levelClass || typeof(levelClass) == "undefined" && self.hasClass(levelClass)) {
//self.show();
//showing option with class and value from array
$('.' + levelClass + '.' + index[i]).show();
} else {
//self.hide();
//hiding options
$('.' + index[i]).not('.' + levelClass).hide();
}
});
}
});
});
//on click of Generer Lien button
$(".values").on("click", function() {
//getting values of dropdown
var v = $("#dropdown2").val();
//assign to input
$("#lns").val(v);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="row">
<div class="column">
<div style="float:right">
<label for="option1">Xdo </label>
<input id="chk_xdo" type="checkbox" name="chb[]" value="xdo" autocomplete="on">
</div>
<div style="float:right">
<label for="option2">GI</label>
<input id="chk_gi" type="checkbox" name="chb[]" value="gi">
</div>
<div style="float:right">
<label for="option3">PayF</label>
<input id="chk_payf" type="checkbox" name="chb[]" value="PayF">
</div>
<div style="float:right">
<label for="option4">HiP</label>
<input id="chk_hip" type="checkbox" name="chb[]" value="HiP" />
</div>
</div>
</div>
<br>
<select id="dropdown1" name="dropdown1">
<option value="">choisissez un Pack</option>
<option class="490" value="490"> 490,00 </option>
<option class="390" value="390"> 390,00 </option>
<option class="290" value="290"> 290,00 </option>
<option class="190" value="190"> 190,00 </option>
<option class="90" value="90"> 90,00 </option>
</select>
<br>
<select id="dropdown2" name="dropdown2">
<option></option>
<option style="color:#0bb6b6" class="90" value="90">LIEN 90</option>
<option id="sb1" class=" xdo 90" value="xdo90">90 xdo</option>
<option id="sb2" class=" gi 90" value="gi90">90 gi</option>
<option id="sb3" class=" hip 90" value="hip90">90 hip</option>
<option style="color:#0bb6b6" class="190" value="190">LIEN 190</option>
<option id="sb1" class=" xdo 190" value="xdo190">190 xdo</option>
<option id="sb2" class="gi 190" value="gi190">190 gi</option>
<option id="sb3" class="hip 190" value="hip190">190 hi</option>
</select>
<br><br>
<button class="values">Generer Lien </button>
<p><input name="lns" id="lns" type="text" /></p>
I am trying to take my form which outputs to a text area on the same page and have it only show any enabled fields. You can see it at my JSFiddle here, Right now, when you click the "Combine" button it outputs all 4 categories even though two are disabled by default.
So it will output:
Optional Detail:
Default Detail:
Optional Selection:
Default Selection:
But I want it to look like this if the details toggles are unchecked:
Default Detail:
Default Selection:
Here's my script:
function convertForm() {
var detailToggle = document.getElementById("detailToggle").value;
var basicDetail = document.getElementById("basicDetail").value;
var selectOne = document.getElementById("selectOne").value;
var selectTwo = document.getElementById("selectTwo").value;
var output = "";
output += "Optional Detail: " + detailToggle + "\n";
output += "Default Detail: " + basicDetail + "\n";
output += "Optional Selection: " + selectOne + "\n";
output += "Default Selection: " + selectTwo + "";
document.getElementById("output3").value = output;
}
function toggle(checkboxID, toggleID) {
var checkbox = document.getElementById(checkboxID);
var toggle = document.getElementById(toggleID);
updateToggle = checkbox.checked ? toggle.disabled=false :
toggle.disabled=true;
}
function ResetForm() {
document.getElementById("detailToggle").disabled = true;
document.getElementById("selectOne").disabled = true;
}
And the HTML:
<table width="100%" height=" " border="0"><tr>
<td width=550 valign=top>
<form name="Form3" onsubmit="return false;" action="">
Toggle detail:
<input type="checkbox" id="ChecktoggleDetail" class="formArea"
name="Toggledetail" onClick="toggle('ChecktoggleDetail', 'detailToggle')">
<input type="text" class="formArea" name="details"
id="detailToggle" placeholder="Toggle field" disabled required>
<br>
Detail:
<br>
<input type="text" class="formArea" name="Basicdetail" id="basicDetail"
placeholder="Some detail" maxlength="25" required>
<br>
Selection 1:
<input type="checkbox" id="CheckselectOne" class="formArea"
name="detailsgiven" onClick="toggle('CheckselectOne', 'selectOne')">
<br>
<select type="drop" class="formArea" name="Selectone" id="selectOne"
disabled required>
<option value="" disabled selected>...</option>
<option value="Option One">Option 1</option>
<option value="Option Two">Option 2</option>
</select>
<br>
Selection 2:
<br>
<select type="drop" class="formArea" name="Selecttwo" id="selectTwo"
required>
<option value="" disabled selected>...</option>
<option value="Option One">Option 1</option>
<option value="Option two">Option 2</option>
</select>
<br>
</td>
<td valign="top">
<table border="0" height="200" ><tr><td valign="top" height=200>
<textarea type="textarea" class="formArea" name="form3output" id="output3"
onclick="this.focus();this.select()" cols="70" rows="10" placeholder=""
required></textarea><br>
</td></tr>
<tr><td valign=top>
<div class="btn-group">
<button value="Combine" onclick="convertForm()"
id="combine3">Combine</button>
</div>
<br>
<div class="btn-group2">
<button type="reset" value="Reset form" onclick="ResetForm();">Reset
form</button> <br>
</div>
</form>
</td></tr></table>
I am still new to Javascript, I am guessing there is some variable to insert, but am not sure what it is. Any help is appreciated.
You May Try For This:
Here I just check the disabled property of the element, if element is not disabled then i added text to output,
function convertForm() {
var detailToggle = document.getElementById("detailToggle").value;
var basicDetail = document.getElementById("basicDetail").value;
var selectOne = document.getElementById("selectOne").value;
var selectTwo = document.getElementById("selectTwo").value;
debugger;
var output = "";
if(!document.getElementById("detailToggle").disabled){
output += "Optional Detail: " + detailToggle + "\n";
}
if(!document.getElementById("basicDetail").disabled){
output += "Default Detail: " + basicDetail + "\n";
}
if(!document.getElementById("selectOne").disabled){
output += "Optional Selection: " + selectOne + "\n";
}
if(!document.getElementById("selectTwo").disabled){
output += "Default Selection: " + selectTwo + "";
}
document.getElementById("output3").value = output;
}
function toggle(checkboxID, toggleID) {
var checkbox = document.getElementById(checkboxID);
var toggle = document.getElementById(toggleID);
updateToggle = checkbox.checked ? toggle.disabled=false : toggle.disabled=true;
}
function ResetForm() {
document.getElementById("detailToggle").disabled = true;
document.getElementById("selectOne").disabled = true;
}
For More info visit me on:
https://jsfiddle.net/66qpfyhh/8/
Use below javascript to check element is disabled first then append in variable
Check updated fiddle : https://jsfiddle.net/yogesh078/66qpfyhh/1/
function convertForm() {
var detailToggle = document.getElementById("detailToggle");
var basicDetail = document.getElementById("basicDetail");
var selectOne = document.getElementById("selectOne");
var selectTwo = document.getElementById("selectTwo");
var output = "";
if (!detailToggle.disabled) {
output += "Optional Detail: " + detailToggle.value + "\n";
}
if (!basicDetail.disabled) {
output += "Default Detail: " + basicDetail.value + "\n";
}
if (!selectOne.disabled) {
output += "Optional Selection: " + selectOne.value + "\n";
}
if (!selectTwo.disabled) {
output += "Default Selection: " + selectTwo.value + "";
}
document.getElementById("output3").value = output;
}
function toggle(checkboxID, toggleID) {
var checkbox = document.getElementById(checkboxID);
var toggle = document.getElementById(toggleID);
updateToggle = checkbox.checked ? toggle.disabled = false : toggle.disabled = true;
}
function ResetForm() {
document.getElementById("detailToggle").disabled = true;
document.getElementById("selectOne").disabled = true;
}
This code snippet can solve your problem.
function convertForm() {
var detailToggle = document.getElementById("detailToggle").value;
var basicDetail = document.getElementById("basicDetail").value;
var selectOne = document.getElementById("selectOne").value;
var selectTwo = document.getElementById("selectTwo").value;
if(document.getElementById("detailToggle").disabled)
detailToggle='';
if(document.getElementById("selectOne").disabled)
selectOne='';
var output = "";
output += "Optional Detail: " + detailToggle + "\n";
output += "Default Detail: " + basicDetail + "\n";
output += "Optional Selection: " + selectOne + "\n";
output += "Default Selection: " + selectTwo + "";
document.getElementById("output3").value = output;
}
function toggle(checkboxID, toggleID) {
var checkbox = document.getElementById(checkboxID);
var toggle = document.getElementById(toggleID);
updateToggle = checkbox.checked ? toggle.disabled=false : toggle.disabled=true;
}
function ResetForm() {
document.getElementById("detailToggle").disabled = true;
document.getElementById("selectOne").disabled = true;
}
<table width="100%" height=" " border="0"><tr>
<td width=550 valign=top>
<form name="Form3" onsubmit="return false;" action="">
Toggle detail:
<input type="checkbox" id="ChecktoggleDetail" class="formArea"
name="Toggledetail" onClick="toggle('ChecktoggleDetail', 'detailToggle')">
<input type="text" class="formArea" name="details"
id="detailToggle" placeholder="Toggle field" disabled required>
<br>
Detail:
<br>
<input type="text" class="formArea" name="Basicdetail" id="basicDetail"
placeholder="Some detail" maxlength="25" required>
<br>
Selection 1:
<input type="checkbox" id="CheckselectOne" class="formArea"
name="detailsgiven" onClick="toggle('CheckselectOne', 'selectOne')">
<br>
<select type="drop" class="formArea" name="Selectone" id="selectOne" disabled required>
<option value="" disabled selected>...</option>
<option value="Option One">Option 1</option>
<option value="Option Two">Option 2</option>
</select>
<br>
Selection 2:
<br>
<select type="drop" class="formArea" name="Selecttwo" id="selectTwo" required>
<option value="" disabled selected>...</option>
<option value="Option One">Option 1</option>
<option value="Option two">Option 2</option>
</select>
<br>
</td>
<td valign="top">
<table border="0" height="200" ><tr><td valign="top" height=200>
<textarea type="textarea" class="formArea" name="form3output" id="output3"
onclick="this.focus();this.select()" cols="70" rows="10" placeholder="" required> </textarea><br>
</td></tr>
<tr><td valign=top>
<div class="btn-group">
<button value="Combine" onclick="convertForm()" id="combine3">Combine</button>
</div>
<br>
<div class="btn-group2">
<button type="reset" value="Reset form" onclick="ResetForm();">Reset form</button> <br>
</div>
</form>
</td></tr></table>
My concept is to create maximum 20 blocks( it contains some input field) on button click "Add", If you tap on "Add" button then new block could be added, that was successfully done. Now i want to remove the block which is created on "Add" button click.
Eg: If user is create 5 block by using in "ADD" button. If user taps on "Minus" button, in Block 2, then Block 2 should be removed from the list and count of the block should be updated correspondingly.
http://www.w3schools.com/code/tryit.asp?filename=FADO51NINJMD
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var i = 1;
$(document).ready(function () {
$("#commentForm").validate();
});
function add()
{
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
var label = document.createElement('label');
label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" value="Minus" onclick="minus()"></h5>';
divtest.appendChild(label);
var length = $('#Length').clone().attr('id', 'Length' + i).attr('name', 'Length' + i);
var attribute = $('#Attribute').clone().attr('id', 'Attribute' + i).attr('name', 'Attribute' + i);
var column = $('#Column').clone().attr('id', 'Column' + i).attr('name', 'Column' + i);
length.appendTo(divtest);
attribute.appendTo(divtest);
column.appendTo(divtest);
objTo.appendChild(divtest);
i++
}
function minus()
{
}
</script>
</head>
<body>
<form id="commentForm" method="post" action="">
<div id="room_fileds">
Static Field
<input type="text" name="Length" maxlength="2" id="Length" onkeypress="return isNumberKey(event);" placeholder="Field 1 Length" class="form-control required">
<input type="text" name="Attribute" id="Attribute" placeholder="Field 1 Attribute" class="form-control" required>
<select name="Column" id="Column" class="required" >
<option selected value="">Field Column </option>
<option value="1">YES</option>
<option value="2">NO</option>
</select>
</div>
<br><br>
<input class="submit" type="submit" value="Submit1">
<input type="button" value="Add" onclick="add()">
</form>
</body>
</html>
Set id while creating div node
divtest.setAttribute("id", "div" + i);
For minus function pass created id number in onclick
label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" onclick="minus('+i+')" value="Minus"></h5>';
And set minus function as
function minus(_id)
{
var _div_id = "div" + _id;
var _div_elem = document.getElementById(_div_id);
_div_elem.parentNode.removeChild(_div_elem);
}
var i = 1;
$(document).ready(function () {
//$("#commentForm").validate();
});
function add()
{
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
divtest.setAttribute("id","div" + i);
var label = document.createElement('label');
label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" onclick="minus('+i+')" value="Minus"></h5>';
divtest.appendChild(label);
var length = $('#Length').clone().attr('id', 'Length' + i).attr('name', 'Length' + i);
var attribute = $('#Attribute').clone().attr('id', 'Attribute' + i).attr('name', 'Attribute' + i);
var column = $('#Column').clone().attr('id', 'Column' + i).attr('name', 'Column' + i);
length.appendTo(divtest);
attribute.appendTo(divtest);
column.appendTo(divtest);
objTo.appendChild(divtest);
i++
}
function minus(_id)
{
var _div_id = "div" + _id;
var _div_elem = document.getElementById(_div_id);
_div_elem.parentNode.removeChild(_div_elem);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form id="commentForm" method="post" action="">
<div id="room_fileds">Static Field
<input type="text" name="Length" maxlength="2" id="Length" onkeypress="return isNumberKey(event);" placeholder="Field 1 Length" class="form-control required">
<input type="text" name="Attribute" id="Attribute" placeholder="Field 1 Attribute" class="form-control" required>
<select name="Column" id="Column" class="required" >
<option selected value="">Field Column </option>
<option value="1">YES</option>
<option value="2">NO</option>
</select>
</div><br><br>
<input class="submit" type="submit" value="Submit1">
<input type="button" value="Add" onclick="add()">
</form>
You can just remove the label parent on click. See the minus function content.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var i = 1;
$(document).ready(function () {
$("#commentForm").validate();
});
function add()
{
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
var label = document.createElement('label');
label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" value="Minus" onclick="minus()"></h5>';
divtest.appendChild(label);
var length = $('#Length').clone().attr('id', 'Length' + i).attr('name', 'Length' + i);
var attribute = $('#Attribute').clone().attr('id', 'Attribute' + i).attr('name', 'Attribute' + i);
var column = $('#Column').clone().attr('id', 'Column' + i).attr('name', 'Column' + i);
length.appendTo(divtest);
attribute.appendTo(divtest);
column.appendTo(divtest);
objTo.appendChild(divtest);
i++
}
function minus()
{
//This is the clicked label, so we remove the parent (the div)
$(this).parent().remove();
}
</script>
</head>
<body>
<form id="commentForm" method="post" action="">
<div id="room_fileds">
Static Field
<input type="text" name="Length" maxlength="2" id="Length" onkeypress="return isNumberKey(event);" placeholder="Field 1 Length" class="form-control required">
<input type="text" name="Attribute" id="Attribute" placeholder="Field 1 Attribute" class="form-control" required>
<select name="Column" id="Column" class="required" >
<option selected value="">Field Column </option>
<option value="1">YES</option>
<option value="2">NO</option>
</select>
</div>
<br><br>
<input class="submit" type="submit" value="Submit1">
<input type="button" value="Add" onclick="add()">
</form>
</body>
</html>
<div class="removePhoneDiv">
<input type="button" value="Add Text Field" id="add_button" >
<ul style="list-style:none;" id="phoneNumberList">
<li class='Textbox1' style="float:left;width:100%;">
<div style=" margin-top: 2%; " class='form-group' id='answerdiv'>
<input type='text' class='input_phone form-control1'>
<img style="float:left;" src="images/close.png" class="remove_phone_number">
</div>
</li>
</ul>
</div>
<script>
var wrapper = $(".form-group");
$("#add_button").click(function (e) {
e.preventDefault();
$("#phoneNumberList").append("<li class='Textbox1'><div class='form-group' id='answerdiv'><input type='text' class='form-control1' ><img src=\"images/close.png\" class=\"remove_phone_number\"></div></li>");
});
$(".removePhoneDiv").on("click", ".remove_phone_number", function (e) {
e.preventDefault();
$(this).parent('div').parent('li').remove();
})
</script>
I want to add dynamic dropdown & textbox. But for textbox is ok. I am not ok in dropdown. The Data are not include in Dropdown.I am loop to retrieve data in blade.I am describe my code.
form.blade.php
<div class="form-group">
<label for="type">Gas Container Type</label>
<select class="form-control input-sm" name="gas" id="gas">
#foreach($gass as $gas)
<option value="{{$gas->name}}">{{$gas->name}}</option>
#endforeach
</select><!-- end of Item_Drop_Down -->
</div>
<input name="name[]" type="text" id="name" class="name" placeholder="Input 1">
Add More Input Field
master.blade.php
<script>
$(document).ready(function () {
var e = document.getElementById("gas");
$('#add').click(function () {
var inp = $('#box');
var i = $('input').size() + 1;
$('<div id="box' + i + '">' + '' +
'<input type="text" id="name" class="name" name="name[]" placeholder="Input ' + i + '"/>' + '' +
'<select id="gas" name="gas[]" ' + i + '"/><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>')
.appendTo($('#box form'));
i++;
});
{{--<select data-bind="options: availableCountries, optionsText: 'name', optionsValue: 'value'"></select>--}}
$('body').on('click', '#remove', function () {
$(this).parent('div').remove();
});
});
controller.php
public function store(Request $request)
{
foreach ($request->get('name') as $name) {
$kg = new WarehouseGasIn();
$kg->kg = $name;
//dd($request->get('name'));
$kg->save();
}
<script>
$(document).ready(function () {
$('#add').click(function () {
var inp = $('#box');
var i = $('input').size() + 1 - 2;
$('<div id=box' + i + '"><input type="text" id="name" class="name" name="name[0][]" placeholder="Input ' + i + '"/><select class="form-control input-sm" name="shop" id="shop"><option value="">{{"Shop"}}</option>#foreach($branches as $branch)<option value="{{$branch->id}}">{{$branch->name}}</option>#endforeach</select><select name="name[1][]" id="gas" ' + i + '>#foreach($gass as $gas) <option value="{{$gas->id}}">{{$gas->name}}</option>#endforeach</select><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>').appendTo($('#box form'));
i++;
});
$('body').on('click', '#remove', function () {
$(this).parent('div').remove();
});
});
</script>
is this the sort of thing you are trying to achieve?
$(document).ready(function () {
var boxesWrap = $('#boxes-wrap');
var boxRow = boxesWrap.children(":first");
var boxRowTemplate = boxRow.clone();
boxRow.find('button.remove-gas-row').remove();
// nb can't use .length for inputCount as we are dynamically removing from middle of collection
var inputCount = 1;
$('#add').click(function () {
var newRow = boxRowTemplate.clone();
inputCount++;
newRow.find('input.name').attr('placeholder', 'Input '+inputCount);
boxesWrap.append(newRow);
});
$('#boxes-wrap').on('click', 'button.remove-gas-row', function () {
$(this).parent().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes-wrap">
<div>
<div class="form-group">
<label>Gas Container Type</label>
<select class="form-control input-sm" name="gas[]">
<option value="gas-1">Container 1</option>
<option value="gas-2">Container 2</option>
</select><!-- end of Item_Drop_Down -->
</div>
<input name="name[]" type="text" class="name" placeholder="Input 1">
<button class="remove-gas-row" type="button">Remove</button>
</div>
</div>
Add More Input Field
I have a section in my system that allows users to enter ingredients and then when they click 'live preview' each ingredient is printed out in plain text so they can check spelling using jQuery. However it will only print out the first element and not the ones after. Can anyone see why? Here is the fiddle http://jsfiddle.net/X94At/
HTML
<div class="recipe-ingredients pure-u-1 pad8bottom clearfix">
<span class="heading">Ingredients</span>
<div class="ingredients pure-u-1 clearfix">
<div class="ingredient pure-u-1 clearfix">
<p>
<input type="text" id="ingredient_1" name="ingredient[]" placeholder="Ingredient" class="element pure-u-6-24" />
<input type="text" id="quantity_1" name="quantity[]" value="" placeholder="Quantity" class="element pure-u-4-24" />
<select id="selectQuantity_1" name="quantityType[]" class="element pure-u-3-24">
<option value="grams">Grams</option>
<option value="ounces">Ounces</option>
<option value="Pounds">Pounds</option>
</select>
<input type="text" id="alternative_1" name="alternative[]" value="" placeholder="Alternative Ingredient" class="element pure-u-6-24" />
<input type="text" id="addedQuantiy_1" name="addedQuantity[]" value="" placeholder="Quantity per extra person" class="element pure-u-4-24" />
</p>
</div>
</div>
Add Ingredient
</div>
HTML For the Live Preview
<div id="toPopup">
<div class="close">×</div> <span class="ecs_tooltip">End Preview<span class="arrow"></span></span>
<div id="live-preview-display">
<div id="lp-name"></div>
<div id="lp-ingredientslist">
<h3>Ingredients</h3>
</div>
<div id="lp-step">
<h3>Method</h3>
</div>
</div>
</div>
<div class="loader"></div>
<div id="backgroundPopup"></div>
jQuery
$(".ingredient").on('blur change focus', function () {
$('.ingredient p').each(function () {
var i = $('.ingredient p').size(),
el = $(this);
if ($('#lp-ingredientslist .ingredient_' + i).length == 0) {
$("#lp-ingredientslist").append('<span class="ingredient_' + i + '"></span>');
}
var ingredient = el.find('input[name="ingredient[]"]').val(),
quantity = el.find('input[name="quantity[]"]').val(),
quantityType = el.find('select[name="quantityType[]"]').val(),
alternative = el.find('input[name="alternative[]"]').val();
if (!quantity || !ingredient)
return;
var alt = '';
if (alternative.length >= 0) {
alt = ' (you can also use ' + alternative + ')';
}
$('#lp-ingredientslist .ingredient_' + i).html(i + '. ' + quantity + ' ' + quantityType + ' of ' + ingredient + alt + '</br></br> ');
});
});
jQuery to add an ingredient
$('.recipe-ingredients #addNewIngredient').on('click', function () {
var i = $('.recipe-ingredients .ingredient').size() + 1;
$('<div class="ingredient pure-u-1 clearfix"><input type="text" id="ingredient_' + i + '" name="ingredient[]" placeholder="Chocolate" class="element pure-u-6-24" /><input type="text" id="quantity_' + i + '" name="quantity[]" value="" placeholder="Quantity" class="element pure-u-4-24" /><select id="selectQuantity_1" name="quantityType[]" class="element pure-u-3-24"><option value="grams">Grams</option><option value="ounces">Ounces</option><option value="Pounds">Pounds</option></select><input type="text" id="alternative_' + i + '" name="alternative[]" value="" placeholder="Alternative Ingredient" class="element pure-u-6-24" /><input type="text" id="addedQuantiy_' + i + '" name="addedQuantity[]" value="" placeholder="Quantity per extra person" class="element pure-u-4-24" />×</div>').appendTo($('.recipe-ingredients .ingredients'));
Thanks!
Not perfect needs improvement
Working Fiddle
$(".ingredient").on('blur change focus', function () {
this line needs to be replaced by
$('.ingredients').on('blur change focus', function () {
as you dynamically are adding the .ingredient class so the changes would appear at .ingredients....
Update
Fiddle with a new look Credit goes to #WASasquatch for pointing it out...
Hope it helps....!!