function getOption(){
var select = document.getElementById("dynamic-select");
if(select.options.length > 0) {
var option = select.options[select.selectedIndex];
alert("Text: " + option.text + "\nValue: " + option.value);
} else {
window.alert("Select box is empty");
}
}
function addOption(){
var select = document.getElementById("dynamic-select");
select.options[select.options.length] = new Option('New Element', '0', false, false);
}
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.pac-container {
z-index: 10000 !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Shipping Method</h2>
<form>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optradio" checked>Deliver To *</label>
</div>
</div>
<div class="form-group">
<select id="dynamic-select">
<option value="None">Select Shipping</option>
</select>
</div>
<div class="form-group">
<a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country">
</div>
</div>
</div>
<button type="submit" onclick="addOption()">Add NEW</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I'm new to Javascript and in this example, basically I have created a Shipping Method Page. In the "ADD Delivery Address" link, on clicking there is a address form which needs to be filled out and after pressing the ADD NEW button, all the address form data should appear in the select menu option like in the picture below. But I'm unable to do so. Can someone please enlighten me on his. It would be a immense help to me.I have tried numerous times, it works with a single field data, but with multiple fields it fails. Thank you
first you created model popup add new button add submit so it submit form.
i have used for adding option into select something like.
var select = document.getElementById("dynamic-select");
var option = document.createElement("option");
option.text = "your text";
option.value = "your value"
function getOption(){
var select = document.getElementById("dynamic-select");
if(select.options.length > 0) {
var option = select.options[select.selectedIndex];
alert("Text: " + option.text + "\nValue: " + option.value);
} else {
window.alert("Select box is empty");
}
}
function addOption(){
var select = document.getElementById("dynamic-select");
var option = document.createElement("option");
var data = getFormData();
var text = data.address + data.street + " " + data.route + " " +data.city + " " +data.postcode
option.text = text;
option.value = "address"
select.add(option);
$('#myModal').modal('hide');
}
function getFormData(){
debugger;
var obj = new Object();
obj.address = document.getElementById("autocomplete").value;
obj.street = document.getElementById("street_number").value;
obj.route = document.getElementById("route").value;
obj.city = document.getElementById("locality").value;
obj.state = document.getElementById("administrative_area_level_1").value;
obj.postcode = document.getElementById("postal_code").value;
return obj;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.pac-container {
z-index: 10000 !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Shipping Method</h2>
<form>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optradio" checked>Deliver To *</label>
</div>
</div>
<div class="form-group">
<select id="dynamic-select">
<option value="None">Select Shipping</option>
</select>
</div>
<div class="form-group">
<a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address"
onFocus="" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country">
</div>
</div>
</div>
<button type="button" onclick="addOption()">Add NEW</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
First thing, your are using button type="submit" it is going to post back, Just use <button onclick="addOption()">Add NEW</button>
Secondly the <form> either you remove model from <form> tag or use return false in addOption() function
Third use jquery map() function to collect all fields value in side addOption()
Check this code :
function getOption() {
var select = document.getElementById("dynamic-select");
if (select.options.length > 0) {
var option = select.options[select.selectedIndex];
alert("Text: " + option.text + "\nValue: " + option.value);
} else {
window.alert("Select box is empty");
}
}
function addOption() {
var select = document.getElementById("dynamic-select");
var newListItem = $("#myModal input").map(function () { return $(this).val(); }).get();
select.options[select.options.length] = new Option(newListItem, '0', false, false);
$('#myModal').modal('toggle');
return false;
}
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Shipping Method</h2>
<form>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optradio" checked>Deliver To *
</label>
</div>
</div>
<div class="form-group">
<select id="dynamic-select">
<option value="None">Select Shipping</option>
</select>
</div>
<div class="form-group">
<a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country">
</div>
</div>
</div>
<button type="button" onclick="addOption()">Add NEW</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Here is the new entered address in select :
Related
Hello I´m building a contact book where you can add and edit contacts. Now I want the "edit" button to open a modal where you can make changes in the contact and save. Why is it not working with document.getElementById("name").value = kontakt.name; to get the data of an existing contact in a modal when opening?
It worked before when using a html site. So there is no problem with the syntax
I have this modal
<div class="container">
<h2></h2>
<!-- The Modal -->
<div class="modal" id="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Kontakt erstellen</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="container">
<form>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-label" placeholder="Name" id="name">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-10">
<input type="email" class="form-label" placeholder="E-Mail" id="email">
</div>
</div>
<div class="form-group row">
<label for="plz" class="col-sm-2 col-form-label">PLZ</label>
<div class="col-sm-10">
<input type="number" class="form-label" placeholder="PLZ" id="plz">
</div>
</div>
<div class="form-group row">
<label for="ort" class="col-sm-2 col-form-label">Ort</label>
<div class="col-sm-10">
<input type="text" class="form-label" id="ort" placeholder="Ort">
</div>
</div>
<div class="form-group row">
<label for="strasse" class="col-sm-2 col-form-label">Strasse und Hausnummer</label>
<div class="col-sm-10">
<input type="text" class="form-label" id="strasse" placeholder="Strasse und Hausnummer">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-block" onclick="login()" >Speichern</button>
</div>
</div>
</div>
</div>
</div>
This is the edit button which is created in the table with every new contact
// edit button
var button = document.createElement('button');
button.onclick = function() {
Initialize(kontakt.id);
$('#dialog').modal('show');
This is the initialize function which should put the contact data in the empty fields. Here comes the error from. It says TypeError: document.getElementById(...) is null
function kontaktBearbeitenInit(id) {
let kontakt = kontakteSpeicher.findContacttoId(id);
document.getElementById("name").disabled = true;
document.getElementById("name").value = kontakt.name;
document.getElementById("email").value = kontakt.email;
document.getElementById("Ort").value = kontakt.ort;
document.getElementById("plz").value = kontakt.plz;
document.getElementById("strasse").value = kontakt.strasse;
}
Try replace
document.getElementById("Ort").value = kontakt.ort;
to
document.getElementById("ort").value = kontakt.ort;
const container = document.getElementsByClassName('container')[0];
var button = document.createElement('button');
container.appendChild(button);
button.innerHTML = 'Create';
button.classList.add('btn', 'btn-primary');
button.onclick = function() {
$('#dialog').show();
Initialize();
}
function closeModal() {
$('#dialog').hide();
}
function Initialize() {
let kontakt = {
name: 'John',
email: 'test#example.com',
ort: 'ort',
plz: 'plz',
strasse: 'strasse'
}
document.getElementById("name").disabled = true;
document.getElementById("name").value = kontakt.name;
document.getElementById("email").value = kontakt.email;
document.getElementById("ort").value = kontakt.ort;
document.getElementById("plz").value = kontakt.plz;
document.getElementById("strasse").value = kontakt.strasse;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h2></h2>
<!-- The Modal -->
<div class="modal" id="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Kontakt erstellen</h4>
<button type="button" class="close" data-dismiss="modal" onclick="closeModal()">×</button>
</div>
<div class="modal-body">
<div class="container">
<form>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-label" placeholder="Name" id="name">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-10">
<input type="email" class="form-label" placeholder="E-Mail" id="email">
</div>
</div>
<div class="form-group row">
<label for="plz" class="col-sm-2 col-form-label">PLZ</label>
<div class="col-sm-10">
<input type="number" class="form-label" placeholder="PLZ" id="plz">
</div>
</div>
<div class="form-group row">
<label for="ort" class="col-sm-2 col-form-label">Ort</label>
<div class="col-sm-10">
<input type="text" class="form-label" id="ort" placeholder="Ort">
</div>
</div>
<div class="form-group row">
<label for="strasse" class="col-sm-2 col-form-label">Strasse und Hausnummer</label>
<div class="col-sm-10">
<input type="text" class="form-label" id="strasse" placeholder="Strasse und Hausnummer">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-block" onclick="login()">Speichern</button>
</div>
</div>
</div>
</div>
</div>
function getOption(){
var select = document.getElementById("dynamic-select");
if(select.options.length > 0) {
var option = select.options[select.selectedIndex];
alert("Text: " + option.text + "\nValue: " + option.value);
} else {
window.alert("Select box is empty");
}
}
function addOption(){
var select = document.getElementById("dynamic-select");
select.options[select.options.length] = new Option('New Element', '0', false, false);
}
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.pac-container {
z-index: 10000 !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Shipping Method</h2>
<form>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optradio" checked>Deliver To *</label>
</div>
</div>
<div class="form-group">
<select id="dynamic-select">
<option value="None">Select Shipping</option>
</select>
</div>
<div class="form-group">
<a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country">
</div>
</div>
</div>
<button type="submit" onclick="addOption()">Add NEW</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I'm new to Javascript and in this example, basically I have created a Shipping Method Page. In the "ADD Delivery Address" link, on clicking there is a address form which needs to be filled out and after pressing the ADD NEW button, all the address form data should appear in the select menu option like in the picture below. But I'm unable to do so. Can someone please enlighten me on his. It would be a immense help to me. Thank you
This is line bug, id newopt don't exist in html.
var newopt = $('#newopt').val();
I have printing textbox, labels and dropdown values on print preview page. Here I've attached Codepen link as well as code what I have done yet.
HTML
<form>
<div class="container no-print">
<div class="row" id="DivDate">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right">
<input type="text" name="CreatedDate" placeholder="DD/MM/YYYY" class="form-control" />
</div>
</div>
</div>
</div>
<div id="DivDoc">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-2 col-xs-4">
Respected Dr.
</label>
<div class="col-md-10 col-xs-8">
<input type="text" name="txtDoctor" placeholder="Doctor Name" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div id="DivData">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-2">
Referring
</label>
<div class="col-xs-4 col-md-2">
<select name="ddlGender" class="form-control">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
</select>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" name="txtPatient" placeholder="Patient Name" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
to you for the favour of your kind consultation of
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="his">his</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="col-xs-3">
<select name="ddlOption" class="form-control">
<option value="C/O">C/O</option>
</select>.
</div>
<label class="col-xs-9">
<input type="text" class="form-control" />
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
Please do the needful to evaluate the case and treat
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="him">him</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
accordingly.
</label>
</div>
</div>
</div>
</div>
<div class="row" id="DivFooter">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="col-xs-4">
<input type="button" value="Save" class="btn btn-block btn-primary" id="BtnSave" />
</div>
<div class="col-xs-4">
<input type="button" value="Print" class="btn btn-block btn-primary" />
</div>
<div class="col-xs-4">
<input type="button" value="Cancel" class="btn btn-block btn-default" />
</div>
</div>
</div>
</div>
</form>
<div class="print">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right" id="PrintDate">
</div>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintDoc">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintData">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
And Jquery:
$("#BtnSave").click(function() {
var values1 = [];
$('#DivDate').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values1.push($(this).val().trim());
} else {
values1.push($(this).text().trim());
}
});
$("#PrintDate").text(values1.join(" "));
var values2 = [];
$('#DivDoc').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values2.push($(this).val().trim());
} else {
values2.push($(this).text().trim());
}
});
$("#PrintDoc").text(values2.join(" "));
var values3 = [];
$('#DivData').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values3.push($(this).val().trim());
} else {
values3.push($(this).text().trim());
}
});
$("#PrintData").text(values3.join(" "));
window.print();
});
CodePen:https://codepen.io/anon/pen/GmjmBr
I want underscore under input text like doctorname and patient name. Can I add HTML any how in preview mode?
As I am getting value of all input in array and joining it, I don't think I can save HTML code in array.
I've attached Image for better clarification
I am trying to generate a modal box on submitting a form but when I submit it, it is not validating the required input because it's type='button'. If I replace it with 'submit' then it not showing pop-up box. And also I want to validate first and then generate pop-up. Would someone please help me out in this!
<html>
<head>
<meta name="viewport" content="width = device-width , initial-scale = 1.0">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form>
<div class="form-group">
<label for="water">Enter Water :</label>
<input id="water" type="number" min="150" max="210" placeholder="150 to 210 " required class='form-control'>
</div>
<div class="form-group">
<label for="compressiveStrength">Compresive Strength :</label>
<input id="compressiveStrength" type="number" min="30" max="80" placeholder="30 to 80" required class="form-control">
</div>
<div class="form-group">
<label for="plasticViscosity">Plastic Viscosity :</label>
<input id="plasticViscosity" type="number" min="3" max="15" placeholder="3 to 15" required class="form-control">
</div>
<div class="form-group">
<label for="fiber">Fiber Volume Fraction :</label>
<input id="fiber" type="number" min="0" max="2" placeholder="0 to 2" required class="form-control">
</div>
<div class="form-group">
<label for="aspectRatio">Aspect Ratio :</label>
<select id="aspectRatio" class="form-control">
<option>60</option>
<option>50</option>
</select>
</div>
<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-lg">Generate</button>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Result</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</html>
Simply prevent the default behaviour like this:
$('#form1').submit(function(event){
// cancels the form submission
event.preventDefault();
//If the form is valid open modal
if($('#form1')[0].checkValidity() ){
$('#myModal').modal('toggle');
}
// do whatever you want here
});
So for your example it would be:
<html>
<head>
<meta name="viewport" content="width = device-width , initial-scale = 1.0">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form id="form1" name="form1">
<div class="form-group">
<label for="water">Enter Water :</label>
<input id="water" type="number" min="150" max="210" placeholder="150 to 210 " required class='form-control'>
</div>
<div class="form-group">
<label for="compressiveStrength">Compresive Strength :</label>
<input id="compressiveStrength" type="number" min="30" max="80" placeholder="30 to 80" required class="form-control">
</div>
<div class="form-group">
<label for="plasticViscosity">Plastic Viscosity :</label>
<input id="plasticViscosity" type="number" min="3" max="15" placeholder="3 to 15" required class="form-control">
</div>
<div class="form-group">
<label for="fiber">Fiber Volume Fraction :</label>
<input id="fiber" type="number" min="0" max="2" placeholder="0 to 2" required class="form-control">
</div>
<div class="form-group">
<label for="aspectRatio">Aspect Ratio :</label>
<select id="aspectRatio" class="form-control">
<option>60</option>
<option>50</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-lg">Generate</button>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Result</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
$('#form1').submit(function(event){
// cancels the form submission
event.preventDefault();
if($('#form1')[0].checkValidity() ){
$('#myModal').modal('toggle');
}
// do whatever you want here
});
</script>
</html>
For more information check out:
https://stackoverflow.com/a/5688798/7667467
Change your button to:
<input type="submit" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-lg" value="Generate">
You can add classes to any element and it will look the same
Here i did form validation ,after form validation all fields filled and click the INVITE QUOTES button means i want show modal, and i want to fill the modal form after filled all field means i want to close that modal,but dont want to refresh the page,Here i click INVITE QUOTES button means page is refreshing and modal is not showing how can do this?
<script>
/*$('#businessForm').submit(function (e) {
e.preventDefault();
validateForm();
});*/
function validateForm() {
var ratesfor = document.forms["myForm"]["ratesfor"].value;
if (ratesfor == null || ratesfor == "") {
document.getElementById("rate_err").innerHTML = "Field is empty";
}
var no = document.forms["myForm"]["no"].value;
if (no == null || no == "") {
document.getElementById("no_err").innerHTML = "Field is empty";
}
var breath = document.forms["myForm"]["breath"].value;
if (breath == null || breath == "") {
document.getElementById("b_t_err").innerHTML = "Field is empty";
}
var height = document.forms["myForm"]["height"].value;
if (height == null || height == "") {
document.getElementById("height_err").innerHTML = "Field is empty";
}
var truck_type = document.forms["myForm"]["truck_type"].value;
if (truck_type == null || truck_type == "") {
document.getElementById("truck_type_err").innerHTML = "Field is empty";
}
var datepicker = document.forms["myForm"]["datepicker-13"].value;
if (datepicker == null || datepicker == "") {
document.getElementById("pickup_err").innerHTML = "Field is empty";
}
var myTime = document.forms["myForm"]["myTime"].value;
if (myTime == null || myTime == "") {
document.getElementById("time_err").innerHTML = "Field is empty";
}
var from = document.forms["myForm"]["from"].value;
if (from == null || from == "") {
document.getElementById("from_err").innerHTML = "Field is empty";
}
var to = document.forms["myForm"]["to"].value;
if (to == null || to == "") {
document.getElementById("to_err").innerHTML = "Field is empty";
return false;
}
else{
$('#businessForm').submit(function (e) {
e.preventDefault();
})
$.ajax({
url:'search_truck.php',
type:'POST',
data : { 'state_id' : city},
success:function(data){
//var res=jQuery.parseJSON(data);// convert the json
console.log(data);
},
});
}
}
</script>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
$(document).ready(function(){
$("#Register").click(function(){
$("#myModal").hide();
$("#myModal_Register").modal();
});
});
</script>
<form id="businessForm" method="POST" onsubmit="return validateForm()" name="myForm" enctype="multipart/form-data">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="experience">Rates For</label>
<input type="ratesfor" class="form-control" id="ratesfor" name="ratesfor" placeholder="weight(kg)">
<span id="rate_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="length">Length</label>
<input type="text" class="form-control" id="no" name="no" placeholder="Length"><span id="no_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="length"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="length" id="length" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="breadth">Breadth</label>
<input type="text" class="form-control" id="breath" name="breath" placeholder="Breadth"><span id="b_t_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="breadth"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="b_type" id="b_type" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="height">Height</label>
<input type="text" class="form-control" id="height" name="height" placeholder="Height"><span id="height_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="height"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="type" id="h_t" name="h_t" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="experience">Type Of Truck</label>
<select id="truck_type" name="truck_type" autocomplete="off" class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12">
<option value="feet">feet</option>
<option value="mm">mm</option>
<option value="mtr">mtr</option>
</select><span id="truck_type_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="date">Date of PickUp</label>
<br>
<input type="text" placeholder="DD-MM-YY" id="datepicker-13" name="datepicker-13" style="width:100%;height:35px;">
<span id="pickup_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="time">Time of PickUp</label>
<br>
<input type="time" class="form-control" id="myTime" name="myTime" placeholder="Time">
<span id="time_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="experience">Destination</label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" id="from" name="from">
<option value="">From</option>
<option value="1">Ahmedabad</option>
<option value="2">Bangalore</option>
</select>
</div>
<span id="from_err"></span>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="experience"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="to" id="to" style="margin-top:25px;">
<option value="">To</option>
<option value="1">Guragon</option>
<option value="2">Hyderabad</option>
</select>
</div>
<span id="to_err"></span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
</div>
</div>
</div>
</form>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="z-index: 9999;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:5px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname">Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="psw"> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-info btn-block">Login </button>
</form>
</div>
<div class="modal-footer">
<p>Not a member? <b>Sign Up</b>
</p>
<!--<p>Forgot Password?</p>-->
</div>
</div>
</div>
</div>
<!--######
Login From End
#######--->
<!--#####
Register From Start
#####--->
<div class="modal fade" id="myModal_Register" role="dialog">
<div class="modal-dialog" style="z-index: 9999;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:5px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Registration</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw">Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="form-group">
<label for="psw"> Confirm Password</label>
<input type="text" class="form-control" id="psw" placeholder="Confirm password">
</div>
<button type="submit" class="btn btn-info btn-block">Submit</button>
</form>
</div>
<!-- <div class="modal-footer">
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>-->
</div>
</div>
</div>
</div>
Bro check this line:
<button type="submit" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
here you are using button type submit, submit button will submit the form and reloads the page. Instead use:
<button type="button" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>