We Keep Coding

PHP code doesn't see input added through js

I have form that collect datas when SAVE button is pressed from three inputs. First two is already loaded on the site, but last appears when DVD-disk is selected in <select>. So PHP code see values from first two inputs, but not from the last one. I added name and id to all of them. Inputs are in the main container that is in form.
Expected output: echo ($DVDdisk) show data
Real output: Undefined index: DVDsize
let selector = document.getElementById("selector");
let main = document.getElementById("input-main-add");
let div = document.createElement('div');
let h2 = document.createElement('H2');
let input = document.createElement('input');
selector.addEventListener("change", (e) => {
if (selector.value == "DVD") {
div.classList.add('input-add-holder');
main.appendChild(div);
h2.textContent = 'Enter size:';
h2.style.display = 'inline-block';
div.appendChild(h2);
input.setAttribute("name", "DVDsize");
input.setAttribute("id", "DVDsize");
div.appendChild(input);
}
});
<form method="POST" action="add.php">
<button class="accept-btn" type="submit">SAVE</button>
<!-- + -->
<button class="decline-btn">CANCEL</button>
<!-- + -->
</div>
</div>
<div class="input-main-add" id="input-main-add">
<!-- + -->
<div class="input-add-holder">
<H2 style="display:inline-block">SKU: </H2>
<input class="something" name="SKU" id="SKU"></input>
</div>
<div class="input-add-holder">
<H2 style="display:inline-block">Name: </H2>
<input class="something" name="name" id="name"></input>
</div>
<div class="input-add-holder">
<H2 style="display:inline-block">Type Switcher: </H2>
<select name="selector" id="selector">
<option value="DVD" id="DVD" name="DVD">DVD-Disk</option>
<option value="book" id="book" name="book">Book</option>
<option value="furniture" id="furniture" name="furniture">Furniture</option>
</select>
</div>
</div>
</form>
PHP code:
<?php
$SKU = $_POST["SKU"];
$name = $_POST["name"];
$DVDsize = $_POST["DVDsize"];
echo ($SKU);
echo ($name);
echo ($DVDsize);
?>

Your JS listen for change event on Type Switcher select box that the selected value must be DVD-Disk but your default value of this select box is DVD-Disk which is already selected.
So, this event will never happens when you just load the page, fill form (without change select box) and submit.
If this event never happens, it means input name DVDSize will not rendered and not send to server. That's why your PHP doesn't see this input.
You have to manually trigger change event for select box once DOM ready.
let selector = document.getElementById("selector");
let main = document.getElementById("input-main-add");
let div = document.createElement('div');
let h2 = document.createElement('H2');
let input = document.createElement('input');
selector.addEventListener("change", (e) => {
if (selector.value == "DVD") {
div.classList.add('input-add-holder');
main.appendChild(div);
h2.textContent = 'Enter size:';
h2.style.display = 'inline-block';
div.appendChild(h2);
input.setAttribute("name", "DVDsize");
input.setAttribute("id", "DVDsize");
div.appendChild(input);
}
});
// manually trigger change event.
let selectTypeSwitcher = document.getElementById('selector');
if (selectTypeSwitcher) {
selectTypeSwitcher.dispatchEvent(new Event('change'));
}
<form method="POST" action="add.php">
<button class="accept-btn" type="submit">SAVE</button>
<!-- + -->
<button class="decline-btn">CANCEL</button>
<!-- + -->
</div>
</div>
<div class="input-main-add" id="input-main-add">
<!-- + -->
<div class="input-add-holder">
<H2 style="display:inline-block">SKU: </H2>
<input class="something" name="SKU" id="SKU"></input>
</div>
<div class="input-add-holder">
<H2 style="display:inline-block">Name: </H2>
<input class="something" name="name" id="name"></input>
</div>
<div class="input-add-holder">
<H2 style="display:inline-block">Type Switcher: </H2>
<select name="selector" id="selector">
<option value="DVD" id="DVD" name="DVD">DVD-Disk</option>
<option value="book" id="book" name="book">Book</option>
<option value="furniture" id="furniture" name="furniture">Furniture</option>
</select>
</div>
</div>
</form>
Run the code above while open network inspector and you will see DVDSize input send to the server.

How to create dynamic form elements using cloneNode

I'm trying to create an interactive resume template using javascript and html and have managed to use cloneNode to duplicate work history blocks (see attached screenshot)
The problem(s) I am having is that clicking on the add list item button in the cloned/duplicated work history block at the bottom, creates a <li> item in the 1st/cloned element.
The objective is to be able to add or delete ````` list elements within a specific work history block and to also be able to add/remove entire work history sections. Currently it deletes from the top down, which is also an issue.
Thanks for any pointers in advance.
CODE
<!DOCTYPE html>
<html>
<body>
<div id="test">
<div id="node">
<div class="work_history">
<div class="row">
<strong>
<input type="text" name="company" value="ACME Company">
</strong>
</div>
<div class="row">
<input type="text" name="position" value="Cheese Taster">
</div>
<input type="text" name="start" value="1/2019">
<input type="text" name="end" value="2/2020">
<ul id="list">
<li>
<textarea id="task" name="task" rows="4" cols="50">Did some things. Tasted cheese.</textarea>
</li>
<button onclick="addTask()">Add List Item</button>
<button onclick="RemoveTask()">Delete List Item</button>
</ul>
<button onclick="addWork()">Add Work</button>
<button onclick="removeWork()">Remove Work</button>
</div>
</div>
</div>
<script>
function addWork() {
var div = document.getElementById("node");
var cln = div.cloneNode(true);
//cln.setAttribute( 'id', 'newId');
document.getElementById("test").appendChild(cln);
}
function removeWork(){
var last = document.getElementById("test");
// want to delete the last added work history not first
last.removeChild(last.childNodes[0]);
}
function addTask(){
var ul = document.getElementById("list");
var task = document.getElementById("task");
var li = document.createElement("li");
li.setAttribute('id',task.value);
li.appendChild(document.createTextNode(task.value));
ul.appendChild(li);
}
function removeTask(){
var ul = document.getElementById("list");
var task = document.getElementById("task");
var item = document.getElementById(task.value);
ul.removeChild(item);
}
</script>
</body>
</html>

You'd have to use e.currentTarget instead of document.getElementById, otherwise you're only referring to the first instance of it:
function addWork(e) {
const div = e.currentTarget.parentElement;
const cln = div.cloneNode(true);
document.getElementById("test").appendChild(cln);
}
function removeWork(e) {
const last = e.currentTarget.parentElement;
last.parentElement.removeChild(last);
}
function addTask(e) {
const ul = e.currentTarget.parentNode;
let task = ul.children[0].childNodes[1].value;
let li = document.createElement("li");
// Replace paragraph breaks
task = task.replace(/\r?\n|\r/g, " ");
li.innerText = task;
ul.appendChild(li);
}
function removeTask(e) {
const ul = e.currentTarget.parentNode;
ul.removeChild(ul.lastChild);
}
<!DOCTYPE html>
<html>
<body>
<div id="test">
<div id="node">
<div class="work_history">
<div class="row">
<strong>
<input type="text" name="company" value="ACME Company">
</strong>
</div>
<div class="row">
<input type="text" name="position" value="Cheese Taster">
</div>
<input type="text" name="start" value="1/2019">
<input type="text" name="end" value="2/2020">
<ul id="list">
<li>
<textarea name="task" rows="4" cols="50">Did some things. Tasted cheese.</textarea>
</li>
<button onclick="addTask(event)">Add List Item</button>
<button onclick="removeTask(event)">Delete List Item</button>
</ul>
<button onclick="addWork(event)">Add Work</button>
<button onclick="removeWork(event)">Remove Work</button>
</div>
</div>
</div>
</body>
</html>
This allows you to refer to the specific element where the click event occurred and add/remove any elements that are relative within the DOM.
As a side note, it's best practice to have unique id attributes, adding the same id to multiple elements goes against that.

var add_button = $(".add_form_field");
var wrapper = $(".container1");
var max_fields = 9;
var x = 1;
$(add_button).click(function (e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append(
` <div class="email">
<label for="">Year</label>
<input type="text" name="eduYear${x}">
<label for="">Title Name</label>
<input type="text" name="eduTitle${x}">
<label for="">Institution/School Name</label>
<input type="text" name="eduPlace${x}">
<label for="">Details</label>
<input type="text" name="eduNotes${x}"> <br>Delete<hr></div>`
); //add input box
}
});
$(wrapper).on("click", ".delete", function (e) {
e.preventDefault();
$(this).parent("div").remove();
x--;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
<h2>Educations</h2>
<button type="button" class="add_form_field">Add Education
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<div class="email">
<label for="">Year</label>
<input type="number" name="eduYear1">
<label for="">Title Name</label>
<input type="text" name="eduTitle1">
<label for="">Institution/School Name</label>
<input type="text" name="eduPlace1">
<label for="">Details</label>
<input type="text" name="eduNotes1">
</div>
you can try this to create dynamic form

How to Show selected value on textbox using javascript?

How can I show the value of the selected items in the textbox using javascript?
// MY LIST
<select id="list" class="form-control" multiple="">
<option value="2014">Your Cute</option>
<option value="2013">Your Ugly</option>
<option value="2011">Your Awesome</option>
</select>
// BUTTON and TEXTBOX
<button onclick="show_value();" type="button" value="Get Value">Get Value</button>
<input type="text" id="selectedvalue" class="text" name="selectedvalue" />
I came up with this javascript code
function showgroup_id () {
$('#selectedvalue').val(selectedvalue);
var myList = document.getElementById('list');
var selected-value = selectedItem;
var selectedGroupIds = [];
for (var i = 0; i < myList.length; i++) {
if (myList[i].selected) {
selectedselectedItem.push(myList[i].value);
}
}
}
When I tried, it doesn't work.. anyone can help me please?

You can use onchange event to change the textbox content with changing select element.
HTML :
<select id="selectBox">
<option>A</option>
<option>B</option>
</select>
<input type="text" id="messageTextBox" />
javaScript :
var selectBox = document.getElementById("selectBox");
selectBox.onchange = function(){
var textbox = document.getElementById("messageTextBox");
textbox.value = this.value;
};
jsFiddle
Your Solution :
HTMl :
<select id="list" class="form-control" multiple="">
<option value="2014">Your Cute</option>
<option value="2013">Your Ugly</option>
<option value="2011">Your Awesome</option>
</select>
// BUTTON and TEXTBOX
<button onclick="showgroup_id();" type="button" value="Get Value">Get Value</button>
<input type="text" id="selectedvalue" class="text" name="selectedvalue" style="width: 55%;" />
javaScript/jQuery :
function showgroup_id () {
var result = "";
var selectedItem = $('#selectedvalue').val(selectedvalue);
var myList = document.getElementById('list');
var selectedValues = selectedItem;
var selectedGroupIds = [];
for (var i = 0; i < myList.length; i++) {
if (myList[i].selected) {
//selectedselectedItem.push(myList[i].value);
//alert(myList[i].text);
result = result + " " + myList[i].text;
$("#selectedvalue").val(result);
}
}
}
jsFiddle

Try this :
give some id to button and remove onclick
<button id="getValue" type="button" value="Get Value">Get Value</button>
bind onclick event to button as shown below
$('#getValue').click(function(){
var text = $('#list option:selected').text();
$('#selectedvalue').val(text);
});

Try this,
<html lang="us">
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<script>
function show_value()
{
$("#selectedvalue").val($("#list").val());
}
</script>
</head>
<body>
<select id="list" class="form-control" multiple="">
<option value="2014">Your Cute</option>
<option value="2013">Your Ugly</option>
<option value="2011">Your Awesome</option>
</select>
// BUTTON and TEXTBOX
<button onclick="show_value();" type="button" value="Get Value">Get Value</button>
<input type="text" id="selectedvalue" class="text" name="selectedvalue" style="width: 55%;" />
</body>

replace your javascript code with the following:
function show_value() {
document.getElementById("selectedvalue").value = document.getElementById( "list" )[ (document.getElementById( "list" )).selectedIndex ].text;
}

The show_value() function will be called when the button is clicked. Inside the function, I have set the value of the textbox with the value of the select list.
function show_value()
{
$("#selectedvalue").val($("#list").val());
}

Grab multiple radio values

I have a section with a lot of blocks (I'll use only two on this example). The situation is: I have a <div> with a <input>, a <select> group and <radio> buttons. After filling all of them and clicking on "Grab" button, the script will show an alert with this values.
But if you fill more then one block, the last one doesn't grab the radios. It always returns "undefined". If you leave the first blocks with empty radios and fill the last one, the info on the alert screen will show the last one, however it's wrong.
What I'm doing wrong?
Here is the JSFiddle
JavaScript
$(document).ready(function(){
var contentArray = '';
$('button').click(function() {
$('.option_group').each(function(i) {
var NotEmptyTextBoxes = $('input:text').filter(function() { return this.value !== ""; });
var NotEmptyCombo = $('option:selected').filter(function() { return this.text !== ""; });
NotEmptyTextBoxes.each(function() {
name = this.name;
val = this.value;
var combo = $('#c_'+name).val();
var radio = $('input[name=r_'+name+']:checked', '#theform').val();
contentArray = contentArray+name+'='+"'"+val+"'"+","+"'"+combo+"'"+","+radio+";"+"|";
radio = '';
});
alert(contentArray);
contentArray = '';
return false;
});
});
});
HTML
<form id ="theform">
<div class="option_group" id="bloco">
<input type="text" placeholder="Cargo" name="cargo" id="carga"/>
<select class="filtercombo" id="c_cargo">
<option>like</option>
<option>=</option>
<option>!=</option>
<option><</option>
<option><=</option>
<option>></option>
<option>>=</option>
<option>is null</option>
<option>is not null</option>
<option>in</option>
<option>not in</option>
<option>between</option>
<option>contains</option>
<option>not like</option>
</select>
<input type="radio" value="up" name="r_cargo">
<input type="radio" value="down" name="r_cargo">
<input type="radio" value="flat" name="r_cargo">
</div><!-- #end of option_group -->
<div class="option_group" id="bloco">
<input type="text" placeholder="provider" name="provider" id="provider"/>
<select class="filtercombo" id="c_provider">
<option>like</option>
<option>=</option>
<option>!=</option>
<option><</option>
<option><=</option>
<option>></option>
<option>>=</option>
<option>is null</option>
<option>is not null</option>
<option>in</option>
<option>not in</option>
<option>between</option>
<option>contains</option>
<option>not like</option>
</select>
<input type="radio" value="up" name="r_provider1" />
<input type="radio" value="down" name="r_provider2" />
<input type="radio" value="flat" name="r_provider3" />
</div><!-- #end of option_group -->
<button type="button">grab</button>
</form>

You have different names for your last group of radios r_provider1, r_provider2, r_provider3, they should all have the same name 'r_provider'.

Create a link based on values from a Html form and redirect them to it

What I'm trying to do is to redirect people to a link depending of what they have summited on the form (the link is built using the values from the form fields)
This is the Form:
<form id="form">
<div class="formbox">
<div class="radio-toolbar">
<input type="radio" id="iconapp1" name="department" value="1250"/>
<label for="iconapp1">PP</label><br>
<input type="radio" id="iconapp2" name="department" value="944"/>
<label for="iconapp2">EP</label><br>
</div>
<div class="radio-bar1">
<input type="radio" id="enginemake1" name="enginemake" value="6"/>
<label for="enginemake1"> Chevrolet</label><br>
<input type="radio" id="enginemake2" name="enginemake" value="8"/>
<label for="enginemake2"> Chrysler</label><br>
</div>
<div class="bodyvertdivision1"></div>
<div class="radio-bar3">
<select name="powerrange">
<option id="powerrange1" value="28">100</option>
<option id="powerrange2" value="128">200</option>
<option id="powerrange3" value="228" selected>300</option>
</select>
</div>
<div class="bodyvertdivision1"></div>
<div class="radio-bar4">
<input type="radio" id="location1" name="location" value="store"/>
<label for="location1"> America (NT - ST)</label><br>
<input type="radio" id="location2" name="location" value="store.au"/>
<label for="location2"> Australia and Oceania</label><br>
</div>
<div class="radio-bar2">
<input onclick="goToPage();" type="button" class="buttonmyapp" value="Submit" />
</div>
</div>
</form>
The link I'm trying to build using the values selected will look like this:
http://{location}.mydomain.com/product-catalog.aspx?section=-{department}-{enginemake}-{powerrange}-
Each bracketed section needs to be replaced by the value of the select with the corresponding name.

First include the jquery library link or download js and link
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
function goToPage(){
var location = $('input[name=location]:checked').val();
var department = $('input[name=department]:checked').val();
var enginemake = $('input[name=enginemake]:checked').val();
var powerrange = $('select[name=powerrange]').val();
window.location.href = "http://"+location+".mydomain.com/product-catalog.aspx?section=-"+department+"-"+enginemake+"-"+powerrange+"-";
}
</script>

After the goToPage function on the submit button validates the response change the src attribute of the form should work fine.
So in jQuery it should look something like
var location = $('input[name=location]:checked', '.radio-bar4').val();
var dept = $('input[name=location]:checked', '.radio-bar4').val();
var engine = $('input[name=enginemake]:checked', '.radio-bar1').val();
var power = $('powerrange').val() ;
var domain = "http://"+ location+".mydomain.com/product-catalog.aspx?section=-"+dept+"-"+engine+"-"+power+"-";
$("#form").attr("action", domain);

you can try this
HTML
<select id="powerrange" name="powerrange">
JAVASCRIPT
function goToPage()
{
var location;
var department;
var enginemake;
var powerrange;
pName = document.getElementById('powerrange');
powerrange = pName.options[pName.selectedIndex].value;
var form = document.getElementById('form');
var ele = form.getElementsByTagName('input');
for(var i=0;i<ele.length;i++)
{
if(ele[i].getAttribute('type')=='checkbox')
{
if(ele[i].getAttribute('name')=='department')
{
if(ele[i].checked)
department = ele[i].value;
}
else if(ele[i].getAttribute('name')=='enginemake')
{
if(ele[i].checked)
enginemake = ele[i].value;
}
else if(ele[i].getAttribute('name')=='location')
{
if(ele[i].checked)
location = ele[i].value;
}
else;
}
}
var url = "http://"+ location+".mydomain.com/product-catalog.aspx?section=-"+department+"-"+enginemake+"-"+powerrange+"-";
form.setAttribute('action',url);
form.submit();
}