This is simple html code, I've just recently started learning about writing these.
All of the physical attributes are working for this GUI, but some of my buttons are not functional. 1st-works, 2nd-not working, 1st radio-works(sort of, the answer is missing the y information), 2nd radio-not working, 3rd button-not working. Any insight to what I might be doing wrong would be greatly appreciated!!
<html>
<head>
</head>
<body>
<form name="form1">
<table>
<tr>
<td> <b><font color="00FF00">Enter the value for A</font></b> </td>
<td> <input type="text" name="box1" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
<tr>
<td> <i><font color="00FF00">Enter the value for B</font></i> </td>
<td> <input type="text" name="box2" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
<tr>
<td> <b><i><font color="00FF00">Enter the value for C</font></i></b> </td>
<td> <input type="text" name="box3" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
<tr>
<td> <input type="button" name="button1" size="8" style="width:100%; background-color:FFC0FF; color:FF0000" value="Click here to calculate value for X" OnClick="
var a = parseFloat(document.form1.box1.value);
var b = parseFloat(document.form1.box2.value);
var c = parseFloat(document.form1.box3.value);
var x = ((12*b*b - 4*b*c + ((b*a*c) / (b-c))) / (5-20*a*a)) - 5*a*a*b*b*c*c;
document.form1.box4.value = x;
"/> </td>
<td> <input type="text" name="box4" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
<tr>
<td> <input type="button" name="button2" size="8" style="width:100%; background-color:FFC0FF; color:FF0000" value="Click here to calculate Y value" OnClick="
var a = parseFloat(document.form1.box1.value);
var b = parseFloat(document.form1.box2.value);
var c = parseFloat(document.form1.box3.value);
var y = ((5*a*c ((a*b*c + 2*c*c) / (5*a+b))) / (((1+a*a) / (b+c+1)) + ((1-3*c) / (2*b-4*c-2)))) - 10*a - ((b*c)/2);
document.form1.box5.value = y;
"/> </td>
<td> <input type="text" name="box5" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
<tr>
<td> <input type="radio" name="radio1" OnClick="
var x = parseFloat(document.form1.box4.value);
var y = parseFloat(document.form1.box5.value);
var total = x-y;
document.form1.box6.value = total;
"/> <font color="00FF00">Select to show X-Y</font> </td>
<td> <input type="text" name="box6" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
<tr>
<td> <input type="radio" name="radio2" OnClick="
var x = parseFloat(document.form1.box4.value);
var y = parseFloat(document.form1.box5.value);
var tot = x*y;
document.form1.box7.value = tot;
"/> <font color="00FF00">Select to show X*Y</font> </td>
<td> <input type="text" name="box7" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
<tr>
<td> <input type="button" name="button3" size="8" style="width:100%; background-color:FFC0FF; color:FF0000" value="Click to get A+B+C" OnClick"
var a = parseFloat(document.form1.box1.value);
var b = parseFloat(document.form1.box2.value);
var c = parseFloat(document.form1.box3.value);
var sum = a + b + c;
document.form1.box8.value = sum;
"/> </td>
<td> <input type="text" name="box8" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
</table>
</form>
</body>
</html>
This code is not valid (you didn't closed all the opened balises). Did you set an action attribute on the form? The event is "onclick". The keyword is "var". You cannot retrieve DOM elements in pure javascript like that, you need to call "getElementById" for example.
Hope it'll help.
An operator is missing in your second function, between 5*a*c and ((a*b*c... ;
var y = ((5*a*c (which operator here) ((a*b*c + 2*c*c) / (5*a+b))) / (((1+a*a) / (b+c+1)) + ((1-3*c) / (2*b-4*c-2)))) - 10*a - ((b*c)/2);
Your last button's OnClick is missing "=" sign;
<td>
<input type="button" name="button3" size="8" style="width:100%; background-color:FFC0FF; color:FF0000" value="Click to get A+B+C" OnClick="
var a = parseFloat(document.form1.box1.value);
var b = parseFloat(document.form1.box2.value);
var c = parseFloat(document.form1.box3.value);
var sum = a + b + c;
document.form1.box8.value = sum;
"/>
</td>
Related
I cant get any of the buttons using onclick to recognise the functions. I get an error "cant find variable". Im very new to all this and at a loss. It doesn't matter which button I click I have the same issues with all of them.
in the below code,
I click on <button onclick="show_admin()">Admin</button> which should call function show_admin().. What am I doing wrong please.
Inspector output
const char main_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset='UTF-8'">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="refresh" content="500; url=/">
<title>System Settings</title>
<body onload="show_admin()">
<div class="banner">
<h1>X Controller</h1>
</div>
<div class="split left">
<div class="centered">
These are my button
<button onclick="show_admin()">Admin</button>
<br/>
<button onclick="show_wifi()">WIFI</button>
<br/>
<button onclick="show_tags()">Tags</button>
<br/>
</div>
</div>
<div class="split right">
<div class="centered" id="showdata">
</div>
</div>
</body>
<script>
These are my functions
function show_admin() {var table_data = <h1>Admin Settings</h1><br/>%s<br/>
<form action="/ADMINSetting" method="POST">
<table><tr>
<td> User Name </td> <td> <input type="String" name="UserName" placeholder="%s"></td>
</tr><tr>
<td> Password </td> <td> <input type="String" name="UserPass" placeholder="%s">
</td></tr></table>
<input type="submit" value="Update Admin Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
function show_wifi() { var table_data = <h1>WIFI Settings</h1><br/>%s<br/>
<form action="/WIFISetting" method="POST">
<table>
<tr>
<td> SSID Network </td> <td> <input type="String" name="WifiSsid" placeholder="%s"></td>
</tr><tr>
<td> SSID Password </td> <td> <input type="String" name="SsidPass" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update Wifi Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
function show_tags() { let table_data = <h1>Tag Settings</h1><br/>%s<br/>
<form action="/DEVICESetting" method="POST">
<table>
<tr>
<td> Access Tag 1 </td> <td> <input type="String" name="TAG1" placeholder="%s"></td>
</tr>
<tr>
<td> Access Tag 2 </td> <td> <input type="String" name="TAG2" placeholder="%s"></td>
</tr>
<tr>
<td> Cleaner Tag 1 </td> <td> <input type="String" name="CTAG1" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update BLE Tag Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
</script>
</body>
</html>
)=====";
I have tried rearranging the function and moving its position. with no luck
Unless you have JSX installed, You can't just stick HTML elements into JavaScript like that. You will need to use quotes around all the HTML.
It looks like you're reusing the same tags anyway, why not stick all those tags into the HTML portion and update the values in Javascript? You can also update the CSS through JavaScript and set display:none if you want to hide an unused element.
I added the below to the html section
<div class="split right">
<div class="centered" id="showdata">
<form id="adminForm">
<table>
<tr>
<td> User Name </td>
<td>
<input type="String" name="UserName" placeholder="%s">
</td>
</tr>
<tr>
<td> Password </td>
<td>
<input type="String" name="UserPass" placeholder="%s">
</td>
</tr>
</table>
<input type="submit" value="Update Admin Details">
</form>
and the following to the script section
function admin(){
document.getElementById("wifiForm").style.display="none";
document.getElementById("tagForm").style.display="none";
document.getElementById("adminForm").style.display="block";
}
I'm working on dynamic 3 column table that has 3 input text type : Product, quantity and date
This works good but i want to change type format:
Product column => Dropdown type
Quantity column => number type
Date column => Date type (dd-mm-yyyy)
How i do change it?
Thank you
Original source: link
Code online: https://jsfiddle.net/bvotcode/r61ptxe9/7/
HTML
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Date</th>
</tr>
<tr id="row1">
<td id="product_row1">Car</td>
<td id="quantity_row1">10</td>
<td id="date_row1">20/12/2021</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="product_row2">Book</td>
<td id="quantity_row2">22</td>
<td id="date_row2">26</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="product_row3">Laptop</td>
<td id="quantity_row3">44</td>
<td id="date_row3">19/01/2022</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr>
<td><input type="text" id="new_product"></td>
<td><input type="text" id="new_quantity"></td>
<td><input type="text" id="new_date"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
</body>
</html>
</body>
CSS
.pt-3-half { padding-top: 1.4rem; }
Javascript
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var product=document.getElementById("product_row"+no);
var quantity=document.getElementById("quantity_row"+no);
var date=document.getElementById("date_row"+no);
var product_data=product.innerHTML;
var quantity_data=quantity.innerHTML;
var date_data=date.innerHTML;
product.innerHTML="<input type='text' id='product_text"+no+"' value='"+product_data+"'>";
quantity.innerHTML="<input type='text' id='quantity_text"+no+"' value='"+quantity_data+"'>";
date.innerHTML="<input type='text' id='date_text"+no+"' value='"+date_data+"'>";
}
function save_row(no)
{
var product_val=document.getElementById("product_text"+no).value;
var quantity_val=document.getElementById("quantity_text"+no).value;
var date_val=document.getElementById("date_text"+no).value;
document.getElementById("product_row"+no).innerHTML=product_val;
document.getElementById("quantity_row"+no).innerHTML=quantity_val;
document.getElementById("date_row"+no).innerHTML=date_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_product=document.getElementById("new_product").value;
var new_quantity=document.getElementById("new_quantity").value;
var new_date=document.getElementById("new_date").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='product_row"+table_len+"'>"+new_product+"</td><td id='quantity_row"+table_len+"'>"+new_quantity+"</td><td id='date_row"+table_len+"'>"+new_date+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_product").value="";
document.getElementById("new_quantity").value="";
document.getElementById("new_date").value="";
}
You're using the type="text" for all of the <input> tags. You should consider changing the type of the inputs in your edit_row function.
For numbers, the type of input should be number;
For dates, date;
And finally, to render a dropdown box, the best solution is to use a <select> tag instead of an <input>. Don't forget to write all the options of your dropdown inside of <option> tags (which should be all inside of one <select> tag); Here you can find a simple explanation on how to use the <select> tag.
I have a form with 2 radio buttons, that if I choose "Yes", a DIV with aditionally 2 pairs of radio buttons appears, and if yes is choosen in the first, I need required set in the 2 new radio button pairs ("Type" and "What to do"). If "Move Number" is choosen in "What to do" radio pair, a second DIV appears with an input field where the user should tell which number to move .. this field then needs required set .. how can I do this dynamically?
Just for info, I use Parsley JS Validator to validate the fields.
Here is a minimalistic piece of the code:
function CompanyMobileFunction() {
var x = document.getElementById("CompanyMobile");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function CompanyMobileMoveFunction() {
var x = document.getElementById("MobileMove");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function CompanyMobileFunctionClose() {
var x = document.getElementById("CompanyMobile");
if (x.style.display === "none") {
x.style.display = "none";
} else {
x.style.display = "none";
}
}
function CompanyMobileMoveFunctionClose() {
var x = document.getElementById("MobileMove");
if (x.style.display === "none") {
x.style.display = "none";
} else {
x.style.display = "none";
}
}
<table style="width: 550px;">
<tr>
<td style="width: 250px;"><b>Mobile phone? (required) :</b></td>
<td>
<label class="container">Yes
<input type="radio" id="CompanyMobileYES" name="CompanyMobile" onclick="CompanyMobileFunction()" value="yes">
<span class="radio"></span>
</label>
</td>
<td>
<label class="container">No
<input type="radio" id="CompanyMobileNO" name="CompanyMobile" onclick="CompanyMobileFunctionClose()" value="yes">
<span class="radio"></span>
</label>
</td>
</tr>
</table>
<div id="CompanyMobile" style="display: none;">
<table style="width: 550px;">
<tr>
<td style="width: 250px;"><b>Type (required) :</b></td>
<td>
<label class="container">iPhone
<input type="radio" id="iPhone" name="MobileOS" value="iPhone">
<span class="radio"></span>
</label>
</td>
<td>
<label class="container">Android
<input type="radio" id="Android" name="MobileOS" value="Android">
<span class="radio"></span>
</label>
</td>
</tr>
<tr>
<td style="width: 250px;"><b>What to do? (required) :</b></td>
<td>
<label class="container">New Number
<input type="radio" id="CompanyMobileMoveNew" name="CompanyMobileMove" onclick="CompanyMobileMoveFunctionClose()" value="newnumber">
<span class="radio"></span>
</label>
</td>
<td>
<label class="container">Move Number
<input type="radio" id="CompanyMobileMoveMove" name="CompanyMobileMove" onclick="CompanyMobileMoveFunction()" value="movenumber">
<span class="radio"></span>
</label>
</td>
</tr>
</table>
<div id="MobileMove" style="display: none;">
<table style="width: 550px;">
<tr>
<td style="width: 250px;"><b>Number to move (required) :</b></td>
<td align="left">
<input class="form-control" style="width: 130px;" type="number" id="mobiletomove" name="mobiletomove" minlength="11111111" maxlength="99999999">
</td>
</tr>
</table>
</div>
You can use jQuery, classes, and prop() to do this. Make sure you are removing the required prop even if the input is hidden.
function toggleRequired(){
var isYesChecked = $('#CompanyMobileYES').is(':checked');
var isMoveChecked = $('#CompanyMobileMoveMove').is(':checked');
$('[name="MobileOS"]').prop('required', isYesChecked);
$('[name="CompanyMobileMove"').prop('required', isYesChecked);
$('#mobiletomove').prop('required', isMoveChecked);
}
function toggleHidden(){
var isYesChecked = $('#CompanyMobileYES').is(':checked');
var isMoveChecked = $('#CompanyMobileMoveMove').is(':checked');
$('#CompanyMobile').toggleClass('hidden', !isYesChecked);
$('#MobileMove').toggleClass('hidden', !isYesChecked || !isMoveChecked );
}
$('[name="CompanyMobile"]').on('change',function () {
toggleRequired();
toggleHidden();
} );
$('[name="CompanyMobileMove"]').on('change',function () {
toggleRequired();
toggleHidden();
} );
.hidden {
display: none;
}
input:required::after {
content: '***';
margin: 15px;
}
input:required {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table style="width: 550px;">
<tr>
<td style="width: 250px;"><b>Mobile phone? (required) :</b></td>
<td>
<label class="container">Yes
<input id="CompanyMobileYES" name="CompanyMobile" type="radio" value="yes">
<span class="radio"></span>
</label>
</td>
<td>
<label class="container">No
<input id="CompanyMobileNO" name="CompanyMobile" type="radio" value="no">
<span class="radio"></span>
</label>
</td>
</tr>
</table>
<div class="hidden" id="CompanyMobile">
<table style="width: 550px;">
<tr>
<td style="width: 250px;"><b>Type (required) :</b></td>
<td>
<label class="container">iPhone
<input id="iPhone" name="MobileOS" type="radio" value="iPhone">
<span class="radio"></span>
</label>
</td>
<td>
<label class="container">Android
<input id="Android" name="MobileOS" type="radio" value="Android">
<span class="radio"></span>
</label>
</td>
</tr>
<tr>
<td style="width: 250px;"><b>What to do? (required) :</b></td>
<td>
<label class="container">New Number
<input id="CompanyMobileMoveNew" name="CompanyMobileMove" type="radio" value="newnumber">
<span class="radio"></span>
</label>
</td>
<td>
<label class="container">Move Number
<input id="CompanyMobileMoveMove" name="CompanyMobileMove" type="radio" value="movenumber">
<span class="radio"></span>
</label>
</td>
</tr>
</table>
</div>
<div class="hidden" id="MobileMove">
<table style="width: 550px;">
<tr>
<td style="width: 250px;"><b>Number to move (required) :</b></td>
<td align="left">
<input class="form-control" id="mobiletomove" maxlength="99999999" minlength="11111111" name="mobiletomove" style="width: 130px;" type="number">
</td>
</tr>
</table>
</div>
var mainApp = angular.module("mainApp", []);
mainApp.controller('formulierController', function($scope) {
$scope.reset = function() {
$scope.voornaam = "Mark";
$scope.achternaam = "Schuurman";
$scope.afdeling = "ICT";
$scope.geboortedatum = new Date("Jan, 01, 0000");
$scope.telefoon = +31412123456;
$scope.inschrijvingsdatum = new Date("Jan, 01, 0000");
$scope.mobiel = +31612345678;
$scope.email = "Mark#gmail.com";
}
$scope.reset();
$scope.showJson = function() {
$scope.json = angular.toJson($scope.user);
}
});
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
<html>
<head>
<title>Angular JS Forms</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<h2>AngularJS Formulier</h2>
<div ng-app="mainApp" ng-controller="formulierController">
<form name="formulier" novalidate>
<table border="0">
<tr>
<td>Voornaam:</td>
<td>
<input name="voornaam" type="text" ng-model="voornaam" required>
<span style="color:red" ng-show="formulier.voornaam.$dirty && formulier.voornaam.$invalid">
<span ng-show="formulier.voornaam.$error.required">Voornaam is verplicht.</span>
</span>
</td>
</tr>
<tr>
<td>Achternaam: </td>
<td>
<input name="achternaam" type="text" ng-model="achternaam" required>
<span style="color:red" ng-show="formulier.achternaam.$dirty && formulier.achternaam.$invalid">
<span ng-show="formulier.achternaam.$error.required">Achternaam is verplicht.</span>
</span>
</td>
</tr>
<tr>
<td>Afdeling: </td>
<td>
<input name="afdeling" type="text" ng-model="afdeling" required>
<span style="color:red" ng-show="formulier.afdeling.$dirty && formulier.afdeling.$invalid">
<span ng-show="formulier.afdeling.$error.required">Afdeling is vereist.</span>
</span>
</td>
</tr>
<tr>
<td>Geboortedatum: </td>
<td>
<!--<input type="date" id="exampleInput" name="input" ng-model="example.value"
placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />-->
<input name="geboortedatum" type="date" id="datepicker1" ng-model="geboortedatum" placeholder="dd-MM-yyyy" required>
<span style="color:red" ng-show="formulier.geboortedatum.$dirty && formulier.geboortedatum.$invalid">
<span ng-show="formulier.geboortedatum.$error.required">Geboortedatum is vereist.</span>
<!--<span ng-show="formulier.geboortedatum.$error.email">Geen geldige datum.</span>-->
</span>
</td>
</tr>
<tr>
<td>Telefoon: </td>
<td>
<input name="telefoon" type="tel" ng-model="telefoon" required>
<span style="color:red" ng-show="formulier.telefoon.$dirty && formulier.telefoon.$invalid">
<span ng-show="formulier.telefoon.$error.required">Telefoonnummer is vereist.</span>
<span ng-show="formulier.telefoon.$error.number">Geen geldig getal.</span>
</span>
</td>
</tr>
<tr>
<td>Inschrijvingsdatum: </td>
<td>
<!--<input type="date" id="exampleInput" name="input" ng-model="example.value"
placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />-->
<input name="inschrijvingsdatum" type="date" id="datepicker2" ng-model="inschrijvingsdatum" placeholder="dd-MM-yyyy" required>
<span style="color:red" ng-show="formulier.inschrijvingsdatum.$dirty && formulier.inschrijvingsdatum.$invalid">
<span ng-show="formulier.inschrijvingsdatum.$error.required">Inschrijvingsdatum is vereist.</span>
<!--<span ng-show="formulier.inschrijvingsdatum.$error.email">Geen geldige datum.</span>-->
</span>
</td>
</tr>
<tr>
<td>Mobiel: </td>
<td>
<input name="mobiel" type="tel" ng-model="mobiel" required>
<span style="color:red" ng-show="formulier.mobiel.$dirty && formulier.mobiel.$invalid">
<span ng-show="formulier.mobiel.$error.required">Mobiel nummer is vereist.</span>
<span ng-show="formulier.mobiel.$error.number">Geen geldig getal.</span>
</span>
</td>
</tr>
<tr>
<td>Email: </td>
<td>
<input name="email" type="email" ng-model="email" length="100" required>
<span style="color:red" ng-show="formulier.email.$dirty && formulier.email.$invalid">
<span ng-show="formulier.email.$error.required">Email is verplicht.</span>
<span ng-show="formulier.email.$error.email">Ongeldig e-mailadres.</span>
</span>
</td>
</tr>
<tr>
<td>
<button ng-click="reset()">Reset</button>
</td>
<td>
<button ng-disabled="formulier.voornaam.$dirty &&
formulier.voornaam.$invalid || formulier.achternaam.$dirty &&
formulier.achternaam.$invalid || formulier.afdeling.$dirty &&
formulier.afdeling.$invalid || formulier.geboortedatum.$dirty &&
formulier.geboortedatumail.$invalid || formulier.telefoon.$dirty &&
formulier.telefoon.$invalid || formulier.inschrijvingsdatum.$dirty &&
formulier.inschrijvingsdatum.$invalid || formulier.mobiel.$dirty &&
formulier.mobiel.$invalid || formulier.email.$dirty &&
formulier.email.$invalid" ng-click="submit()">
Submit
</button>
</td>
</tr>
</table>
<div id="settingsholder" ng-controller="formulierController">
<input type="button" ng-click="showJson()" value="Object To JSON" />
<hr /> {{voornaam | json}} {{mobiel | json}}
</div>
</form>
</div>
<script>
$(function() {
$("#datepicker1, #datepicker2").datepicker();
});
</script>
</body>
</html>
I am creating an AngularJS form and after filling in the form to get the data in JSON format. To get JSON data from this form works but I can't get JSON of the complete form.
I tried to create a user object in the $scope variable by changing
$scope.reset = function () {
$scope.voornaam = "Mark";
$scope.achternaam = "Schuurman";
$scope.afdeling = "ICT";
$scope.geboortedatum = new Date("Jan, 01, 0000");
$scope.telefoon = +31412123456;
$scope.inschrijvingsdatum = new Date("Jan, 01, 0000");
$scope.mobiel = +31612345678;
$scope.email = "Mark#gmail.com";
}
in
$scope.reset = function () {
$scope.user.voornaam = "Mark";
$scope.user.achternaam = "Schuurman";
$scope.user.afdeling = "ICT";
$scope.user.geboortedatum = new Date("Jan, 01, 0000");
$scope.user.telefoon = +31412123456;
$scope.user.inschrijvingsdatum = new Date("Jan, 01, 0000");
$scope.user.mobiel = +31612345678;
$scope.user.email = "Mark#gmail.com";
}
and
<input type="button" ng-click="showJson()" value="Object To JSON" /><hr />
{{voornaam | json}}
</div>
in
<input type="button" ng-click="showJson()" value="Object To JSON" /> <hr />
{{user| json}}
</div>
For every input field, I changed the ng-model
<tr>
<td>Email: </td>
<td>
<input name="email" type="email" ng-model="email" length="100" required>
<span style="color:red" ng-show="formulier.email.$dirty && formulier.email.$invalid">
<span ng-show="formulier.email.$error.required">Email is verplicht.</span>
<span ng-show="formulier.email.$error.email">Ongeldig e-mailadres.</span>
</span>
</td>
</tr>
to
<tr>
<td>Email: </td>
<td>
<input name="email" type="email" ng-model="user.email" length="100" required>
<span style="color:red" ng-show="formulier.email.$dirty && formulier.email.$invalid">
<span ng-show="formulier.email.$error.required">Email is verplicht.</span>
<span ng-show="formulier.email.$error.email">Ongeldig e-mailadres.</span>
</span>
</td>
</tr>
But I receive the following error:
0x800a138f - JavaScript runtime error: Unable to get property voornaam of undefined or null reference.
How can I display the total content of the form in JSON format?
Please refer this jsfiddle link with all your fixed code :
You have to initialize $scope.user={} in your controller.
Fixed code:
var mainApp = angular.module("mainApp", []);
mainApp.controller('formulierController', function ($scope) {
var vm = this;
vm.reset = function () {
vm.voornaam = "Mark";
vm.achternaam = "Schuurman";
vm.afdeling = "ICT";
vm.geboortedatum = new Date("Jan, 01, 0000");
vm.telefoon = +31412123456;
vm.inschrijvingsdatum = new Date("Jan, 01, 0000");
vm.mobiel = +31612345678;
vm.email = "Mark#gmail.com";
}
vm.reset();
vm.showJson = function () {
vm.json = angular.toJson([
vm.voornaam,
vm.achternaam,
vm.afdeling,
vm.geboortedatum,
vm.telefoon,
vm.inschrijvingsdatum,
vm.mobiel,
vm.email
]);
}
});
<html>
<head>
<title>Angular JS Forms</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Formulier</h2>
<div ng-app="mainApp" ng-controller="formulierController as ctrl">
<form name="formulier" novalidate>
<table border="0">
<tr>
<td>Voornaam:</td>
<td>
<input name="voornaam" type="text" ng-model="ctrl.voornaam" required>
</td>
</tr>
<tr>
<td>Achternaam: </td>
<td>
<input name="achternaam" type="text" ng-model="ctrl.achternaam" required>
</td>
</tr>
<tr>
<td>Afdeling: </td>
<td>
<input name="afdeling" type="text" ng-model="ctrl.afdeling" required>
</td>
</tr>
<tr>
<td>Geboortedatum: </td>
<td>
<!--<input type="date" id="exampleInput" name="input" ng-model="example.value"
placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />-->
<input name="geboortedatum" type="date" id="datepicker1" ng-model="ctrl.geboortedatum" placeholder="dd-MM-yyyy" required>
</td>
</tr>
<tr>
<td>Telefoon: </td>
<td>
<input name="telefoon" type="tel" ng-model="ctrl.telefoon" required>
</td>
</tr>
<tr>
<td>Inschrijvingsdatum: </td>
<td>
<!--<input type="date" id="exampleInput" name="input" ng-model="example.value"
placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />-->
<input name="inschrijvingsdatum" type="date" id="datepicker2" ng-model="ctrl.inschrijvingsdatum" placeholder="dd-MM-yyyy" required>
</td>
</tr>
<tr>
<td>Mobiel: </td>
<td>
<input name="mobiel" type="tel" ng-model="ctrl.mobiel" required>
</td>
</tr>
<tr>
<td>Email: </td>
<td>
<input name="email" type="email" ng-model="email" length="100" required>
</td>
</tr>
<tr>
<td>
<button ng-click="reset()">Reset</button>
</td>
<td>
<button>
Submit
</button>
</td>
</tr>
</table>
<div id="settingsholder">
<input type="button" ng-click="ctrl.showJson()" value="Object To JSON" />
<hr />
{{ ctrl.json | json}}
</div>
</form>
</div>
<script>
$(function () {
$("#datepicker1").datepicker();
});
$(function () {
$("#datepicker2").datepicker();
});
</script>
</body>
</html>
Always use "Controller as" - this is recommended
I have a HTML code about 5 questions and a "send" button - a message will also show after clicking on it... I would like to add a second button (clear/reset) next to the first one so all previous answers and message would disappear - like a "take-the-test-again" button. How can I accomplish this? Thank you in advance for your answers :)
</head>
<body onload="gophrases()">
<div class="page">
<div class="title">
<h3>Subject</h3>
</div>
<div class="questions">
<table>
<tr>
<td id="num">01.</td>
<td id="quest">Request 1</td>
<td id="ans"><input type="radio" name="q1" onclick="enable('q2')">Yes <input type="radio" name="q1" onclick="enable('q2')">No</td>
</tr>
<tr>
<td id="num">02.</td>
<td id="quest">Request 2</td>
<td id="ans"><input type="radio" name="q2" onclick="enable('q3')">Yes <input type="radio" name="q2" onclick="enable('q3')">No</td>
</tr>
<tr>
<td id="num">03.</td>
<td id="quest">Request 3</td>
<td id="ans"><input type="radio" name="q3" onclick="enable('q4')">Yes <input type="radio" name="q3" onclick="enable('q4')">No</td>
</tr>
<tr>
<td id="num">04.</td>
<td id="quest">Request 4</td>
<td id="ans"><input type="radio" name="q4" onclick="enable('q5')">Yes <input type="radio" name="q4" onclick="enable('q5')">No</td>
</tr>
<tr>
<td id="num">05.</td>
<td id="quest">Request 5</td>
<td id="ans"><input type="radio" name="q5" onclick="enable('q6')">Yes <input type="radio" name="q5" onclick="enable('q6')">No</td>
</tr>
<tr>
</table>
</div>
<div class="submit">
<input type="button" value="Submit" onclick="check()" id="submitbutton">
</div>
<div class="result">
<p><span id="phrase"></span></p>
</div>
<div class="phrases">
<p><span id="score"></span></p>
</div>
</div>
<script type="text/javascript">
function check() {
var count = 0;
var qs = new Array();
qs[0] = document.getElementsByName("q1");
qs[1] = document.getElementsByName("q2");
qs[2] = document.getElementsByName("q3");
qs[3] = document.getElementsByName("q4");
qs[4] = document.getElementsByName("q5");
for(var i = 0 ; i < qs.length; i++) {
if (qs[i][0].checked) {
count++;
}
}
var phrase = "";
if(count < 1) {
phrase = "Bad";
} else if(count < 3) {
phrase = "Good";
} else if(count < 5) {
phrase = "Excellent";
}
document.getElementById("phrase").innerHTML = phrase;
}
function enable(name) {
var radio = document.getElementsByName(name);
if(!radio[0].checked || !radio[1].checked) {
radio[0].disabled = false;
radio[1].disabled = false;
}
}
function button() {
document.getElementById("submitbutton").disabled = false;
}
</script>
</body>
</html>
You can try this:
<button type="reset" value="Reset">Reset</button>
You must wrap the button into a form like this:
<form>
<button type="reset" value="Reset">Reset</button>
</form>
See more about it # w3schools - HTML Button type Attribute
Demonstration.