Clearing the form input fields - javascript

[![output image][1]][1]
I have made a webpage in which I am reading data from a JSON file and displaying it. I am also taking input from input fields and displaying it along with the previous data. But when I click on submit button, the input fields does not get cleared and still have the previous input data. I am resetting the fields but still it's not working.
Here is my code.
<!DOCTYPE html>
<html ng-app="Provider List">
<head>
<meta charset="utf-8">
<title>Provider's List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
</script>
<script type="text/javascript" src= "script/script.js"></script>
</head>
<body ng-controller="Controller">
<div class="container">
<div class="title">
<h1>Provider Directory</h1>
<h5>v2.0</h5>
</div>
<div class="tableDiv">
<div class="providerList">
<p>Provider List</p>
</div>
<table style="width: 100%;">
<thead>
<tr>
<th ng-click="sortData('last_name')">Last Name <div ng-class="getSortClass('last_name')"></div> </th>
<th ng-click="sortData('first_name')">First Name <div ng-class="getSortClass('first_name')"></div> </th>
<th ng-click="sortData('email_address')">Email <div ng-class="getSortClass('email_address')"></div> </th>
<th ng-click="sortData('specialty')">Specialty <div ng-class="getSortClass('specialty')"></div> </th>
<th ng-click="sortData('practice_name')">Practice Name <div ng-class="getSortClass('practice_name')"></div> </th>
<th ng-click="">Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="peoples in people | orderBy:sortColumn:reverseSort">
<td>{{peoples.last_name}}</td>
<td>{{peoples.first_name}}</td>
<td>{{peoples.email_address}}</td>
<td>{{peoples.specialty}}</td>
<td>{{peoples.practice_name}}</td>
<td><input type="button" value = "Delete" text = "Button" data-ng-click="removeRow($index)"/> </td>
</tr>
</tbody>
</table>
</div>
<div class="quickaddForm">
<form class="form-horizontal" role="form" ng-submit="addRow()">
<label>Create Provider</label>
<div class="form-group">
<label class="col-md-2 control-label">Last Name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="last_name"
ng-model="last_name" required />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="first_name"
ng-model="first_name"required/>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Email</label>
<div class="col-md-4">
<input type="text" class="form-control" name="email_address"
ng-model="email_address" required />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Specialty</label>
<div class="col-md-4">
<input type="text" class="form-control" name="specialty"
ng-model="specialty" required />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Practice</label>
<div class="col-md-4">
<input type="text" class="form-control" name="practice_name"
ng-model="practice_name" required/>
</div>
</div>
<div class="form-group">
<div style="padding-left:130px; padding-top:20px">
<input type="submit" value="Submit" class="btn"/>
</div>
</div>
</form>
</div>
</div>
And Here is JAVASCRIPT CODE:
var ProviderList = angular.module('Provider List', []);
ProviderList.controller('Controller', function ($scope, $http){
/*
Reading the data from JSON file
*/
$http.get('people.json').success(function(data) {
$scope.people = data.people;
$scope.sortColumn="LastName"
$scope.reverseSort = false;
/*
Sorting the selected column by clicking on the table heading
*/
$scope.sortData = function (column) {
$scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
$scope.sortColumn = column;
}
$scope.getSortClass = function (column) {
if ($scope.sortColumn == column) {
return $scope.reverseSort ? 'arrow-down' : 'arrow-up';
} return '';
}
/*
Adding the data in JSON format which was entered in the form fields
*/
$scope.addRow = function(){
$scope.people.push({ 'last_name':$scope.last_name,
'first_name': $scope.first_name,
'email_address':$scope.email_address,
'specialty' :$scope.specialty,
'practice_name': $scope.practice_name
});
/*
To clear the input fields once SUBMIT button is clicked.
*/
$scope.people.last_name=' ';
$scope.people.first_name=' ';
$scope.people.email_address='';
$scope.people.specialty='';
$scope.people.practice_name='';
};
/*
Removing the selected row by clicking the delete button.
*/
$scope.removeRow = function (idx) {
$scope.people.splice(idx, 1);
};
});
});

You are binding your inputs with $scope variables so the inputs will be always having the values in your controller, so you need to reset these values in your controller.
And here in your code you are clearing the wrong variables:
$scope.people.last_name=' ';
$scope.people.first_name=' ';
$scope.people.email_address='';
$scope.people.specialty='';
$scope.people.practice_name='';
You need to clear the binded variables without .people, because you are just clearing variables inside your people object here.
So that's what you need:
$scope.last_name='';
$scope.first_name='';
$scope.email_address='';
$scope.specialty='';
$scope.practice_name='';

First add a name for your form, say myForm (not a must if you are not using AngularJS's form validation).
<form name="myForm" class="form-horizontal" role="form" ng-submit="addRow()"></form>
Under the addRow() method in your Angular controller, manually reset all data model values and $setPristine().
$scope.addRow = function() {
// Your codes to submit the data to server
// ...
// Manual Reset
$scope.first_name = '';
$scope.last_name = '';
// Set Form Pristine (Not a must if you are not using AngularJS's form validation)
$scope.myForm.$setPristine();
}

Related

Fetching values from database and showing it in a form upon button click in Laravel

We have a table whose contents are fetched from database. Now, we want to fill a form by data of the relevant row of table that was clicked in Laravel.
This is how the table (left) and the form looks
Table code:
<table id="category_table" class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
#foreach($cat as $c)
<tr>
<?php $index=1;?>
<td>{{$c->cat_name}}</td>
<td width="5%"><button class="btn btn-info" onclick=fill(this)><i class="fa fa-arrow-right"></i></button>
</tr>
<?php $index=$index+1;?>
#endforeach
</tbody>
<tfoot>
</tfoot>
</table>
This is a part of form code:
<div class="card-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name" value="">
</div>
<div class="form-group">
<label for="short_name">Short Name</label>
<input type="text" class="form-control" id="short_name" placeholder="Short Name">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" placeholder="Description"></textarea>
</div>
This is the javascript part that fetched the selected table row value through which we need to fetch other values from the database into form:
<script type="text/javascript">
function fill(e)
{
var $item = $(e).closest("tr").find("td:first").text();
document.getElementById("name").value= $item;
}
}
</script>
You can do something like this:
<button class="btn btn-info" data-model='{{$c->toJson()}}' onclick="fill()">
// then in js something like
function fill() {
let $item = $(this).attr("data-model");
console.log($item); // item should have all the data
}
Edit:
The questioner didn't make use of Laravel Eloquent Models. That's why the solution, in this case, deals with normal php objects like so:
data-model='{{ json_encode($c)}}'

Search filter in angular js

I am trying to implement the search filter for the following application using angularjs. But it's not working as intended. I am new to this so I am not sure what I've done wrong here. Can someone help?
Here is my code so far:-
index.html file :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="Controller/app.js"></script>
<script src="Controller/storage.js"></script>
</head>
<body ng-app="kfgPm">
<div ng-controller="MainCtrl" class="container">
<form name="kfgPmForm" ng-submit="submitForm(kfgPmForm.$valid)" novalidate>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="projectID" class="col-sm-3 col-form-label">Project ID: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectID" required ng-model="itm.projectID">
</div>
</div>
<div class="form-group col-sm-6">
<label for="projectName" class="col-sm-3 col-form-label">Project Name: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectName" required ng-model="itm.projectName">
</div>
</div>
</div>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="projectOwner" class="col-sm-3 col-form-label">Project Owner: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectOwner" required ng-model="itm.projectOwner">
</div>
</div>
<div class="form-group col-sm-6">
<label for="keyStake" class="col-sm-3 col-form-label">Key Stakeholders: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="keyStake" required ng-model="itm.keyStake">
</div>
</div>
</div>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="prepBy" class="col-sm-3 col-form-label">Prepared By: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="prepBy" required ng-model="itm.prepBy">
</div>
</div>
<div class="form-group col-sm-6">
<label for="reqDate" class="col-sm-3 col-form-label">Requested Date: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="reqDate" required ng-model="itm.reqDate">
</div>
</div>
</div>
<div class="col-sm-12" class="form-group" ng-submit="submitDetails()" role="form">
<div class="form-group col-sm-6" class="input-group mb-3">
<label for="inputGroupSelect01" class="col-sm-3 col-form-label">Status: </label>
<div class="col-sm-9">
<select name="status" class="form-control custom-select" ng-options="user.option for user in arrlist" required ng-model="user.itm.status">
<option value="">Select..</option>
</select>
</select>
</div>
</div>
<div class="form-group col-sm-6">
<label for="dept" class="col-sm-3 col-form-label">Department: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dept" required ng-model="itm.dept">
</div>
</div>
</div>
<div class="col-sm-12" class="form-group purple-border">
<div class="col-sm-2">
<label for="projSummary">Project Summary: </label>
</div>
<div class="col-sm-10">
<textarea class="form-control" id="projSummary" required ng-model="itm.projSummary" rows="3"></textarea>
</div>
</div>
</form>
<div class="form-row text-center">
<div class="col-12">
<button ng-disabled="kfgPmForm.$invalid" ng-click="update(itm)" class="btn btn-info">SUBMIT</button>
<div><br></div>
</form>
<div><br></div>
<div class="col-sm-12" class="form-horizontal">
<label for="search" class="col-sm-3 col-form-label">Search: </label>
<div class="col-sm-6">
<input ng-model="searchText" class="form-control" ng-keyup="filterFunc()">
<div><br></div>
</div>
</div>
<div class="results">
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead class="thead-light">
<tr>
<th>Project ID</th>
<th>Project Name</th>
<th>Project Owner</th>
<th>Key Stakeholders</th>
<th>Prepared By</th>
<th>Requested Date</th>
<th>Status</th>
<th>Department</th>
<th>Project Summary</th>
<th>ACTIONS</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="itm in master | filter: itm.search">
<td><span ng-hide="editMode">{{itm.projectID}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectID" />
</td>
<td><span ng-hide="editMode">{{itm.projectName}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectName" />
</td>
<td><span ng-hide="editMode">{{itm.projectOwner}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectOwner" />
</td>
<td><span ng-hide="editMode">{{itm.keyStake}}</span>
<input type="text" ng-show="editMode" ng-model="itm.keyStake" />
</td>
<td><span ng-hide="editMode">{{itm.prepBy}}</span>
<input type="text" ng-show="editMode" ng-model="itm.prepBy" />
</td>
<td><span ng-hide="editMode">{{itm.reqDate}}</span>
<input type="text" ng-show="editMode" ng-model="itm.reqDate" />
</td>
<td><span ng-hide="editMode">{{itm.status.option}}</span>
<input type="text" ng-show="editMode" ng-model="itm.status" />
</td>
<td><span ng-hide="editMode">{{itm.dept}}</span>
<input type="text" ng-show="editMode" ng-model="itm.dept" />
</td>
<td><span ng-hide="editMode">{{itm.projSummary}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projSummary" />
</td>
<td>
<button ng-click="EditProject(itm)" class="btn btn-primary">Edit</button>
<button ng-hide="editMode" ng-click="removeItem($index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
</div>
</body>
</html>
This is my app.js file:
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
if (isHtml5Compatible) {
initiateLocalStorage();
}
function initiateLocalStorage() {
var app = angular.module('kfgPm', ['storageService']);
app.controller('MainCtrl', ['$scope', 'getLocalStorage', function($scope, getLocalStorage) {
$scope.EditProject = EditProject;
$scope.master = getLocalStorage.getData();
$scope.master = [];
$scope.update = function() {
var IsNew = true; //if the data entered in the field is new
angular.forEach($scope.master, function(LItem, key) {
if (LItem.projectID == $scope.itm.projectID) { //if the new project ID equals old project ID
IsNew = false; //data entered is to be edited
LItem.projectID = $scope.itm.projectID;
LItem.projectName = $scope.itm.projectName;
LItem.projectOwner = $scope.itm.projectOwner;
LItem.keyStake = $scope.itm.keyStake;
LItem.prepBy = $scope.itm.prepBy;
LItem.reqDate = $scope.itm.reqDate;
LItem.status = $scope.itm.status;
LItem.dept = $scope.itm.dept;
LItem.projSummary = $scope.itm.projSummary;
}
});
if (IsNew) { //if new data
$scope.master.push({ //add to the fields
'projectID': $scope.itm.projectID,
'projectName': $scope.itm.projectName,
'projectOwner': $scope.itm.projectOwner,
'keyStake': $scope.itm.keyStake,
'prepBy': $scope.itm.prepBy,
'reqDate': $scope.itm.reqDate,
'status': $scope.itm.status,
'dept': $scope.itm.dept,
'projSummary': $scope.itm.projSummary,
});
}
getLocalStorage.update($scope.master);
$scope.itm.projectID = '';
$scope.itm.projectName = '';
$scope.itm.projectOwner = '';
$scope.itm.keyStake = '';
$scope.itm.prepBy = '';
$scope.itm.reqDate = '';
$scope.itm.status = '';
$scope.itm.dept = '';
$scope.itm.projSummary = '';
},
$scope.removeItem = function(index) {
console.log(index);
$scope.master.splice(index, 1)
getLocalStorage.update($scope.master);
},
$scope.editItem = function(index) {
getLocalStorage.update($scope.master);
$scope.editing = $scope.master.indexOf(index);
}
function EditProject(pItem) { //if edit is clicked the data is replaced in respective fields
$scope.itm.projectID = pItem.projectID;
$scope.itm.projectName = pItem.projectName;
$scope.itm.projectOwner = pItem.projectOwner;
$scope.itm.keyStake = pItem.keyStake;
$scope.itm.prepBy = pItem.prepBy;
$scope.itm.reqDate = pItem.reqDate;
$scope.itm.status = pItem.status;
$scope.itm.dept = pItem.dept;
$scope.itm.projSummary = pItem.projSummary;
console.log(pItem);
}
$scope.arrlist = [{
"id": 1,
"option": "One"
}, {
"id": 2,
"option": "Two"
}];
$scope.userselected = $scope.arrlist[1];
$scope.LItem = angular.copy($scope.update);
$scope.filterFunc = function() {
$scope.LItem = $filter('filter')($scope.update, { $: $scope.searchText });
}
$scope.submitForm = function(isValid) {
if (isValid) {
alert('Submitted Successfully');
}
};
}]);
}
I am trying to implement the search for all columns such that when I type something in the search text field, it should return only the row with those searched terms and the rest of the rows would be hidden in the table.
To start, I see the following problems:
<body ng-app="kfgPm">
<div ng-controller="MainCtrl" class="container">
<form name="kfgPmForm" ng-submit="submitForm(kfgPmForm.$valid)" novalidate>
<!-- duplicate class attribute -->
<div class="col-sm-12" class="form-horizontal" role="form">
<!-- end tag seen too early -->
</div>
</div>
Duplicate class attribute -- the second one will be ignored
End tag seen too early - the scope of the controller will be limited
These two errors alone will cause the app to fail.
Also angular.js and bootstrap.js do not play well together. They do not co-ordinate their manipulation of the DOM.

show/hide dynamic error messages and prevent default

I've got a simple form to validate and I can't use jQuery validate().
I've made two error messages - one for a checkbox group and one for an email confirmation mismatch.
Here is the form
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>testForm</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container main">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 logo">
<p class="text-center">Use this form to request more information.</p>
<div class="well">
<form name="enrol" id="enrol" xmp-register class="form-horizontal">
<div class="form-group" id="checkboxGroup">
<div class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8">
<div class="checkbox">
<label>
<input type="checkbox" id="flexi" name="checkBoxes"> Yes, email me more information about Scheme 1</label>
</div>
</div>
<div class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8">
<div class="checkbox">
<label>
<input type="checkbox" id="kiwi" name="checkBoxes"> Yes, email me more information about Scheme 2</label>
</div>
</div>
<div class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8">
<div class="checkbox">
<label>
<input type="checkbox" id="protect" checkBoxes="protect"> Yes, email me more information about Scheme 3</label>
</div>
</div>
</div>
<div class="form-group">
<label for="firstName" class="col-md-3 col-lg-4 control-label"> First name </label>
<div class="col-md-8 col-lg-7">
<input type="text" name="firstName" maxlength="42" class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-md-3 col-lg-4 control-label"> Last name </label>
<div class="col-md-8 col-lg-7">
<input type="text" name="lastName" maxlength="42" class="form-control" required>
</div>
</div>
<div id="emailGroup">
<div class="form-group">
<label for="email" class="col-md-3 col-lg-4 control-label"> Email address </label>
<div class="col-md-8 col-lg-7">
<input type="email" id="email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="confirmEmail" class="col-md-3 col-lg-4 control-label"> Confirm email address </label>
<div class="col-md-8 col-lg-7">
<input type="email" id="confirmEmail" name="confirmEmail" class="form-control" required>
</div>
</div>
</div>
<div class="form-group">
<label for="contact-number" class="col-md-3 col-lg-4 control-label"> Contact number </label>
<div class="col-md-4">
<input type="text" name="contactNumber" class="form-control" pattern="\d+">
</div>
<div class="col-md-4 col-lg-3">
<select name="contactNumberType" class="form-control">
<option value="" disabled="disabled" selected="selected">Type</option>
<option value="mobile">Mobile</option>
<option value="business-hours">Business Hours</option>
<option value="after-hours">After Hours</option>
</select>
</div>
</div>
<div class="form-group">
<label for="memberNumber" class="col-md-3 col-lg-4 control-label" style="padding-top:0px;"> Member number
<br>(if you already have one)</label>
<div class="col-md-8 col-lg-7">
<input type="number" name="memberNumber" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-3 col-md-offset-1">
<input id="submitBtn" name="submitBtn" type="submit" value="Complete" class="form-control btn btn-primary">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--[if lte IE 7]>
<script src="https://raw.github.com/mattpowell/localstorageshim/master/localstorageshim.min.js" type="text/javascript"></script>
<![endif]-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- WM coding -->
<script src="so.js"></script>
</body>
</html>
and here is the JS
$(document).ready(function () {
// set flags to control error messages
var emailError = false;
var selectionError=false;
$("#submitBtn").click({
// validation checks performed on submit:
// 1. check that at least one checkbox is checked
emailError,selectionError // passing parameters to click function
}, function (event) {
var flexibox = document.getElementById("flexi");
var kiwibox = document.getElementById("kiwi");
var protectbox = document.getElementById("protect");
var mainEmail = document.getElementById("email").value;
var confirmEmail = document.getElementById("confirmEmail").value;
var noSelection = checkRequest(); // check if selection made
var emailMismatch = checkEmails(mainEmail, confirmEmail);
console.log(noSelection);
if (noSelection || emailMismatch) { // checks the first element of variable returned
event.preventDefault();
}
function checkRequest() {
if (protectbox.checked == false && (kiwibox.checked == false && flexibox.checked == false)) { //no option selected
if (selectionError === false) { // if no error message showing
$("#checkboxGroup").after( // add error message
'<div id="noSelect" class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8"><p style="color:red;">Please select at least one option.</p></div>'
);
selectionError = true; //update flag to avoid multiple error messages on repeated submit attempts
}
return selectionError; // exit
} else { // something is selected
$("#noSelect").remove(); // remove error message
selectionError=false; //reset flag
return selectionError; //exit
}
}
function checkEmails(mainEmail, confirmEmail) {
if (mainEmail != confirmEmail) { //2. email addresses don't match
if (emailError === false) { // if no error message showing
$("#emailGroup").after( // add error message
'<div id="emailMismatch" class="col-md-offset-3 col-lg-offset-4 col-md-8 col-lg-8"><p style=color:red;">Please ensure the email addresses match.</p></div>'
);
emailError = true; //update flag to avoid multiple error messages on repeated submit attempts
}
return true;
} else if (mainEmail == "" || confirmEmail == "") { // to stop email error message showing when the fields haven't been filled
return emailError;
} else {
return emailError;
}
}
});
});
// force Sarari to honour required attributes
jQuery.getScript('https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.7/minified/polyfiller.js')     .done(function () {         
webshims.polyfill('forms');          
});
The problem I'm having is that the checkbox group error message hides and shows each time a submit attempt is made - works OK, but the email mismatch error shows once and then can't be removed and the form won't submit, even when an email mismatch has been corrected.
When I inspect the page in Chrome and step through the code, I can see that the two variables for the email check, "mainEmail" and "confirmEmail" do match, but the following statements are skipped as if they do not match.
If anyone could give me some help with this I'd be really grateful. I'm sure that the code is unnecessarily lengthy - I'm pretty much a beginner.
Thanks and regards,
Malcolm
You're not unsetting the error message nor setting emailError to false . Change the else block of checkEmail to
else {
emailError = false;
$("emailMismatch").remove();
return emailError;
}

Real Time Calculation

I am working on a form where I want to dynamically show/update the value of an input[text] without getting the form submitted.
Take this as an example:
LEGEND:
price=$60 (fixed value)
8 Kilo = 1 Spin [For every 8 kilos it will equate to 1 spin. 9kilos=2Spins]
Amount = Spin*Price
As a user types 10 in 'kilo', the 'spin' value will be updated and 'amount' value will be automatically be computed. The computation should happen real-time while user types.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
https://stackoverflow.com/questions/ask#
<table class="table table-striped table-bordered table-hover " id="dataTables-example">
<tr>
<th>ID</th>
<th>SERVICE</th>
<th>KILO</th>
<th>SPINS</th>
<th>PRICE</th>
<th>AMOUNT</th>
</tr>
<tr>
<form id="new_transaction" method="post" class="form-horizontal" action="scripts/add_transaction.php">
<td>1</td>
<td>WASH</td>
<td>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="kilo" id="kilo1">
</div>
</div>
</td>
<td>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="spins" readonly>
</div>
</div>
</td>
<td>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="price" value="$60" readonly>
</div>
</div>
</td>
<td>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="amount"readonly>
</div>
</div>
</td>
</tr>
</form>
</table>
THE FORM
DESIRED OUTPUT
Add onchange="updateSpin()" and value="" to your kilo input, also add an id to your spins input and your amount input. Add a script to link jquery and then a script with your updateSpin function.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
function updateSpin(){
var kilo = $(this).val();
var spins = Math.ceil(kilo/8);
//update spins
$("#spinsID").val(spins);
//update amount
$("#amountID").val(spins);
}
</script>
Hope that might help.
EDIT** changing the floor function to ceil works also. Just a little simpler.

couldn't get my input value of inputbox via javascript

this is my more of my page body code, a table and a form tag,table use bootgrid plugin, although I have used modal-body class to select input tag,It didn't work.
<div id="listdata" style="overflow-y:scroll;">
<table id="grid" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="SN" data-type="numeric" data-order="asc" data-identifier="true">序号</th>
<th data-column-id="UserName" data-order="asc">姓名</th>
<th data-column-id="UserAccount">账号</th>
</tr>
</thead>
</table>
</div>
<form>
<div id="editmodal" class="modal hide">
<div class="modal-body">
<div class="form-horizontal form-container">
<div class="form-group">
<label for="UserName" class="col-sm-2 control-label">姓名:</label>
<div class="col-sm-10">
<input type="text" id="UserName" name="UserName" class="form-control" placeholder="姓名" value="" />
</div>
</div>
</div>
</div>
</div>
</form>
function saveData() {
//if (!validate()) return;
var items = $("form:first .modal-body input");
var json = [];
$(items).each(function (index, item) {
if (item.type == "text") {
json.push({ "name": item.id, "value": item.value });
} else if (item.type == "checkbox" || item.type == "radio") {
json.push({ "name": item.id, "value": item.checked ? "true" : "false" });
}
});
}
$(document).ready(function(){
var val1=$("#UserName").val();
alert(val1);
var val2=$("#UserAccount").val();
alert(val2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="form-group">
<label for="UserName" class="col-sm-2 control-label">姓名:</label>
<div class="col-sm-10">
<input type="text" id="UserName" name="UserName" class="form-control" placeholder="姓名" value="test" />
</div>
</div>
<div class="form-group">
<label for="UserAccount" class="col-sm-2 control-label">账户名:</label>
<div class="col-sm-10">
<input type="text" id="UserAccount" name="UserAccount" class="form-control" placeholder="账户名" value="test2" />
</div>
</div>
Working fine ...:)
Finally I find the answer, it was resulted from this line of code '', It was affected by the 'hide' class.
More over, I didn't use the bootbox plugin properly, the part named 'editmodal' should be write as a param when dialog was created like this bootbox.dialog({message: 'dialog html string'}) instead of writting it in body in advance. I'm sorry for not having described my question clearly, I'm very glad to share my result with those intered in bootgrid or bootbox open source plugin.

Categories