Symfony2 - Collection + jQuery - javascript

I use collection type with symfony:
When I choose value in select. This value is add in list but I don't know how to make this with symfony collection.
Here my html output:
<div id="equipe_joueurs" class="mes_joueurs"
data-prototype="
<div class="form-group">
<label class="control-label" for="equipe_joueurs___name__">__name__label__</label>
<select id="equipe_joueurs___name__" name="equipe[joueurs][__name__]" class="form-control">
<option value=""></option>
<option value="1" >Joueur1</option>
<option value="2" >Joueur2</option>
<option value="3" >Joueur3</option>
</select>
Here my js:
$(document).ready(function()
{
var container = $('#equipe_joueurs');
var index = container.find(':input').length;
var prototype = $(container.attr('data-prototype').replace(/__name__label__/g).replace(/__name__/g, index));
$('#equipe_joueurs').change(function()
{
var prototype = $(container.attr('data-prototype').replace(/__name__label__/g).replace(/__name__/g, index));
$('#equipe_list').append('<li id="equipe_joueur_' + index + '" name="equipe[joueurs][' + index + ']">' + 'prototype.text() + '</li>');
index++;
return false;
});
});
Thanks for your help,

HTML
<div id="list"></div>
JQUERY
$('#list').append(prototype)

Related

Update Array with dynamically generated values

I'm very new to JavaScript, so I'm having a hard time with this relatively simple problem:
I wrote a function that dynamically adds or removes dropdown fields to the DOM if the user clicks the add or remove button. So far so good, everything is working fine until here.
Now I want to collect the data in an Array to send it to the api.
With the following code I can collect it, but I have a hard time to figure out how I can remove specific values from the array.
<div class="container mt-2" id="stores">
<div class="row">
<div class="col">
<h2>Marktet</h2>
<div class="col-form-label storesHint">Select at least one market</div>
</div>
</div>
<div id="form">
<div>
<div id="addAnotherMarket">
<div class="marketRow">
<select class="form-control" id="market" name="market">
<option value="1"> market1</option>
<option value="2"> market2</option>
<option value="3"> market3</option>
<option value="4"> market4</option>
<option value="5"> market5</option>
</select>
<input class="deleteButton" type="button" id="remove" value="" style="display: none; font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;">
</div>
</div>
</div>
</div>
<div>
<div class="addBtnContainer">
<div class="centerBtn">
<a class=" button btn_gray buttonWithIcon" id="add">
<i class=" fa fa-plus icn" id="btnIcon" style="font-size: 16px;" aria-hidden="true"></i>
<span class="btnText spn" style="top:0px !important">Add another market</span>
</a>
</div>
</div>
</div>
</div>
$(document).ready(function () {
let index = 0;
let store = {};
let stores = [];
var oldValue = [];
window.Stores = stores;
//set initial value for the first dropdown element
store = { "store_id": parseInt($('#market').val(), 10) };
stores.push(store);
oldValue[index] = store;
//update value if user changes first element
$('#market').on('change', function () {
store = { "store_id": parseInt($(this).val(), 10) };
var eleIndex = stores.indexOf(oldValue[index]);
if (eleIndex !== -1) {
stores.splice(eleIndex, 1, store);
oldValue[index] = store;
}
});
//add a new dropwdown element
$("#add").click(function () {
index++;
$(this).parent().parent().before($("#form").clone().attr("id", "form" + index));
$("#form" + index + " :input").each(function () {
$(this).attr("name", $(this).attr("name") + index);
$(this).attr("id", $(this).attr("id") + index);
});
//set initial value of the new dropdown element
store = { "store_id": parseInt($('#market' + index).val(), 10) };
stores.push(store);
oldValue[index] = store;
//set new value if user changes value
$('#market' + index).on('change', function () {
store = { "store_id": parseInt($(this).val(), 10) };
var eleIndex = stores.indexOf(oldValue[index]);
if (eleIndex !== -1) {
stores.splice(eleIndex, 1, store);
oldValue[index] = store;
}
});
//add remove button
$("#remove" + index).css("display", "inline-flex");
$(".marketRow").css({
'display': 'flex',
'align-items': 'center',
'margin-top': '5px'
});
//if user clicks remove button delete value from array
$("#remove" + index).click(function () {
var eleIndex = stores.indexOf({ "store_id": parseInt($('#market' + index).val(), 10) });
if (index !== -1) {
stores.splice(eleIndex, 1);
oldValue.splice(eleIndex);
}
$(this).closest("div").remove();
});
});
});
The following code also outputs -1 always, so I think indexOf makes no sense.
var eleIndex = stores.indexOf({"store_id": parseInt($('#market' + index).val(), 10)});
EDIT: I updated the post with the HTML part as requested. In short: When clicking on button(#add) div(#form) will be cloned, remove button will be added, and id's will be updated with index.
Values of all these selects will be stored and updated in the stores array. I just can't delete them.
I have also provided a working jsfiddel https://jsfiddle.net/proach1995/h1gtmyen/
With plain js you can add class to the dropdown you wish to collect from. in the code below it will build the array only if value was selected.
if you use jQuery you can replace document.querySelectorAll('.store'); with $('.store');
function saveArray() {
const selected = document.querySelectorAll('.store');
const stores = [];
selected.forEach(prop => {
if (!!prop.value) {
stores.push({store_id: parseInt(prop.value, 10)})
}
});
console.log(stores);
}
<select class="store">
<option disabled selected value>select value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="store">
<option disabled selected value>select value</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select class="store">
<option disabled selected value>select value</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<button onclick="saveArray()">save array</button>

First Dropdown Changes Second Dropdown Related Item display

Hi I have two dropdowns in my Html when I select my dropdown. my second dropdown needs to change related items.
My dropdown one has two item Domestic, international
second dropdown has three item INR, USD, EUR
When I change my first dropdown Domestic item selected need to display in my second dropdown INR Item only display other item need to hide.
Then I select an international item in my first dropdown that needs to display in my second dropdown USD, and EUR currency only displays. how to achieve it. (using jquery or javascript). My code below here.
<div class="input-group input-group-sm">
<select id="OrderType" asp-for="Type" title="Mode" class="form-control form-control-sm border selectpicker" onchange="GetCurrencybyType(this)">
<option id="DomId" value="1" selected>Domestic</option>
<option id="InterId" value="2">International</option>
</select>
</div>
<div class="input-group input-group-sm">
<select id="CurrencyType" asp-for="Currency" title="Mode" class="form-control form-control-sm border selectpicker">
<option id="InrId" value="1" selected>INR</option>
<option id="UsdId" value="2">USD</option>
<option id="EurId" value="2">EUR</option>
</select>
</div>
My Jquery function
function GetCurrencybyType(id) {
var value = id.value;
if (value == 2) {
$('#mySelect').children().remove().end()
.append('<option selected value="USD">USD</option>');
}
else {
$("option[value='2']").remove();
$('select[id=CurrencyType]').val('<option value="' + id.val + '">' + "INR" + '</option>');
}
//var value = id.value;
//var selectedCountry = $(this).children("option:selected").val();
//alert("You have selected the country - " + value);
//var InrIdValue = $("#InrId").val();
//if (value == "Domestic") {
// $("#CurrencyType").html("");
// var result = $("#CurrencyType").html("");
// alert(result);
// $("#CurrencyType").append($("<option />").val(InrIdValue).text(InrIdValue));
// var result1 = $("#CurrencyType").append($("<option />").val(InrIdValue).text(InrIdValue));
// alert(result1);
// //$('select[id=CurrencyType]').val(InrIdValue);
// //var result = $('select[id=CurrencyType]').val(InrIdValue);
// //alert(result);
// //$('select[id=CurrencyType]').val('<option value="' + InrIdValue + '">' + InrIdValue + '</option>');
//}
//else {
// alert("International");
//}
}
i not getting correct value in my UI please answer me.
Here is a working demo you could follow:
<div class="input-group input-group-sm">
<select id="OrderType" title="Mode" class="form-control form-control-sm border selectpicker" >
<option id="DomId" value="1">Domestic</option>
<option id="InterId" value="2">International</option>
</select>
</div>
<div class="input-group input-group-sm">
<select id="CurrencyType" title="Mode" class="form-control form-control-sm border selectpicker">
<option value="" selected>Select A Currency</option>
</select>
</div>
#section Scripts
{
<script>
$(function () {
var subjectObject = {
"1": [
"INR"
],
"2": [
"USD",
"EUR"
]
};
$('#OrderType').change(function () {
var OrderType = $(this).val()
var CurrencyType = subjectObject[OrderType] || [];
var html = $.map(CurrencyType, function (cnt) {
return '<option value="' + OrderType + '">' + cnt + '</option>'
}).join('');
$('#CurrencyType').html(html)
});
})
</script>
}
A JSFiddle you could check: https://jsfiddle.net/b6pe3vxq/

how to Remove last selected value

I am trying to add values with the help of jquery But last value + in code again and again
The last value should be cleared when select new value from dropdown
var lastSelected;
$(document).ready(function() {
$("#selectchild1").on('change', function() {
$("div").remove("select");
var childvalue = this.value;
alert(childvalue);
var count = $(this).val();
newContent = "";
name = $(this).attr("name");
var j = 1;
var k = 0;
for (var i = 0; i < count; i++) {
newContent += $("#addedchild1").append("<div class='col-md-2 col-lg-2 text-center'><div class='form-group'>Child-" + j + " Age <select name='RoomTypes[" + k + "][]'><option value='0'>Age</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><select></div></div>");
j++;
}
content.html(newContent);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectchild1" class="form-control">
<option value="0">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
</select>
<div class="col-xs-3 col-sm-3 col-md-8 text-right">
<div id="addedchild1"></div>
</div>
I think you mean this
newContent += $("#addedchild1"). is not doing what you think it is
There is no content declared
You do not need to remove anything if you use .html() it replaces the HTML
I think you do not want addedChild1 but all the added children in the div I gave ID="wrapper" - if you want to nest in a addedChild, just change #wrapper to #addedChild1
$(function() {
$("#selectchild1").on('change', function() {
var count = +$(this).val();
name = $(this).attr("name");
const newContent = Array.from(Array(count+1).keys()) // cleate an array from 0 to count+1
.slice(1) // get rid of the `0` to use ${i} from `1`
.map(i => (`<div class='col-md-2 col-lg-2 text-center'><div class='form-group'>Child-${i} Age <select name='age'><option value='0'>Age</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><select></div></div>`))
$("#wrapper").html(newContent.join("")); // add the array to the wrapper after joining it
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectchild1" class="form-control">
<option value="0">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
</select>
<div id="wrapper" class="col-xs-3 col-sm-3 col-md-8 text-right">
</div>
First of all there is an error in your code. There is no variable named content.
Uncaught ReferenceError: content is not defined
You should add the following line to your code.
$('#addedchild1 div').remove();
I hope I understood your problem and I hope I was able to help you.
Check the example here: https://codepen.io/yasgo/pen/ExyqWvy

Making text input invisible but tangible

I am working on a country dropdown filter for a search. This will allow users to search within the selected region.
Select 'Thailand' from the dropdown, 'Thailand + ' will be pushed to the search box which allows user to enter another keyword (e.g. Food) which forms into
'Thailand + Food'.
Due to technical constraints this is my only workaround creating a search filter. I am wondering can i make the selected region text invisible (Thailand +) yet when i press enter.. 'Thailand +' is part of the search results.
What i want to achieve:
User selects 'Thailand'
Thailand +' is pushed to textbox (Not visible to user)**
User types 'Food' in the search box
Both 'Thailand + Food' is in the search result
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testfloat">
<select id="quantity">
<option selected>Select Libraries</option>
<option value="Albanian + ">Albanian</option>
<option value="Singapore + ">Singapore</option>
<option value="Malaysia + ">Malaysia</option>
<option value="Germany + ">Germany</option>
<option value="France + ">France</option>
<option value="Thailand + ">Thailand</option>
</select>
<script type="text/javascript">
$('#quantity').change(function(){
var qty = $('#quantity').val();
var total = qty;
$("#ms-helperText").val(total);
});
</script>
<input type="text" id="ms-helperText">
Instead of putting the selected country in the input, store it in a variable and change it accordingly.
This is how should be your code:
var searchedCountry = "";
$('#quantity').change(function() {
searchedCountry = $('#quantity').val();
$("#preview").html(searchedCountry + " " + $('#ms-helperText').val());
});
$('#ms-helperText').keyup(function() {
$("#preview").html(searchedCountry + " " + $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testfloat">
<select id="quantity">
<option selected>Select Libraries</option>
<option value="Albanian + ">Albanian</option>
<option value="Singapore + ">Singapore</option>
<option value="Malaysia + ">Malaysia</option>
<option value="Germany + ">Germany</option>
<option value="France + ">France</option>
<option value="Thailand + ">Thailand</option>
</select>
<input type="text" id="ms-helperText">
<br/>
<div id="preview">
</div>
you could try to attach that value into a hidden input in html
<input type="hidden" id="somehiddenvalue"></input>
Concat both values into a hidden form element:
// Get all needed input elements
const $country = document.querySelector( '#country' );
const $quantity = document.querySelector( '#quantity' );
const $msHelperText = document.querySelector( '#ms-helperText' );
// Event handler
function inputChange() {
const collection = [];
$country.value && collection.push( $country.value );
$quantity.value && collection.push( $quantity.value );
// Only add + if both inputs have a value.
$msHelperText.value = collection.join( ' + ' );
console.log( 'Hidden element value: ', $msHelperText.value );
}
$country.addEventListener( 'input', inputChange );
$quantity.addEventListener( 'input', inputChange );
<select id="country">
<option value="" selected>Select Libraries</option>
<option value="Albanian">Albanian</option>
<option value="Singapore">Singapore</option>
<option value="Malaysia">Malaysia</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="Thailand">Thailand</option>
</select>
<input type="text" id="quantity">
<!-- the new hidden form element, that will hold both values -->
<input type="hidden" id="ms-helperText">

Remove specific value in Javascript Array dynamically

I want to remove a specific value from an array.
For example:
var categories = ["Lenovo","Large","100"];
I displayed it like this
HTML CODE:
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="brand" >
<option value="">Select a Brand</option>
<option value="Lenovo">Lenovo</option>
<option value="Acer">Acer</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="screen_size" style="margin-top:0px;">
<option value="">Select a Screen Size</option>
<option value="Small">Small</option>
<option value="Large">Large</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="cpu">
<option value="">Select a CPU</option>
<option value="Intel">Intel</option>
<option value="Amd">Amd</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="memory">
<option value="">Select a Memory</option>
<option value="500mb">500mb</option>
<option value="1tb">1tb</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="price">
<option value="">Filter by Price</option>
<option value="10000">10000</option>
<option value="20000">20000</option>
</select>
</div>
How can I achieve this?
I tried it so many times but I failed because I cant get the value. You can check my code:
jQuery("#filter").val()
jQuery(function() {
jQuery("#brand,#screen_size,#cpu,#memory,#price").change(function() {
var brand = jQuery("#brand").val();
var screen_size = jQuery("#screen_size").val();
var cpu = jQuery("#cpu").val();
var memory = jQuery("#memory").val();
var price = jQuery("#price").val();
var categories = [];
if (brand) {
categories.push(brand);
}
if (screen_size) {
categories.push(screen_size);
}
if (cpu) {
categories.push(cpu);
}
if (memory) {
categories.push(memory);
}
if (price) {
categories.push(price);
}
length = categories.length;
categories2 = categories.toString();
var categories3 = "";
for (var i = 0; i < length; i++) {
var cat_id = "cat" + i;
categories3 += "<div class='filter_style'>" + categories[i] + "<a href='" + cat_id + "' id='" + cat_id + "' onclick='removeCat(event)'><span style='margin-left:15px;color:gray;' >x</span></a></div>";
jQuery("#filter").html(categories3);
}   
});
});
function removeCat(evt) {
evt.preventDefault();
var catid = jQuery(this).attr('href');
var cat = jQuery(this).data("id");
//jQuery.grep(); maybe or indexOf first then slice() but I do not get the value
alert(catid);
}
You can simply remove element from array using below method
categories .splice( $.inArray(removeItem, categories), 1 );//removeItem is name of item which you want to remove from array
If you want to remove, for example, "Lenovo" from:
var categories = ["Lenovo","Large","100"];
do:
categories.splice(0)

Categories