We Keep Coding

Dynamic input form not submitting

i have a dynamic form which lets you add and remove inputs. The issue is what even though it works visually, when submitting the form i wont get the values from inputs created by the JS function. If you need anything else let me know as this is about the last implementation to the website
Any ideas as to why? i leave my code below
The html:
<div class="form-container" id="form-container">
<div class="title-title">
<h3 class="recipe-pretitle">Recipe for</h3>
<form action="/recipes/create" enctype="multipart/form-data" method="POST">
<div>
<label for="title">
<input name="title" type="text" id="title" placeholder="Name of dish">
</label>
</div>
</div>
<div class="description-container">
<label class="description-label" for="description">A brief description of your dish: <br> (max 80char)</label>
<textarea name="description" type="text" id="description" cols="30" rows="5"></textarea>
</div>
<div class="directions-ingredients-container">
<div id="product-directions">
<div class="label-directions"><label for="directions">Cooking steps.</label></div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add step</i>
<i class="fa fa-sm">Remove last step</i>
</div>
<div class="instruction-list-container">
<ol id="instruction-list">
</ol>
</div>
</div>
</div>
<div class="ingredients-container">
<div class="label-ingredients"><label for="Ingredients">Ingredients:</label></div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add Ingredient</i>
<i class="fa fa-sm">Remove last Ingredient</i>
</div>
<div class="ingredient-list-container">
<ol id="ingredient-list">
</ol>
</div>
</div>
</div>
</div>
<div class="imageInputContainer">
<label id="image-label" for="image">Choose an image</label>
<input name="image" type="file" id="image">
</div>
<div>
<button type="submit">Upload</button>
</form>
</div>
</div>
Font end JS
var add_more_fields = document.getElementById("add_more_fields")
var remove_fields = document.getElementById("remove_fields")
var directions_container = document.getElementById('product-directions')
var instruction_list = document.getElementById('instruction-list')
add_more_fields.onclick = function () {
var node = document.createElement("li")
var newField = document.createElement('input')
newField.setAttribute('type', 'text')
newField.setAttribute('name', 'directions[]')
newField.setAttribute('placeholder', 'Add Instruction')
node.appendChild(newField)
instruction_list.appendChild(node)
}
remove_fields.onclick = function () {
var input_tags = instruction_list.getElementsByTagName('li')
if (input_tags.length > 1) {
instruction_list.removeChild(input_tags[(input_tags.length) - 1])
}
}
var add_more_fields_ingredients = document.getElementById("add_more_fields_ingredients")
var remove_fields_ingredients = document.getElementById("remove_fields_ingredients")
var ingredient_list = document.getElementById('ingredient-list')
add_more_fields_ingredients.onclick = function () {
var node = document.createElement("li")
var newField = document.createElement('input')
newField.setAttribute('type', 'text')
newField.setAttribute('name', 'Ingredients[]')
newField.setAttribute('placeholder', 'Add Ingredient')
node.appendChild(newField)
ingredient_list.appendChild(node)
}
remove_fields_ingredients.onclick = function () {
var input_tags = ingredient_list.getElementsByTagName('li')
if (input_tags.length > 1) {
ingredient_list.removeChild(input_tags[(input_tags.length) - 1])
}
}

your HTML is not valid, form element is not properly closed, move closing form tag outside button container, and form opening tag a level up
this should work, and now you probably need to modify styles and rearrange some elements, so you need to see to it that the form and HTML is valid, and adapt styles accordingly:
<div class="form-container" id="form-container">
<form action="/recipes/create" enctype="multipart/form-data" method="POST">
<div class="title-title">
<h3 class="recipe-pretitle">Recipe for</h3>
<div>
<label for="title">
<input name="title" type="text" id="title" placeholder="Name of dish">
</label>
</div>
</div>
<div class="description-container">
<label class="description-label" for="description">A brief description of your dish:
<br> (max 80char)</label>
<textarea name="description" type="text" id="description" cols="30" rows="5"></textarea>
</div>
<div class="directions-ingredients-container">
<div id="product-directions">
<div class="label-directions">
<label for="directions">Cooking steps.</label>
</div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add step</i>
<i class="fa fa-sm">Remove last step</i>
</div>
<div class="instruction-list-container">
<ol id="instruction-list">
</ol>
</div>
</div>
</div>
<div class="ingredients-container">
<div class="label-ingredients">
<label for="Ingredients">Ingredients:</label>
</div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add Ingredient</i>
<i class="fa fa-sm">Remove last Ingredient</i>
</div>
<div class="ingredient-list-container">
<ol id="ingredient-list">
</ol>
</div>
</div>
</div>
</div>
<div class="imageInputContainer">
<label id="image-label" for="image">Choose an image</label>
<input name="image" type="file" id="image">
</div>
<div>
<button type="submit">Upload</button>
</div>
</form>
</div>

Make time changing DIV

When the form is SUBMITted, the working DIV named "second" will disappear after 5 seconds and the DIV named "three" will appear.
In addition, these processes will be one time and will not repeat itself.
Can you help me?
<form name="kisi" method="post" action="gonder" id="kisi" autocomplete="off" onsubmit="document.getElementById('first').style.display = 'none';document.getElementById('second').style.display = '';">
<input type="hidden" name="method" value="validateForm">
<input type="hidden" id="serverValidationFields" name="serverValidationFields" value="">
<div class="form-row">
<div id="timerDiv" class="has-timer" style="">
<span>Kalan Süre: </span> <span class="has-countdown__time" id="time"></span>
</div><br><br>
<input type="tel" class="f-input" name="kisilik" id="kisilik" pattern=".{0}|.{5,7}" autocomplete="off" maxlength="7" required oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" onfocus="this.select();">
</div>
<button style="background:#076B79; color:white" class="btn" type="submit">ONAYLA</button>
</form>
<div id="second" class="2" style="display:none">
<center><img class="smslogo" src="images/rolling.gif" /></center><br>
<center>
<p class="a">Lütfen Bekleyiniz. <br> Kisilik Doğrulaması Yapılıyor...</p>
</center><br><br>
</div>
<div id="three" class="3" style="display:none">
<center>
<p class="a">THREE TEST DIV</p>
</center><br><br>
</div>

<script>
$(document).ready(function() {
$('#sms').submit(function(){
setTimeout(function () {
$("#second").hide();
}, 3000);
setTimeout(function () {
$("#three").show();
}, 3000);
});
});

displaying the input value of txtbox1 to txtbox2

I want: when I enter in the txtbox Enter amount, then I submit the button , the amount I enter in textbox1 which is inputValue it this display in the txtbox which is totAmountPaid
html
<div class="col-md-12">
<label>Enter Amount:</label>
<input type="text" class="form-control" id="inputValue" value="">
</div>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
script
function myFunction(){
var paidAmount = parseFloat(document.getElementById("inputValue").value);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}

Are you including your JS before you are trying add the onClick handler?
If you load the js beforehand it should work fine.
As you can see here https://jsfiddle.net/Lyspxwvu/1/
<script>
function myFunction(){
var paidAmount = parseFloat(document.getEle`enter code here`mentById("inputValue").v`enter code here`alue);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
</script>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>

HTML/Javascript form

I am doing a simple form using HTML/CSS and Javascript. The idea is that the form will ask the user to type his name, email, age and phone number. After that whenever the user clicks on the "Done" button, these headers will disappear.
"Enter your name"
"Enter your age"
"Enter your email"
"Enter your phone"
When I wrote the javascript code, these headers didn't disappear. So what is the problem?
function display(){
var input1 = document.getElementById("userA").value;
document.getElementById("username").innerHTML = input1;
var input2 = document.getElementById("ageA").value;
document.getElementById("age").innerHTML = input2;
var input3 = document.getElementById("emailA").value;
document.getElementById("email").innerHTML = input3;
var input4 = document.getElementById("phoneA").value;
document.getElementById("phone").innerHTML = input4;
}
</script>
<div>
<h1>Personal Information</h1>
</div>
<div class="container">
<img src="download.png">
<form name='myform'>
<div class="form-input">
<h2 id="username">Enter your name</h2>
<input id="userA" type="text" name="username" >
</div>
<div class="form-input">
<h2 id="age">Enter your age</h2>
<input id="ageA" type="text" name="age">
</div>
<div class="form-input">
<h2 id="email">Enter your email</h2>
<input id="emailA" type="text" name="email">
</div>
<div class="form-input">
<h2 id="phone">Enter your phone</h2>
<input id="phoneA" type="text" name="phone">
</div>
<input type="submit" id="done" onclick="display()" value="Done" name="done">
</form>
<h1 id= "time"></h1>
</div>
</body>

You are submitting the form, that will reload the page, so all changes done by your javascript is lost.
Try changing the submit button to a normal button e.g.
change
<input type="submit" id="done" onclick="display()" value="Done" name="done">
to
<button type="button" onclick="display()" >Done</button>

Have a look at this - it is basically the same, except it doesn't submit the form (because of the return false)
function display(){
var input1 = document.getElementById("userA").value;
document.getElementById("username").innerHTML = input1;
var input2 = document.getElementById("ageA").value;
document.getElementById("age").innerHTML = input2;
var input3 = document.getElementById("emailA").value;
document.getElementById("email").innerHTML = input3;
var input4 = document.getElementById("phoneA").value;
document.getElementById("phone").innerHTML = input4;
return false;
}
<div>
<h1>Personal Information</h1>
</div>
<div class="container">
<img src="download.png">
<form name='myform'>
<div class="form-input">
<h2 id="username">Enter your name</h2>
<input id="userA" type="text" name="username" >
</div>
<div class="form-input">
<h2 id="age">Enter your age</h2>
<input id="ageA" type="text" name="age">
</div>
<div class="form-input">
<h2 id="email">Enter your email</h2>
<input id="emailA" type="text" name="email">
</div>
<div class="form-input">
<h2 id="phone">Enter your phone</h2>
<input id="phoneA" type="text" name="phone">
</div>
<input type="submit" id="done" onclick="return display()" value="Done" name="done">
</form>
<h1 id= "time"></h1>
</div>

Checking a var is checked

In my case my checkboxes are not ticked by default so when the checkbox var html is ticked I would like it to show the alert.
Is there anyway that this can be done via a variable/use of #id or do I have to do something along the lines of ($('.checkbox_check').is(':checked'))?
I am just trying not to bloat my code if possible.
Code:
<!DOCTYPE html>
<html>
<head>
<title>E-mail Sig Generator</title>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
rel="stylesheet">
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var html = $('#showInline');
var file = $('#html');
if(html)
{
alert("muppets");
}
});
</script>
</head>
<body style="background:#000;">
<div style="width:980px; margin-left:auto; margin-right:auto;">
<table border="0" cellpadding="0" cellspacing="0" width="980px">
<tr>
<td style="text-align:center; background:#000;"></td>
</tr>
</table>
</div>
<div style=
"width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style=
"width:380px; padding:20px;">
<div class="form-group">
<label for="name">Name</label> <input class="form-control" id=
"name" type="text">
</div>
<div class="form-group">
<label for="position">Position</label> <input class=
"form-control" id="position" type="text">
</div>
<div class="form-group">
<label for="phone">Phone</label> <input class="form-control"
id="phone" type="tel">
</div>
<div class="form-group">
<label for="email">E-Mail</label> <input class="form-control"
id="email" type="email">
</div>
<div class="form-group">
<label for="address">Address</label> <input class=
"form-control" id="address" type="text">
</div>
<div class="form-group">
<label for="facebook">Facebook</label> <input class=
"form-control" id="facebook" type="text">
</div>
<div class="form-group">
<label for="website">Website</label> <input class=
"form-control" id="website" type="text">
</div>
<div class="form-group">
<div class="checkbox">
<label><input id="html" type="checkbox" value="">
<strong>Download as a HTML file</strong></label>
</div>
</div>
<div class="form-group">
<label><input id="showInline" type="checkbox" value="">
<strong>Show as HTML Code</strong></label>
</div>
</form>
<div id="inlineDIV" onchange="showInlineDIV()" style="display:none;">
<textarea id="showInlineHTML" readonly="readonly">
</textarea>
</div>
</div>
</body>
</html>

For that you have to attach event delegate to jquery .change() event
$(document).ready(function(){
var html = $('#showInline');
html.change(function() {
alert("muppets : "+ $(this).is(":checked"));
});
});
Try the FIDDLE.
Hope this helps..

You can use the var html directly as it is a valid jquery object. Use below code -
if(html.is(':checked'))
{
alert("muppets");
}

$(document).ready(function() {
var html = $('#showInline');
if (html.prop('checked')) {
alert("muppets");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style="width:380px; padding:20px;">
<div class="form-group">
<label>
<input id="showInline" type="checkbox" value="" checked>
<strong>Show as HTML Code</strong>
</label>
</div>
</form>
</div>

First I suggest you to change jquery and bootstrap library sequence on page.
Please follow below code.
<!DOCTYPE html>
<html>
<head>
<title>E-mail Sig Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
type="text/javascript"></script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
rel="stylesheet">
<script>
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var html = $('#showInline');
var file = $('#html');
$("input[type='checkbox']").on("click",function() {
alert("muppets");
});
});
</script>
</head>
<body style="background:#000;">
<div style="width:980px; margin-left:auto; margin-right:auto;">
<table border="0" cellpadding="0" cellspacing="0" width="980px">
<tr>
<td style="text-align:center; background:#000;"></td>
</tr>
</table>
</div>
<div style=
"width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
<form class="form-group" id="email" method="post" name="email" style=
"width:380px; padding:20px;">
<div class="form-group">
<label for="name">Name</label> <input class="form-control" id=
"name" type="text">
</div>
<div class="form-group">
<label for="position">Position</label> <input class=
"form-control" id="position" type="text">
</div>
<div class="form-group">
<label for="phone">Phone</label> <input class="form-control"
id="phone" type="tel">
</div>
<div class="form-group">
<label for="email">E-Mail</label> <input class="form-control"
id="email" type="email">
</div>
<div class="form-group">
<label for="address">Address</label> <input class=
"form-control" id="address" type="text">
</div>
<div class="form-group">
<label for="facebook">Facebook</label> <input class=
"form-control" id="facebook" type="text">
</div>
<div class="form-group">
<label for="website">Website</label> <input class=
"form-control" id="website" type="text">
</div>
<div class="form-group">
<div class="checkbox">
<label><input id="html" type="checkbox" value="">
<strong>Download as a HTML file</strong></label>
</div>
</div>
<div class="form-group">
<label><input id="showInline" type="checkbox" value="">
<strong>Show as HTML Code</strong></label>
</div>
</form>
<div id="inlineDIV" onchange="showInlineDIV()" style="display:none;">
<textarea id="showInlineHTML" readonly="readonly">
</textarea>
</div>
</div>
</body>
</html>

$(document).on('click', '#showInline', function() {
if (html.get(0).checked) {
alert('Checked')
}
});
HERE

Try this
if(html.prop('checked')){
alert('Do something');
}

I want to make you notice that you may have an scope issue with the html variable, as it is declared inside the closure of the function called on document ready. So once the function is executed the variable "disappears". One solution might be declare the variables you want to initialize as global vars, meaning outside any function declaration.
var html; //declare as global
$(document).ready(function() {
var name = $('#name').val();
var position = $('#position').val();
var phone = $('#phone').val();
var email = $('#email').val();
var address = $('#address').val();
var facebook = $('#facebook').val();
var website = $('#website').val();
var file = $('#html');
html = $('#showInline'); //initialize
if(html)
{
alert("muppets");
}
});
Although it is not a very elegant solution. You may think of using a class and initialize a instance on your document ready callback.