I am trying to send values from HTML form to javascript file but I saw that the values for email subject and message were sent as undefined in alert window or console, while the name was correctly fetched from input and transferred to js,I am quite new to javascript so this question might be very silly but I am unable to figure out the reason why undefined is sent and also I don't understand that when in what order the javascript and HTML code is executed, I Sometimes see the javascript is being executed first before the button is clicked
heres my html form stored in temp.html
<!doctype html>
<html lang="en">
<head>
<title>Contact Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<form id="connect-form" method="POST">
<div class="row">
<div class="card-body col-lg-6 col-sm-12 col-md-6">
<div class="md-form mt-3">
<input type="text" id="name" class="form-control" required="required">
<label for="materialContactFormName">Name</label>
</div>
<div class="md-form mb-3" id="email" placeholder="Email">
<input type="text" class="form-control mb-3" id="name" required="required">
<label for="email">Email</label>
</div>
<div class="md-form mb-3" id="subject" placeholder="Subject">
<input type="text" class="form-control mb-3" id="name" required="required">
<label for="subject">Subject</label>
</div>
</div>
<div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6">
<div class="md-form">
<textarea class="form-control md-textarea" name="message" rows="4" id="message"
placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<div class="form-action" style="text-align: center;margin: auto" >
<button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;" >Submit</button>
</div>
<script type="text/javascript" src="js/file.js"></script>
</form>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- MDB CORE JAVASCRIPT -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
file.js located in js folder
function contactuser(){
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
alert("Button Clicked" + "Name: " + Name + "Email:" +Email + " subject:"+ subject);
}
output image that I get
https://ibb.co/dfjBUU
ID in html are unice you can't use id="name" for 3 inputs.
<!doctype html>
<html lang="en">
<head>
<title>Contact Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<form id="connect-form" method="POST">
<div class="row">
<div class="card-body col-lg-6 col-sm-12 col-md-6">
<div class="md-form mt-3">
<input type="text" id="name" class="form-control" required="required">
<label for="materialContactFormName">Name</label>
</div>
<div class="md-form mb-3">
<input type="text" placeholder="Email" class="form-control mb-3" id="email" required="required">
<label for="email">Email</label>
</div>
<div class="md-form mb-3">
<input type="text" class="form-control mb-3" id="subject" placeholder="Subject" required="required">
<label for="subject">Subject</label>
</div>
</div>
<div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6">
<div class="md-form">
<textarea class="form-control md-textarea" name="message" rows="4" id="message" placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<div class="form-action" style="text-align: center;margin: auto">
<button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;">Submit</button>
</div>
<script type="text/javascript" src="js/file.js"></script>
</form>
</body>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- MDB CORE JAVASCRIPT -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
and js its ok
function contactuser(){
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
alert("Button Clicked" + "Name: " + Name + "Email:" +Email + " subject:"+ subject);
}
Need to give the attribute id to the input element not for the div
function contactuser(){
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
alert("Button Clicked" + "Name: " + Name + "Email:" + Email + " subject:"+ subject);
}
<form id="connect-form" method="POST">
<div class="row">
<div class="card-body col-lg-6 col-sm-12 col-md-6">
<div class="md-form mt-3">
<input type="text" id="name" class="form-control" required="required">
<label for="materialContactFormName">Name</label>
</div>
<div class="md-form mb-3" placeholder="Email">
<input type="text" class="form-control mb-3" id="email" required="required">
<label for="email">Email</label>
</div>
<div class="md-form mb-3" placeholder="Subject">
<input type="text" class="form-control mb-3" id="subject" required="required">
<label for="subject">Subject</label>
</div>
</div>
<div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6">
<div class="md-form">
<textarea class="form-control md-textarea" name="message" rows="4" id="message"
placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<div class="form-action" style="text-align: center;margin: auto" >
<button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;" >Submit</button>
</div>
<script type="text/javascript" src="js/file.js"></script>
</form>
</div>
Related
I have a "save page as PDF" button on my page. This button only saves according to the page's code structure. So, the values which users have provided after the page's loading doesn't count.
Form fields contain input areas: (1) Values brought from previous calculation page with cookies (read-only) (2) Values those users can add / change
When user clicks on the "SAVE (pdf)" button, I want the page to be refreshed with the new structure; value sections of the inputs are changed, according to the new values standing in the input fields, then firing the "SAVE AS PDF" button.
How this can be technically possible. I couldn't figure it out. I appreciate your help very much.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Renal Dose</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="manifest" href="../img/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- JQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<form class="border border-light p-5 print" name="saveList" action="/en/print" onsubmit="submit();">
<div class="form-row justify-content-lg-center">
<div class="col-12 col-lg-8 mt-3" id="timey">Calculation Time:<br>
<input class="form-control" id="time" type="text" autocomplete="off">
</div>
<div class="col-12 col-lg-8 mt-3" id="namey">Patient Name:<br>
<input class="form-control" id="name" type="text">
</div>
<div class="col-12 col-lg-8 mt-3" id="wardy">Ward Name:<br>
<input class="form-control" id="ward" type="text" name="ward">
</div>
<div class="col-12 col-lg-8 mt-3" id="docty">Doctor Name:<br>
<input class="form-control" id="doctor" type="text">
</div>
<div class="col-12 col-lg-8 mt-3" id="crCly">Creatinine Clearance (ml/min):<br>
<input class="form-control" id="crCl" type="number" autocomplete="off" value="" readonly="">
</div>
<div class="col-12 col-lg-8 mt-3" id="diay">State of Hemodialysis:<br>
<input class="form-control" id="dia" type="text" autocomplete="off" readonly="">
</div>
<div class="col-12 col-lg-8 mt-3" id="acty">Active Substance:<br>
<input class="form-control" id="actSubs" type="text" autocomplete="off" required="" readonly="">
</div>
<div class="col-12 col-lg-8 mt-3" id="producty">Brand Name:<br>
<input class="form-control" id="productName" type="text">
</div>
<div class="col-12 col-lg-8 mt-3" id="suggesty">Suggested Dose:<br>
<input class="form-control" id="suggest" type="text" autocomplete="off" readonly="">
</div>
<div class="col-12 col-lg-8 mt-3" id="operaty">Operator:<br>
<input class="form-control" id="operator" type="text">
</div>
<div class="col-12 col-lg-8 mt-3" id="noty">Notes:<br>
<input class="form-control" id="notes" type="text" autocomplete="off">
</div>
</div>
<div class="row text-justify justify-content-center mt-5">
<div class="col-12 col-lg-8">
<p><strong>Note: </strong>All the information above is advisory for the full authorized health professionals who has enough capability for determination of patient's treatment. And they can never be a substitute for the information and applications
of physicians, pharmacists or other health professionals those will provide optimum benefit for the patient.</p>
</div>
</div>
</form>
<div class="row text-center justify-content-center my-5">
<p class="text-center mt-5">
Save as PDF
</p>
</div>
https://jsfiddle.net/mulgey/t6dmvr4s/8/
Im trying to get extension from intlTelInput plugin on submit, but for some reason it returns empty. Here is an example: https://jsfiddle.net/msfk6top/
And the code:
<link rel="stylesheet" href="https://intl-tel-input.com/node_modules/bootstrap/dist/css/bootstrap.min.css?7">
<link rel="stylesheet" href="https://intl-tel-input.com/node_modules/intl-tel-input/build/css/intlTelInput.css?37">
<form id="my_form">
<input name="phone" type="tel" id="phone" class="form-control">
<input type="submit">
</form>
<!-- use old jquery so demo works in IE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://intl-tel-input.com/node_modules/intl-tel-input/build/js/intlTelInput.js?60"></script>
<script>
$("#phone").intlTelInput();
$("#my_form").submit(function () {
alert($("#phone").intlTelInput("getExtension"));
});
</script>
Any idea why its not returning the chosen extension?
You need to specify the utilsScript option when initializing the plugin in order for getExtension to work.
In your plunker, do:
$("#phone").intlTelInput({utilsScript:'https://intl-tel-input.com/node_modules/intl-tel-input/build/js/utils.js'});
utilsScript should be the path to the utils.js script that is included with the intl-tel-input plugin.
Try with this working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="ENVIAR SMS GRATIS CON BACHECUBANO">
<title>ENVIAR SMS GRATIS CON BACHECUBANO</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/intlTelInput.min.css">
<style>
body {
background-color: #fafafa;
}
.intl-tel-input {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="card" style="margin-top:50px;">
<!-- <img class="card-img-top" src="..." alt="SMS GRATIS de Bachecubano"> -->
<div class="card-body">
<form class="" action="send.php" method="POST" id="form">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 class="card-title text-center">ENVIAR SMS GRATIS CON BACHECUBANO</h3>
<div class="form-group">
<div class="input-group">
<input class="form-control" type="tel" id="phone" name="phone">
<input type="hidden" id="phone2" name="phone2" />
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<textarea class="form-control input-sm borderRadius" type="textarea" id="message" name="message" placeholder="Su mensaje 👍 SMS GRATIS bit.ly/elBache" maxlength="130" rows="5"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<span class="help-block">
<p id="characterLeft" class="help-block"></p>
</span>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 text-right">
<button class="btn btn-success disabled" id="btnSubmit" name="btnSubmit" type="submit">Enviar SMS GRATIS</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/intlTelInput-jquery.min.js"></script>
<script>
$("#phone").intlTelInput({
utilsScript: 'js/utils.js'
});
$("#form").submit(function() {
//alert($("#phone").intlTelInput("getNumber"));
$("#phone2").val($("#phone").intlTelInput("getNumber"));
});
</script>
<script>
$(document).ready(function() {
$('#characterLeft').text('130 caracteres restantes');
$('#message').keyup(function() {
var max = 130;
var len = $(this).val().length;
if (len >= max) {
$('#characterLeft').text('0 caracteres disponibles');
$('#characterLeft').addClass('red');
$('#btnSubmit').addClass('disabled');
} else {
var ch = max - len;
$('#characterLeft').text(ch + ' caracteres restantes');
$('#btnSubmit').removeClass('disabled');
$('#characterLeft').removeClass('red');
}
});
});
</script>
</body>
</html>
I've got a form that I'd like to be able to download offline, that should be compatible with most, if not all browsers (IE10,11 especially). I've seen a couple of solutions that don't work on IE or Chrome.
I've been trying to figure out how to do it in JQuery. A user is meant to fill out the form, and when they submit, the form should download a CSV file locally.
Unfortunately, I'm unable to use a server or any PHP, so I've resorted to JQuery/JavScript.
Here's what I have so far:
HTML5 Form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
</head>
<body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<div class="container-fluid">
<form action="" id="formCsv" style="padding-top: 20px">
<div class="form-group row">
<label for="clientName" class="col-lg-1">Client Name</label>
<div class="col-lg-3">
<input type="text" name="Name" class="form-control" id="clientName" required>
</div>
</div>
<div class="form-group row">
<label for="clientEmail" class="col-lg-1">Client Email</label>
<div class="col-lg-3">
<input type="email" name="Email" class="form-control" id="clientEmail" >
</div>
</div>
<div class="form-group row">
<label for="clientCountry" class="col-lg-1">Client Country</label>
<div class="col-lg-3">
<input type="text" name="Country" class="form-control" id="clientCountry" >
</div>
</div>
<div class="form-group row">
<label for="clientState" class="col-lg-1">Client State</label>
<div class="col-lg-3">
<input type="text" name="State" class="form-control" id="clientState" >
</div>
</div>
<input class="btn btn-primary" id="Submit" type="button" value="Submit">
</form>
</div>
<div id="results"></div>
<script src="formArray.js"></script>
</body>
</html>
JavaScript file that takes inputs and creates array (formArray.js)
$(document).ready(function () {
$("#Submit").click(function (e) {
var x = $("form").serializeArray();
$.each(x, function (i, field) {
$("#results").append(field.name + ":" + field.value+ '</br>');
});
});
});
How would I then have it so that when a user clicks "submit", a correctly formatted CSV file is generated?
I add few input fields & labels in bootstrap.
Then i add jQuery/javascript code to add & remove dynamically features.The script works fine.
But these dynamically inserted HTML elements are not displaying with proper alignment.
Please check image given below
I think,i put some elements in wrong position.
please suggest me about bringing proper alignment back.
Here is the source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Add/Remove</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="form-group" id="parent_div">
<div class="row form-group child_div">
<div class="col-xs-12 col-lg-3">
<label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
<div class="input-group" style="">
<select class="form-control " id="employeetype" onchange="updateText('')">
<option value="" disabled="" selected="">Select Job Type</option>
<option value="10">1</option>
<option value="10">2</option>
<option value="10">3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-lg-3">
<label for="form-input-col-xs-3" class="wb-inv">Date:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-xs-12 col-lg-3">
<label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
<span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
</div>
</div>
<div class="form-group ">
<div class="input-group">
<input class="btn btn-danger deleteButton" type="button" value="-" />
</div>
</div>
</div>
</div>
<label for="day" class="col-xs-2 control-label"></label>
<input class="btn btn-success " type="button" id="create_button" value="+" />
</form>
</div>
<script type="text/javascript">
$('#create_button').click(function() {
var html = $('.child_div:first').parent().html();
$(html).insertBefore(this);
});
$(document).on("click", ".deleteButton", function() {
$(this).closest('.child_div').remove();
});
</script>
</body>
</html>
please let me know if any further information is required.
Thanks :)
So here's the complete html with some style to fix the alignment:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Add/Remove</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
div.child_div:first-child {
margin-top: 0px;
padding-top: 0px;
}
div.child_div {
width: 615px;
}
div.job-position {
width: 220px;
}
div.job-type {
width: 180px;
}
div.job-amount {
width: 180px;
}
div.form-group {
padding-top: 25px;
}
input#create_button {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="form-group" id="parent_div">
<div class="row form-group child_div">
<div class="col-xs-12 col-lg-3 job-position">
<label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
<div class="input-group" style="">
<select class="form-control " id="employeetype" onchange="updateText('')">
<option value="" disabled="" selected="">Select Job Type</option>
<option value="10">1</option>
<option value="10">2</option>
<option value="10">3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-lg-3 job-date">
<label for="form-input-col-xs-3" class="wb-inv">Date:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-xs-12 col-lg-3 job-amount">
<label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
<span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
</div>
</div>
<div class="form-group ">
<div class="input-group">
<input class="btn btn-danger deleteButton" type="button" value="-" />
</div>
</div>
</div>
</div>
<input class="btn btn-success " type="button" id="create_button" value="+" />
</form>
</div>
<script type="text/javascript">
$('#create_button').click(function() {
var html = $('.child_div:first').parent().html();
$(html).insertBefore(this);
});
$(document).on("click", ".deleteButton", function() {
$(this).closest('.child_div').remove();
});
</script>
</body>
</html>
You still have two problems though:
The page allows you to delete the last item. The code should handle this situation. The problem is, if the last item is deleted, you can't create a new one from the first item.
Load the page, click add, remove the first item, then click add again, you get multiple green buttons. You should fix that.
Remove this line:
<label for="day" class="col-xs-2 control-label"></label>
It doesn't seem to have any purpose, yet it causes the mis-alignment.
Another issue you have is the red button is aligned to the top with the other divs. Add padding-top to that div should push it down to line up with the other fields and buttons.
You wrote:
$('#create_button').click(function() {
var html = $('.child_div:first').parent().html();
$(html).insertBefore(this);
});
That takes the contents of child-div's parent (i.e. the content of #parent-div) and appends it before this. In the case of the click handler - which is assigned to #create_button - this is the button itself. If you use insertBefore(this) in that context you are inserting your content between the label and the button.
<label for="day" class="col-xs-2 control-label"></label>
<!-- You just inserted a code block here! -->
<input class="btn btn-success " type="button" id="create_button" value="+" />
I'm pretty sure that's not what you intended to do.
P.S. be careful about copying code this way. The elements you're copying have IDs attached, but IDs should be unique across any given document.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Add/Remove</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="col-lg-2">
<label for="day" class="col-xs-2 control-label"></label>
<input class="btn btn-success " type="button" id="create_button" value="+" />
</div>
<div class="col-lg-10">
<div class="form-group" id="parent_div ">
<div class="row child_div col-lg-12">
<div class="col-lg-4">
<label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
<div class="input-group" style="">
<select class="form-control " id="employeetype" onchange="updateText('')">
<option value="" disabled="" selected="">Select Job Type</option>
<option value="10">1</option>
<option value="10">2</option>
<option value="10">3</option>
</select>
</div>
</div>
<div class="col-lg-4">
<label for="form-input col-xs-3" class="wb-inv">Date:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-lg-3">
<label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
<span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
</div>
</div>
<div class="col-lg-1">
<div class="input-group">
<input class="btn btn-danger deleteButton" type="button" value="-" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
var html = $('.form-group').html();
$('#create_button').on("click", function() {
$('.form-group').append(html);
});
$(document).on("click", ".deleteButton", function() {
$(this).closest('.child_div').remove();
});
</script>
This is the html code I have written
<html>
<head>
<!-- Load jQuery and the validate plugin -->
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="datepicker.css">
<body>
<h1> </h1>
<div class="container">
<div class="row">
<div class="col-sm-6">
<form id="addMaterial-form">
<div class="col-sm-12">
<div class="form-group col-sm-offset-4 col-sm-8">
<label for="materialCode">Material Code</label>
<input type="text" class="form-control " id="materialCode" placeholder="Enter Material Code" name="materialCode"/>
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-sm-offset-4 col-sm-8">
<label for="job">Description</label>
<textarea class="form-control " rows="5" id="description" placeholder="Enter Something" name="description"></textarea>
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-sm-offset-4 col-sm-8">
<label for="purchaseDate">Date Of Purchase</label>
<input type="text" class="form-control " id="purchaseDate" placeholder="Date of Purchase" name="purchaseDate"/>
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-sm-offset-4 col-sm-8">
<label for="stock">Stock</label>
<input type="text" class="form-control " id="stock" placeholder="Enter Stock" name="stock"/>
</div>
</div>
<div class="col-sm-12">
<button type="submit" id="submitButton" class="col-sm-offset-6 col-sm-4 btn btn-default">Save</button>
<div class="col-sm-12">
<span class="label label-danger col-sm-offset-4 col-sm-4 " id="messageFromServer" ></span>
</div>
</div>
</form>
</div>
</div>
<script src="jquery-1.11.1.js"></script>
<script src="jquery.validate.js"></script>
<script src="datepicker.js"></script>
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('#purchaseDate').datepicker({
format: "dd/mm/yyyy",
todayHighlight:true,
autoclose:true,
endDate:'+0d'
});
});
$('#addMaterial-form').submit(function(event) {
event.preventDefault();
alert("gonna do");
$.post('/insertMaterial', {"materialCode": "78","stock": "78","description": "fhfhgf","purchaseDate": "09/05/2013"} );
event.preventDefault();
});
</script>
</body>
</html>
The issue is whenever I click on submit I get an internal server error.The server error can be removed by changing post function to
$.post('/insertMaterial', JSON.stringify({"materialCode": "78","stock": "78","description": "fhfhgf","purchaseDate": "09/05/2013"}) );
But at the server side I am unable to extract the form params using the above method I am getting only null values there.The server side is done in dropwizard framework
#POST
public String addNewMaterial(#FormParam("materialCode") String materialCode, #FormParam("description") String description, #FormParam("purchaseDate") Date date, #FormParam("stock") double stock) {
System.out.println("got " + materialCode + description + date + stock);
return "OK";
}