Trying to get Angular form data in JSON format - html

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

Related

Jquery input .val() returns undefined when one button triggers another button

I have multiple buttons that need to be activated at the same time. When each button is click from the input it returns what is type. The problem is I need all the buttons to be fire off at the same time. When I have a separate button fire off theses buttons though I get undefined and not the input.
$(document).on("click", "#devSaveBtn", function () {
if (
$("#primaryBtn").trigger("click") &&
$("#secondaryBtn").trigger("click") &&
$("#thirdBtn").trigger("click")
) {
var getInput = $(this)
.closest("td")
.find("input[name='Object Name']")
.val();
console.log("Input = " + getInput);
var getInput2 = $(this)
.closest("td")
.find("input[name='Project Name']")
.val();
console.log("Input2 = " + getInput2);
var getInput3 = $(this)
.closest("td")
.find("input[name='Description']")
.val();
console.log("Input3 = " + getInput3);
} else {
console.log("This is not working");
}
});
<button type="button" input type="submit" id="devSaveBtn" class="devbutton devinithidden readonlyhidden" title="Reset Changes" style="visibility: visible; background-color: #f4d8b4;"><i class="fa fa-save"></i>
Save</button>
<td class="noncomponentswidth" id="recordObjName">
<p>
<input type="text" id="OBJ_NAME" name="Object Name" placeholder="" required minlength="8">
<button id="primaryBtn">Primary</button>
</p>
<button style="display: none;">Submit</button>
</td>
<td class="noncomponentswidth" id="recordProjectName">
<input type="text" id="DEPLOYER_PROJECT" name="Project Name" placeholder="">
<button id="secondaryBtn">Secondary</button>
</td>
<td class="noncomponentswidth" id="recordDeployerCandidate" placeholder="">
<input type="text" id="DESCRIPTION" name="Description" placeholder="" style="resize: vertical; width: 40em; height: 85px;">
<button id="thirdBtn">Third</button>
</td>
$(document).on("click", "#devSaveBtn", function () {
var getInput = $("input");
for (var i = 0; i < getInput.length; i++)
console.log(getInput[i].id, " => Input", i, " = ", getInput[i].value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js" integrity="sha512-CX7sDOp7UTAq+i1FYIlf9Uo27x4os+kGeoT7rgwvY+4dmjqV0IuE/Bl5hVsjnQPQiTOhAX1O2r2j5bjsFBvv/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button type="button" input type="submit" id="devSaveBtn" class="devbutton devinithidden readonlyhidden" title="Reset Changes" style="visibility: visible; background-color: #f4d8b4;"><i class="fa fa-save"></i>
Save</button>
<td class="noncomponentswidth" id="recordObjName">
<p>
<input type="text" id="OBJ_NAME" name="Object Name" placeholder="" required minlength="8">
</p>
</td>
<td class="noncomponentswidth" id="recordProjectName">
<input type="text" id="DEPLOYER_PROJECT" name="Project Name" placeholder="">
</td>
<td class="noncomponentswidth" id="recordDeployerCandidate" placeholder="">
<input type="text" id="DESCRIPTION" name="Description" placeholder="" style="resize: vertical; width: 40em; height: 85px;">
</td>

Change input format in dynamic table: dropdown, number, date

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.

How to activate required on input depending on choosen value in other input field with jquery/ajax?

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>

html button not working

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>

How can I put a clean/reset button to this simple HTML code?

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.