Hi, My question is:
I want to append input element to the div whenever the user clicks on the button(I have done that using javascript)
Names of the input elements are
job_opening[vacancies0]
job_opening[vacancies1]
job_opening[vacancies2]
job_opening[vacancies3]
and so on…
but only the value of first input is visible in the changeset. How to get the value of all the input elements in the changeset.
Please Help.
Hi @Ansvas you need to generate names that Phoenix expects. Specifically you should be doing:
job_opening[vacancies][0]
job_opening[vacancies][1]
etc
If this doesn’t work, we’ll need example code, and output.
Hello, @benwilson512
I have a button ‘Add Project’ in _form.html.eex file. What i want to do is - everytime on click of this button i want to create a new dropdown and text field(and i am doing this using javascript in new.js file)
code for button present in the _form.html.eex file
<div>
<button class="add_project btn btn-primary" type="button" id="add_project">Add Project</button>
<input type="hidden" id="count" name="count" value="0">
</div>
code for click event on the button in new.js file
$(document).on('click', '.add_project', function () {
btn_clicked_count++;
var parent_div = $('#project_div');
add_project_component(parent_div, btn_clicked_count);
});
function add_project_component(parent_div, count) {
var hidden_input = document.getElementById('count');
hidden_input.setAttribute('value', count);
var row_div = document.createElement('div');
row_div.className = 'row';
var select_div = document.createElement('div');
select_div.className = 'col-4';
var select_label = document.createElement('label');
select_label.innerHTML = 'Project';
var select = document.getElementById('job_opening_project_dropdown0');
var cloned_select = select.cloneNode(true);
cloned_select.setAttribute('id', 'job_opening_project_dropdown' + count);
cloned_select.setAttribute(
'name',
'job_opening[project_dropdown][' + count + ']'
);
select_div.append(select_label);
select_div.append(cloned_select);
var vacancy_div = document.createElement('div');
vacancy_div.className = 'col-4';
var vacancy_label = document.createElement('label');
vacancy_label.innerHTML = 'Vacancy';
var vacancy = document.getElementById('job_opening_vacancies0');
var cloned_vacancy = vacancy.cloneNode(true);
cloned_vacancy.setAttribute('id', 'job_opening_vacancies' + count);
cloned_vacancy.setAttribute('name', 'job_opening[vacancies][' + count + ']');
vacancy_div.append(vacancy_label);
vacancy_div.append(cloned_vacancy);
parent_div.append(row_div);
row_div.append(select_div);
row_div.append(vacancy_div);
}
Now the problem is i am not getting values of vacancy and project_dropdown field(created using javascript) in conn in job_opening_controller. I am new to pheonix framework so this might be a stupid question. pls help me.
When you submit the form, what parameters do you see logged?
In job_opening_controller I can see values of only those elements which are created in _form.html.eex file, i can’t see the values of elements which are created using javascript on button click.
