I managed to dynamically add input fields using this code :
My HTML :
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row ">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
My script :
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(
`
<div class="col-12">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
No, I'm trying to get the id_casting of each selected item in selecbox for each added rows
So I tried the following scipt :
<script type="text/javascript">
$(document).ready(function(){
$("#id_casting").change(function(){
console.log("clickk");
let id_casting = $(this).find("option:selected").data("id");
console.log(id_casting);
});
});
/* });*/
</script>
Bu this script get only the id_casting of the first row and when I add a new row and I select item from select-box it doesn't get the id_casting of the selected item of select-box added
dynamically.
Related
I was able to get the value for Description (textarea) from the first service (selected input) (which is right), for the attribute of data id, but I'm having a problem getting it from appended elements, after using the add more button
What am I missing, please?
Below is my code and I can explain further if need be.
<div class="service-box">
<div class="row">
<div class="col-md-12 service-group">
<div class="row">
<div class="form-group mb-3 col-md-6">
<label class="form-label">Service</label>
<div >
<select type="text" class="form-select" placeholder="Services" value="" name="service" id="service">
<option value="" disabled selected>Select your option</option>
#foreach ($services as $service)
<option value="{{$service->service_name}}" data-id="{{$service->description}}">{{$service->service_name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group mb-3 col-md-6">
<label class="form-label">Amount</label>
<div >
<input type="text" class="form-control" name="amount" id="amount" placeholder="Amount">
</div>
</div>
<div class="form-group mb-3 col-md-12">
<label class="form-label">Description</label>
<textarea class="form-control" id="description" name="description" rows="6" placeholder="Content.." readonly></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" id="addmore" class="btn btn-default">Add more</button>
<button type="button" id="remove" class="btn btn-default">Remove</button>
</div>
$("#addmore").click(function() {
var serviceGroupHTML = $('.service-group').html();
$( ".service-box" ).append(serviceGroupHTML);
});
$("#remove").on("click", function() {
$(".service-box").children().last().remove();
});
<!-- This is where the problem lies -->
const service = new Array(document.getElementById("service"));
const description = new Array(document.getElementById("description"));
service[0].addEventListener("change", function(){
description[0].value = $('#service option:selected').data('id');
})
service[1].addEventListener("change", function(){
description[1].value = $('#service option:selected').data('id');
})
As your newly created element are dynamic so you need to bind it with static element. Then, you can get the value of the data-attribute by using $(this).find("option:selected").data("id") and assign this to your textarea of that particular group .
Demo Code :
$("#addmore").click(function() {
$('.service-group:first').clone().find("input:text,textarea").val("").end()
.appendTo('.service-box');
});
$("#remove").on("click", function() {
$(".service-box").children().last().remove();
});
$("body").on("change", "select[name=service]", function() {
//get description for data-attribute
var description = $(this).find("option:selected").data("id");
//assign value
$(this).closest(".service-group").find("textarea[name=description]").val(description)
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="service-box">
<div class="row service-group">
<div class="col-md-12">
<div class="row">
<div class="form-group mb-3 col-md-6">
<label class="form-label">Service</label>
<div>
<select type="text" class="form-select" placeholder="Services" value="" name="service">
<option value="" disabled selected>Select your option</option>
<option value="1" data-id="This test">XYZ</option>
<option value="1" data-id="This test22">Z22</option>
<option value="1" data-id="This test33">YZ33</option>
</select>
</div>
</div>
<div class="form-group mb-3 col-md-6">
<label class="form-label">Amount</label>
<div>
<input type="text" class="form-control" name="amount" id="amount" placeholder="Amount">
</div>
</div>
<div class="form-group mb-3 col-md-12">
<label class="form-label">Description</label>
<textarea class="form-control" name="description" rows="6" placeholder="Content.." readonly></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" id="addmore" class="btn btn-default">Add more</button>
<button type="button" id="remove" class="btn btn-default">Remove</button>
</div>
I'm building a simple Registration page and am validating some inputs with a .js external file. The thing is that most of the code works but a small part of it doesn't. As you can see I change the status of some fields using document.getElementById(id).disabled = false, for instance. The code is the same for ids MP1, MP2, and MP3. When the procedure calls the script it seems that the MP3 id is not recognized. The weird part is that if I copy the script onto the main page, alongside the HTML form, and stop using the external file everything works. Does anyone have a clue on how to fix that? I'd like to use an external file instead of writing the script on the main page.
The script below enables all the required fields as expected except for the MP3 id field. It only works when the code is on the body of the main file.
function validarForm() {
var optionCheckBox1 = document.getElementById("check-blenda");
if (optionCheckBox1.checked) {
document.getElementById("MP3").disabled = false;
document.getElementById("perc-mp1").disabled = false;
document.getElementById("MP2").disabled = false;
document.getElementById("perc-mp2").disabled = false;
} else {
document.getElementById("perc-mp1").disabled = true;
document.getElementById("perc-mp1").value = "";
document.getElementById("MP2").disabled = true;
document.getElementById("perc-mp2").disabled = true;
document.getElementById("perc-mp2").value = "";
document.getElementById("MP2").value = "";
}
}
<h2>Cadastro de Produtos</h2>
<form method="post">
<div class="row">
<div class="col-md-1 mt-3 align-self-center d-flex justify-content-start">
<label for="tipo" class="form-label">Tipo:</label>
</div>
<div class="col-md-2 mt-3">
<select class="form-select" aria-label="tipo" name="tipo" id="tipo">
<option value="">Selecione o tipo</option>
<option value="1">Bobina</option>
<option value="2">Saco</option>
<option value="3">Folha Cortada</option>
</select>
</div>
<div class="col-md-1 mt-3 align-self-center d-flex justify-content-start">
<label for="config" class="form-label">Configuração:</label>
</div>
<div class="col-md-3 mt-3">
<select class="form-select" aria-label="config" name="config" id="config">
<option value="">Selecione a Configuração</option>
<option value="1"></option>
<option value="2">Tubular</option>
<option value="3">Folha Simples</option>
<option value="4">Folha Dupla</option>
<option value="5">Ref. 1 Lado</option>
<option value="6">Bolha</option>
<option value="7">Gofrada</option>
</select>
</div>
<div class="mt-3 col-md-auto align-self-center d-flex justify-content-start">
<label for="MP" class="form-label">Matéria Prima:</label>
</div>
<div class="col-md-2 mt-3 align-self-center d-flex justify-content-start">
<select class="form-select" aria-label="MP" name="MP" id="MP">
<option value="">Selecione a MP</option>
<option value="1">Reciclado Canela</option>
<option value="2">Reciclado Preto</option>
<option value="3">Reciclado Colorido</option>
<option value="4">Reciclado Cristal</option>
<option value="5">PEBD Virgem</option>
<option value="6">PEAD Virgem</option>
</select>
</div>
<div class="col-md-1 mt-3 form-check">
<input class="form-check-input" type="checkbox" value="" id="check-blenda" onchange="validarForm()">
<label class="form-check-label d-flex justify-content-center" for="check-blenda">Blenda</label>
</div>
</div>
<div class="row">
<div class="mt-3 col-md-1 align-self-center">
<label for="perc-mp1" class="form-label">% MP 1:</label>
</div>
<div class="mt-3 col-md-1">
<input type="text" class="form-control" aria-label="perc-mp1" name="perc-mp1" id="perc-mp1" disabled>
</div>
<div class="mt-3 col-md-auto align-self-center d-flex justify-content-start">
<label for="MP2" class="form-label">Matéria Prima 2:</label>
</div>
<div class="col-md-2 mt-3 align-self-center d-flex justify-content-start">
<select class="form-select" aria-label="MP2" name="MP2" id="MP2" disabled>
<option value="">Selecione a MP</option>
<option value="1">Reciclado Canela</option>
<option value="2">Reciclado Preto</option>
<option value="3">Reciclado Colorido</option>
<option value="4">Reciclado Cristal</option>
<option value="5">PEBD Virgem</option>
<option value="6">PEAD Virgem</option>
</select>
</div>
<div class="mt-3 col-md-1 align-self-center d-flex justify-content-end">
<label for="perc-mp2" class="form-label">% MP 2:</label>
</div>
<div class="mt-3 col-md-1">
<input type="text" class="form-control" aria-label="perc-mp2" name="perc-mp2" id="perc-mp2" disabled>
</div>
<div class="mt-3 col-md-auto align-self-center d-flex justify-content-start">
<label for="MP3" class="form-label">Matéria Prima 3:</label>
</div>
<div class="col-md-2 mt-3 align-self-center d-flex justify-content-start">
<select class="form-select" aria-label="MP3" name="MP3" id="MP3" disabled>
<option value="">Selecione a MP</option>
<option value="1">Reciclado Canela</option>
<option value="2">Reciclado Preto</option>
<option value="3">Reciclado Colorido</option>
<option value="4">Reciclado Cristal</option>
<option value="5">PEBD Virgem</option>
<option value="6">PEAD Virgem</option>
</select>
</div>
<div class="mt-3 col-md-1 align-self-center d-flex justify-content-end">
<label for="perc-mp3" class="form-label">% MP 3:</label>
</div>
<div class="mt-3 col-md-1">
<input type="text" class="form-control" aria-label="perc-mp3" name="perc-mp3" id="perc-mp3" disabled>
</div>
</div>
<div class="mt-4 col-md-auto align-self-center d-flex justify-content-start">
<button type="button" class="btn btn-primary" onclick="validarblendas()">Cadastrar</button>
</div>
</form>
You is declaring a function, but you never run it, also if yow code will work with the Dom you need to wait after the Dom renders to run it
document.addEventListener("DOMContentLoaded", ()=> {
var optionCheckBox1 = document.getElementById("check-blenda");
if (optionCheckBox1.checked) {
document.getElementById("MP3").disabled = false;
document.getElementById("perc-mp1").disabled = false;
document.getElementById("MP2").disabled = false;
document.getElementById("perc-mp2").disabled = false;
} else {
document.getElementById("perc-mp1").disabled = true;
document.getElementById("perc-mp1").value = "";
document.getElementById("MP2").disabled = true;
document.getElementById("perc-mp2").disabled = true;
document.getElementById("perc-mp2").value = "";
document.getElementById("MP2").value = "";
}
})
I'm using Asp.NetCore, C#,Ajax javascript and jquery .I created a Model Component in my application.
the model component is shown but the hidden element didn't show. when I choose my option in the Axe option it doesn't show any one of the GRaison / DRaison / PRaison / CRaison. I try it with "show" and doesn't work even I set the option: selected and doesn't work too. I don't have any idea to make this code work
here's the page :
#model Segment
<div class="modal fade" id="addSegment">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-uppercase text-white" style="height:5%;">
<h5 class="modal-title" id="addSegmentLabel">Create Segment</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
<span>x</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label asp-for="SName" class="control-label">Name : </label>
<div class="col-md-12">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input asp-for="SName" class="form-control" placeholder="Enter segment name" />
<span asp-validation-for="SName" class="text-danger"></span>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group ">
<label asp-for="SRang" class="control-label">Rang</label>
<input asp-for="SRang" class="form-control" />
<span asp-validation-for="SRang" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label asp-for="SType" class="control-label">Type</label>
<select asp-for="SType" class="form-control" id="SType">
<option selected disabled>Selectionnez type..</option>
<option id="Compte">Compte</option>
<option id="Contact">Contact</option>
</select>
<span asp-validation-for="SType" class="text-danger"></span>
</div>
</div>
<div class="col-md-12">
<div class="form-group ">
<label asp-for="Description" class="control-label"></label>
<textarea class="form-control" rows="3"></textarea>
<span asp-validation-for="Description" class="text-danger"></span>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label asp-for="Axe" class="control-label"></label>
<select asp-for="Axe" class="form-control" id="Axeya ij" asp-items="Html.GetEnumSelectList<Axe>()">
<option value="null" selected>Selectionnez Axe..</option>
</select>
<span asp-validation-for="Axe" class="text-danger"></span>
</div>
<div class="form-group" id="g" hidden>
<label asp-for="GRaison" class="control-label">Raison</label>
<select asp-for="GRaison" class="form-control">
<option> Personalité </option>
<option> Soucis</option>
<option> Intérêt</option>
<option>Valeurs</option>
</select>
<span asp-validation-for="GRaison" class="text-danger"></span>
</div>
<div class="form-group" id="d" hidden>
<label asp-for="DRaison" class="control-label">Raison</label>
<select asp-for="DRaison" class="form-control">
<option> Age </option>
<option> Sexe</option>
<option> Education</option>
<option> Revenu</option>
</select>
<span asp-validation-for="DRaison" class="text-danger"></span>
</div>
<div class="form-group" id="p" hidden>
<label asp-for="PRaison" class="control-label">Raison</label>
<select asp-for="PRaison" class="form-control">
<option> Personalité, </option>
<option> Soucis</option>
<option> Intérêt</option>
<option>Valeurs</option>
</select>
<span asp-validation-for="PRaison" class="text-danger"></span>
</div>
<div class="form-group" id="c" hidden>
<label asp-for="CRaison" class="control-label">Raison</label>
<select asp-for="CRaison" class="form-control">
<option> Pays</option>
<option> Ville</option>
<option> Language</option>
<option> Population</option>
</select>
<span asp-validation-for="CRaison" class="text-danger"></span>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#section Scripts{
<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#SType").change('pageload', function () {
if ($(this).val() == "Contact") {
$(function () {
$("#Axe").change('pageload', function () {
if ($(this).val() == 0) {
$("#g").removeAttr('hidden');
$("#p,#c,#d").hide();
} else if ($(this).val() == 1) {
$("#p").removeAttr('hidden');
$("#g,#c,#d").hide();
} else if ($(this).val() == 2) {
$("#c").removeAttr('hidden');
$("#p,#g,#d").hide();
} else {
$("#d").removeAttr('hidden');
$("#p,#c,#g").hide();
}
});
});
} else {
$("#g,#p,#c,#d").hide();
}
});
});
</script>
}
when I choose my option in the Axe option it doesn't show any one of the GRaison / DRaison / PRaison / CRaison. I try it with "show" and doesn't work even I set the option: selected and doesn't work too.
Firstly, we can find that you set id="Axeya ij" for select in your code as below, which would cause you can not get that element using $("#Axe").
<select asp-for="Axe" class="form-control" id="Axeya ij" asp-items="Html.GetEnumSelectList<Axe>()">
Secondly, if you check the source code of your hidden element after you run .hide() method, you can find it would help add style="display: none;" inline style to the element(s), it does not add hidden attribute.
To fix the issue and achieve your requirement, you can try to modify the code like below.
$(function () {
$("#SType").change('pageload', function () {
if ($(this).val() == "Contact") {
$("select[name='Axe']").change('pageload',function () {
if ($(this).val() == 0) {
$("#g").removeAttr('hidden');
$("#g").show();
$("#p,#c,#d").hide();
} else if ($(this).val() == 1) {
$("#p").removeAttr('hidden');
$("#p").show();
$("#g,#c,#d").hide();
} else if ($(this).val() == 2) {
$("#c").removeAttr('hidden');
$("#c").show();
$("#p,#g,#d").hide();
} else {
$("#d").removeAttr('hidden');
$("#d").show();
$("#p,#c,#g").hide();
}
});
} else {
$("#g,#p,#c,#d").hide();
}
});
});
I have multiple div with class rows and in each row there is a dropdown on change of dropdown i want to hide the anchor tag with class "add_marks" which is inside the same row.
I'm using the following code to hide it:
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row');
var elem = $(nearest_row).closest(".add_marks");
elem.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Class</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="col-xs-1 col-sm-7 col-md-1"><i class="material-icons">add</i>Add Marks</div>
</div>
</div>
You have to get the next div and find the a link, then hide it.
var nearest_row = $(this).closest('div.row');
gets you the div.row.clearfix.attr_fields but the link is present in the next div, so doing next gets you the next div element, then you find the 'a' element.
You can also do next('div') instead of getting the next element to find the next div.
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row').next().find('.add_marks').hide();
//console.log(nearest_row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Class</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="col-xs-1 col-sm-7 col-md-1"><i class="material-icons">add</i>Add Marks</div>
</div>
</div>
Here is Working code example run it with js (shortcut: ctrl + enter)
...want to hide the anchor tag with class "add_marks" which is inside the same row.
So I have moved that button inside row.
Using .col* as direct child of .row is proper way of using bootstrap grid.
Used the following jQuery considering your requirement.
jQuery(document).on('change', '.subject', function (e) {
$(this)
.parents('.row')
.find('.add_marks')
.hide();
});
I am writing a code which dynamically creates rows.
The problem is when I click on button it adds row after the already present row. but Now div with id dynamic contains two rows and so if I click now button it will add two rows. If I use ('#dynamic').html() then it grabs columns but if it is done so it violates the indentation because it will not add the div with class row.
Please any body can tell me the solution to problem?
$(function() {
$("#button1").click(function() {
$("#main-row").after($('#dynamic').html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="above">
<div class="container">
<div class="row">
<div class="col-sm-1">No.</div>
<div class="col-sm-2">Name of Item</div>
<div class="col-sm-3">Quanity</div>
<div class="col-sm-3">Price</div>
<div class="col-sm-1"><span class="btn"></span></div>
</div>
</div>
<div class="container" id="dynamic">
<div class="row padding-3 " id="main-row">
<div class="col-sm-1 ">1</div>
<div class="col-sm-2 ">
<select class="container-fluid">
<option value="1">Computer</option>
<option value="2">Mobile</option>
<option value="3">LCD</option>
<option value="4">Keyboard</option>
<option value="5">Mouse</option>
</select>
</div>
<div class="col-sm-3 "><input class="container-fluid" type="number" name="name" value="" /></div>
<div class="col-sm-3 "><input type="text" name="text" value="" /></div>
<div class="col-sm-1 ">-</div>
</div>
</div>
<button class="btn btn-primary" id="button1">Add Row</button>
</section>
Try:
$(function() {
$("#button1").click(function() {
$('#dynamic').append($("#main-row").clone().removeAttr('id'));
});
});