We Keep Coding

Set Values A Select with Javascript

I have a table with inputs, radiobuttons and select, these can be cloned with a button through javascript which inserts HTML through an .after. The reason of my question is that at the moment of creating the Select it has to fill with the information in database, and javascript is not allowing to insert PHP as in HTML.
I would like to know what do you recommend me to do to make the Select gets filled at the moment that I insert the new table row.
It should follow the following logic (I understand that it is wrong this way):
<script>
$(document).ready(function() {
var cloneCount = 1;
$("#añadirEjercicio").on('click', function() {
cloneCount++;
$("#tabla tbody tr:last").after('<tr class="fila-fija">' +
'<td><select class="form-control" id="ejercicio" name="ejercicio[]" required>'+
'<optgroup label="Seleccionar un ejercicio">'+
<?php
//ADMINISTRADOR
$consulta = "SELECT * FROM Ejercicios";
$resultado = mysqli_query($conexion, $consulta);
$listaEjercicios = $resultado;
$filas = mysqli_num_rows($resultado);
while ($rowEjercicio = mysqli_fetch_assoc($resultado)) {
$nombreEjercicio = $rowEjercicio['nombre'];
$IdEjercicio = $rowEjercicio['IdEjercicio'];
echo "<option value='$IdEjercicio'>$IdEjercicio-$nombreEjercicio </option>";
}
?>
'</optgroup>'+
'</select></td>'+
'<td><input type="text" class="form-control" id="duracion1[]" name="duracion1[]" required ></td>' +
'<td>' +
'<div class="form-check form-check-inline">' +
'<input class="form-check-input" type="radio" id="circuito" name="clasificacion' + cloneCount + '" value="Circuito" >' +
'<label class="form-check-label" for="circuito">Circuito</label>' +
'</div>' +
'<div class="form-check form-check-inline">' +
'<input class="form-check-input" type="radio" id="bloque" name="clasificacion' + cloneCount + '" value="Bloque" >' +
'<label class="form-check-label" for="bloque">Bloque</label>' +
'</div>' +
'<div class="form-check form-check-inline">' +
'<input class="form-check-input" type="radio" id="intervalo" name="clasificacion' + cloneCount + '" value="Intervalo" >' +
'<label class="form-check-label" for="intervalo">Intervalos</label>' +
'</div>' +
'</td>' +
'<td><input type="text" class="form-control" id="duracion2[]" name="duracion2[]" required ></td>' +
'<td>' +
'<div class="form-check form-check-inline">' +
'<input class="form-check-input" type="radio" id="serie[]" name="serie[]" value="Series" >' +
'<label class="form-check-label" for="inlineRadio1">Series</label>' +
'</div>' +
'<div class="form-check form-check-inline">' +
'<input class="form-check-input" type="radio" id="repeticion[]" name="repeticion[]" value="Repeticiones" >' +
'<label class="form-check-label" for="inlineRadio2">Repeticiones</label>' +
'</div>' +
'</td>');
});
})
</script>

how to get value from jquery in dynamic input

I'm trying to create a questions with answer or
multiple choice in CodeIgniter, I create the choice using jQuery and now I don't know how to get all value from text input.
can someone help me for this case??
This code:
var choices = [{
id_soal: 'choice1'
}, {
id_soal: 'choice2'
}, {
id_soal: 'choice3'
}];
var html = '';
var i;
for (i = 0; i < choices.length; i++) {
html += '<div class="row">',
html += '<div class="col-xs-8 col-md-4>',
html += '<div class="input-group">',
html += '<span class="input-group-addon" style="background:green"><i class="fa fa-question-circle"></i> Soal' + (i + 1) + '</span>',
html += '<input type="text" name="Question' + i + '" id="Question' + i + '" class="Question form-control" placeholder="Question" required>',
html += '</div></div></div></br>',
html += '<div class="row">',
html += '<div class="col-xs-4 col-md-4">',
html += '<div class="input-group">',
html += '<span class="input-group-addon">A</span>',
html += '<input type="text" name="A_jawaban' + i + '" id="A_jawaban' + i + '" class="form-control A_jawaban" placeholder="Result" required>',
html += '</div></div>'
html += '<div class="col-xs-4 col-md-4">',
html += '<div class="input-group">',
html += '<span class="input-group-addon"> B</span>',
html += '<input type="text" name="B_jawaban' + i + '" id="B_jawaban' + i + '" class="form-control" placeholder="Result" required>',
html += '</div></div>',
html += '<div class="col-xs-4 col-md-4">',
html += '<div class="input-group">',
html += '<span class="input-group-addon"> C</span>',
html += '<input type="text" name="C_jawaban' + i + '" id="C_jawaban' + i + '" class="form-control" placeholder="Result" required>',
html += '</div></div></div><br>';
html += '<div class="row">',
html += '<div class="col-xs-4 col-md-6">',
html += '<div class="input-group">',
html += '<span class="input-group-addon"> D</span>',
html += '<input type="text" name="D_jawaban' + i + '" id="D_jawaban' + i + '" class="form-control" placeholder="Result" required>',
html += '</div></div>'
html += '<div class="col-xs-4 col-md-6">',
html += '<div class="input-group">',
html += '<span class="input-group-addon"> E</span>',
html += '<input type="text" name="E_jawaban' + i + '" id="E_jawaban' + i + '" class="form-control" placeholder="Result" required>',
html += '</div></div></div><br>';
}
$('.judul').html(html);
$('#tambah').click(function(event) {
console.log('THIS CHOICES',choices)
var results = $('.Question').serializeArray();
console.log('FOR QUESTIONS',results)
var resultsAnswearA = $('.A_jawaban').serializeArray();
console.log('FOR QUESTIONS',resultsAnswearA)
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div name="judul" class="judul"></div>
<button id="tambah" name="tambah" class="btn btn-warning"><i class="icon-pencil5"></i> Tambah</button>
UPDATE
wow sorry for my question above, I forgot and just realized I got the answer to use query selector. just check the code

Try:
var allInputsValue = {};
$(".judul input").each(function(){
//Add each input value to all inputs
allInputsValue[allInputsValue.length] = {
"name":$(this).attr("name"),
"value":$(this).val()
};
});
console.log(allInputsValue);

Remove DIV dynamically with JQuery

i have a problem to reference an identifier of a DIV. I allow to add a div with a text field and a button to delete the text field, and i set a id to the DIV like an array with this code:
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso['+$count+']>' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
'<a class="btn btn-default" id="eliminacorso['+$count+']" aria-label="Elimina">' +
'<i class="fa fa-times" aria-hidden="true"></i>' +
'</a>' +
'</div>' +
'</div>' +
'');
});
So.. if i press on the botton at the at the side of the text area, i'll call a function that will remove it.
The skeleton of the function is the follow:
$('#eliminacorso[]').on('click', function() {
$count --;
$('#corso[]').remove();
});
So my ask is: How can i insert between the square brackets the right identifier of the div?

A better choice is:-
1.Instead of using id use button class
2.And then use event delegation concept like below:-
$(document).on('click','.btn-default',function(){
$(this).closest('.form-group').remove();
});
Reference:- https://api.jquery.com/closest/

Use as below the script that add DIV. Remove '[' from id attribute from div tag and anchor tag as below
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso'+$count+'>' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
'<a class="btn btn-default" id="corso'+$count+'" aria-label="Elimina">' +
'<i class="fa fa-times" aria-hidden="true"></i>' +
'</a>' +
'</div>' +
'</div>' +
'');
});
And then script to get the clicked id and remove the matched div on click of button as below
$('.btn').on('click', function() {
var selectedId = $(this).attr('id');
$('#'+selectedId).remove();
});

Try below code.It may help you
var $count =0
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso_'+$count+'">' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso_'+ $count + '"/>' +
'<a class="btn btn-default" id="eliminacorso_'+$count+'" aria-label="Elimina" onclick="remove(this);">' +
'Test' +
'</a>' +
'</div>' +
'</div>' +
'');
});
function remove(aRemove){
console.log(aRemove);
var divid = aRemove.id.replace("eliminacorso_","corso_");
$("#" + divid).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="aggiungi"> Click ME </button>
<div id="corsi">
</div>

https://codepen.io/vino4all/pen/vZrQEX
Try this code.
<button id="aggiungi">Click</button>
<div id="corsi"></div>
Add a class attribute to the <a> tag.
var $count = 0;
$('#aggiungi').on('click',function () {
$count ++;
$('#corsi').append(
'<div class="form-group row" id="corso['+$count+']>' +
'<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
'<div class="col-sm-10 form-inline">' +
'<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
'<a class="btn btn-default delBtn" id="eliminacorso['+$count+']" aria-label="Elimina"><span>X</span>' +
'<i class="fa fa-times" aria-hidden="false"></i>' +
'</a>' +
'</div>' +
'</div>' +
'');
});
$('#corsi').on('click', '.delBtn', function() {
console.log('this :'+$(this));
$count --;
$(this).parent().parent().remove();
});
Notice the usage of on function.
It should be like below
$('#corsi').on('click', '.delBtn', fun);

You can use something like this
var count = 3;
$('button').click(function(){
count--;
$($('.corso')[count]).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="corso">1. <input type="text" /></div><br />
<div class="corso">2. <input type="text" /></div><br />
<div class="corso">3. <input type="text" /></div><br />
<br />
<button>Remove</button>

Try this:
var $count = 0
$('#aggiungi').on('click', function () {
$count++;
let divId = `input_div_${$count}`;
let html = `<div class="form-group row" id="${divId}">
<label class="col-sm-2 col-form-label" for="corsi">Input ${$count}</label>
<div class="col-sm-10 form-inline">
<input type="text" class="form-control" id="input" name="${divId}"/>
<button type="button" id="remove_btn_${$count}" aria-label="Elimina" onclick="remove('${divId}');">
remove
</a>
</div>
</div>`;
$('#main-div').append(html);
});
function remove(removeDivId) {
console.log(removeDivId);
$("#" + removeDivId).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="aggiungi"> Click ME </button>
<div id="main-div">
</div>

submit a comment form with jquery that has multiple id

I have the the following form below in jquery
' <form class="form comment_form" role="form" id="'+this._id+'" name="comment-form" action="/users/reply" method="post">'+
'<div class="form-group">'+
'<input type="hidden" name="post_id" value="'+this._id+'"/> ' +
'<input class="form-control col-lg-12 red" style="width:100%" type="text" name="user_comment" placeholder="Your comments" />'+
'</div>'+
'<div class="form-group">'+
'</div>'+
'</form>' +
I am trying to submit the form but it has a specific id. The form is just an input field and i would just like to submit it when the user press enter. Similar to Facebook. My problem is how do i let the user submit a specific form by just pressing the enter button?

id need to be unique.Also a form with submit button is useful to trigger submit on hitting enter
'<form class="form comment_form" role="form" id="' + this._id + '" name="comment-form" action="/users/reply" method="post">' +
'<div class="form-group">' +
'<input type="hidden" name="post_id" value="input_' + this._id + '"/> ' +
'<input class="form-control col-lg-12 red" style="width:100%" type="text" name="user_comment" placeholder="Your comments" />' +
'</div>' +
'<div class="form-group">' +
'</div>' +
'<div><button type="submit">Submit</button></div>'+
'</form>'
Alternately if there is no submit button , you can use javascript/jquery to submit the form
$("body").find("#yourFormId").find('input').keypress(function(e) {
// check for enter/return
if (e.which == 10 || e.which == 13) {
$("body > #yourFormId").submit();
}
});

I successfully found the answer to my question. what in did was that i used the this keyword to find other elements of the form.
var form = $('form.comment_form');
form.on('submit',function(e){
e.preventDefault();
var input = $(this).find('input[type=text]'),
comment_id = $(this).find('input[name=post_id]');
})

Can't get textarea value in PHP

I have a submit form for writing a caption in an image. I'm using plupload for this. When file is uploaded it will append a div and inside it is a textarea where you can write your caption of that image. But I always getting an error of Undefined Index when submitting a form.
This is my code when file was uploaded:
uploader.bind('FileUploaded', function(up, file) {
var filename = file.id + '.' + file.name.split(".").pop()
var uploaded_files = $('#uploaded_files').attr('value');
var appended_files = uploaded_files + file.id + ',';
$('#uploaded_files').attr('value', appended_files);
var prev = '<div class="col-sm-12" style="margin-bottom:5px;" id="upload-' + file.id + '">' +
'<div class="col-sm-3">' +
'<img class="img-thumbnail" width="100%" height="auto" src="./assets/images/gallery/resorts_gallery/' + filename + '">' +
'</div>' +
'<div class="col-sm-6">' +
'<textarea name="' + file.id + '_Caption" class="form-control" style="font-size:12px;height:70px" placeholder="Put a caption"></textarea>' +
'</div>' +
'<div class="col-sm-3"><span class="btn btn-danger btn-xs"><span class="fa fa-times"></span></span></div>' +
'</div>';
$("#prevCap").append(prev);
});
In my html:
<form role="form" method="POST" id="submit-review" enctype="multipart/form-data">
<div class="form-group">
<label for="uploadphoto">Share your Experiences by uploading Photos</label> <span class="small-text">(optional)</span><br/>
<div class="well" id="caption-thumb"> <!-- preview and caption -->
<div id="prevCap" class="col-sm-12" style="margin-bottom:10px"></div>
<input type="hidden" name="uploaded_files" id="uploaded_files" value="" />
<hr>
<button class="btn btn-default navbar-btn" type="button" data-toggle="modal" data-target="#upload-modal">Add Photos</button>
<hr id="hr-line" style="display:none">
</div>
</div>
<input type="submit" class="btn btn-embossed btn-default" id="btnsubmit" name="submit" disabled value="SUBMIT"/>
</form>
in my php i do something like this:
$last_id = insert_getID("reviews", $fields, $val);
$uploaded_files = $_POST['uploaded_files'];
$uploaded_files = explode(',', $uploaded_files);
$uploaded_files = array_filter($uploaded_files);
foreach ($uploaded_files as $file) {
$wherefields = array('img_name', 'users_id');
$upload_value = $file;
$wherevalues = array($upload_value, $_SESSION['uid']);
$where_file = where($wherefields, $wherevalues, "", "");
$caption = $file . "_Caption";
$file_caption = $_POST['\'' . $caption . '\''];
$file_field = array('review_id', 'caption');
$file_value = array($last_id, $file_caption);
update('gallery', $file_field, $file_value, $where_file);
echo "<pre>" + $file_caption + "</pre>";
}
WHen the files where successfully uploaded, textarea will append inside the div #prevCap and that div was also inside the form. I'm getting an error because the form can't get the value of textarea. How can i fix this problem, how can i get textarea value that was appended?