Develop Reference

validate loaded weight empty weight form

I have a weight data form and i want to make a validation on it where net weight = loaded weight - empty weight, if not the form not submit
<fieldset class="form-group">
<legend class="h5 text-center text-danger">empty weight</legend>
<div class="form-group">
<label for="text">empty weight</label>
<input type="number" class="form-control form-control-lg" id="empty_weight"
name="empty_weight" min="15000" max="35000" step="20" oncopy="return false"
onpaste="return false">
</div>
</fieldset>
<fieldset>
<legend class="h5 text-center text-danger">loaded weight</legend>
<div class="form-group">
<label for="text">loaded weight</label>
<input type="number" class="form-control form-control-lg" id="loaded_weight"
name="loaded_weight" min="35000" max="120000" maxlength="6" step="20"
oncopy="return false" onpaste="return false">
</div>
</fieldset>
<fieldset>
<legend class="h5 text-center text-danger">net weight</legend>
<div class="form-group">
<label for="text">net weight</label>
<input type="number" class="form-control form-control-lg font-weight-bolder" id="net_weight"
name="net_weight" maxlength="5" step="20" oncopy="return false"
onpaste="return false">
</div>
</fieldset>
<div class="modal-footer">
<button type="submit" class="btn btn-success ui-button">تاكيد</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">اغلاق</button>
</div>
</form>

Use a function for multiple events in JavaScript?

I have several divs tag, each with a button inside. Clicking on each button will show a hidden div tag.
<div class="box-form">
<label class="control-label">name : </label>
<span class="text text-info txt_modelname">#Model.Name</span>
<button class="btn btn-primary btn-sm edit__field">edit</button><br />
<div class="box-edit-name" style="display:none;">
<form id="Frm_EditName" class="frm" method="post">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control input-name" />
<input type="submit" value="save" class="btn btn-success js-btn_submitname mt-1" disabled />
</div>
</form>
</div>
</div>
<div class="box-form">
<label class="control-label">family : </label>
<span class="text text-info txt_modelname">#Model.family</span>
<button class="btn btn-primary btn-sm edit__field">edit</button><br />
<div class="box-edit-name" style="display:none;">
<form id="Frm_EditName" class="frm" method="post">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control input-name" />
<input type="submit" value="save" class="btn btn-success js-btn_submitname mt-1" disabled />
</div>
</form>
</div>
</div>
I want to create a function that displays every button on this div below it
Btn_editName.click(function () {
$('.box-edit-name').toggle();
});

You could select the corresponding div via:
$("button.btn.btn-primary.btn-sm.edit__field").click(function(){
$(this).next().next().toggle()
})
You use two .next() calls because the div comes after a <br />
$("button.btn.btn-primary.btn-sm.edit__field").click(function() {
$(this).next().next().toggle()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-form">
<label class="control-label">name : </label>
<span class="text text-info txt_modelname">#Model.Name</span>
<button class="btn btn-primary btn-sm edit__field">edit</button><br />
<div class="box-edit-name" style="display:none;">
<form id="Frm_EditName" class="frm" method="post">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control input-name" />
<input type="submit" value="save" class="btn btn-success js-btn_submitname mt-1" disabled />
</div>
</form>
</div>
</div>
<div class="box-form">
<label class="control-label">family : </label>
<span class="text text-info txt_modelname">#Model.family</span>
<button class="btn btn-primary btn-sm edit__field">edit</button><br />
<div class="box-edit-name" style="display:none;">
<form id="Frm_EditName" class="frm" method="post">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control input-name" />
<input type="submit" value="save" class="btn btn-success js-btn_submitname mt-1" disabled />
</div>
</form>
</div>
</div>

how to create function reset button in javascript?

i would ask about clear input,i don't know how to clear input work with jquery/javascript.
so here my code:
<div class="form-inline" id="clear">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name" />
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<button class="btn btn-primary black">clear</button>
<button class="btn btn-warning" id="btn-search">Search</button>
</div>
how to create function reset button in javascript?

Use reset() method to clear form
index.php
<form id="frmTest" name="frmTest">
<div class="form-inline" id="clear">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name" />
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<button class="btn btn-primary black" onClick="clearForm(event);">clear</button>
<button class="btn btn-warning" id="btn-search">Search</button>
</div>
</form>
<script>
function clearForm(e) {
e.preventDefault();
document.getElementById("frmTest").reset();
}
</script>

you can use this code
first you need to use form tag and close form tag. then you can use rest function to clear all form data
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="FormData" name="FormData" action="" method="post">
<div class="form-inline" id="clear">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name"/>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<button class="btn btn-primary black" onclick="clearFormData(event);">clear</button>
<button class="btn btn-warning" id="btn-search">Search</button>
</div>
</form>
<script>
function clearFormData(e) {
e.preventDefault();
$("#FormData")[0].reset()
}
</script>

AngularJS form refuses to validate on submission

My angular form refuses to validate on submit. I have multiple other forms set up similarly that work completely fine. It prevents submission if invalid, however, it does not show any error messages at all.
<div class="card card-block signup-card">
<h1>Sign Up</h1>
<form role="form" name="signupForm" ng-submit="signupForm.$valid && uploadPic(picFile)" novalidate>
<div class="form-group text-center">
<span ng-show="imageError" style="color: #c0392b; padding-bottom: 1em; font-weight: bold;">Please choose a profile picture</span>
<div class="profile-image">
<div class="profile-preview">
<img ng-show="signupForm.file.$valid" ngf-src="picFile" class="thumb">
<button ng-click="picFile = null" ng-show="picFile">Remove</button>
</div>
<input type="file" id="file" ngf-select ng-model="picFile" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFiles" style="display:none;">
<label for="file" class="btn btn-green btn-md">Upload Picture</label>
</div>
</div>
<div class="form-group">
<label for="email">Email ending in .edu</label>
<input type="email" class="form-control" edu-email-validate ng-model="user.email" id="email" placeholder="Email must end in .edu" required="">
</div>
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" ng-model="user.firstName" placeholder="First Name" name="firstname" required="">
<span ng-show="signupForm.firstname.$error.required"></span>
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" ng-model="user.lastName" placeholder="Last Name" name="lastname" required>
<span ng-show="signupForm.lastname.$error.required"></span>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" ng-model="user.username" placeholder="Username" name="username" required>
<span ng-show="signupForm.username.$error.required"></span>
</div>
<div class="form-group">
<label for="gradclass">Graduation Year</label>
<input type="number" class="form-control" min="2016" max="2024" integer id="gradclass" ng-model="user.gradClass" placeholder="Graduation Year" required>
<span ng-show="signupForm.user.gradClass.$error.integer">Not a valid graduation year!</span>
<span ng-show="signupForm.user.gradClass.$error.min || signupForm.size.$error.max"></span>
</div>
<div class="form-group">
<label for="school">School</label>
<select class="form-control" id="school" ng-model="user.schoolId" name="school" required>
<option disabled selected="selected" value="0">Choose School</option>
<option value="1">Champlain College</option>
<option value="2">UVM</option>
</select>
<span ng-show="signupForm.school.$error.required">Please select a school</span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" ng-model="user.password" equals="{{ user.passwordCheck }}" ng-minlength= "6" placeholder="Password" name="password" required>
<span ng-show="signupForm.password.$error.required"></span>
</div>
<div class="form-group">
<label for="password-2">Password Again</label>
<input type="password" class="form-control" id="password-2" ng-model="user.passwordCheck" equals=" {{ user.password }}" ng-minlength = "6"placeholder="Password Again" name="password2" required>
<span ng-show="signupForm.password2.$error.required"></span>
</div>
<div class="login-bottom-container">
<input type="submit" class="btn btn-green btn-lg" value="Sign up" ng-click="submitted = true">
<div class="right">
<a ui-sref="terms" style="margin-top: 1em; display: block;">By signing up you agree to the terms and conditions of BlackMarket University</a>
</div>
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%; background-color: #2980b9; color: #FFF; padding: 1em .5em;font-weight: 500; border-radius: 50%;" ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">Error making account.</span>
</div>
</form>
</div>
Any help is greatly appreciated.
Edit
This is code that is working:
<link href="css/profile.css" rel="stylesheet">
<div class="row" style="padding-top: 1em;padding-bottom: 1em;">
<div class="col-md-8 col col-xs-12">
<div class="buffer">
<div class="profile-picture" style="background-image:url({{ addRoute(currentUser.profile_picture) }}); background-size:cover;">
</div>
<div class="profile-container">
<h2 class="name-highlight">Hi, {{currentUser.firstName}} {{currentUser.lastname}}</h3>
<h4 class="name-highlight">{{ currentUser.school }} class of {{currentUser.grad_class}}</h4>
</div>
</div>
<div class="col-md-6 col-xs-12">
<h2>Update your profile</h2>
<form role="form" name="profileForm" ng-submit="profileForm.$valid && updateUser()" novalidate>
<label for="username">Username</label>
<input type="text" value="{{currentUser.username}}" name = "username" ng-model="currentUser.username" placeholder="Username" id="username" class="item-input-profile form-control" required="">
<div ng-show="profileForm.$submitted || profileForm.username.$touched">
<span ng-show="profileForm.username.$error.required" style="color: red;">Please put a username!</span>
</div>
<label for="email">Email</label>
<input type="email" value="{{ currentUser.email }}" name="email" ng-model="currentUser.email" placeholder="Email" id="email" class="item-input-profile form-control" required="">
<div ng-show="profileForm.$submitted || profileForm.email.$touched">
<span ng-show="profileForm.email.$error.required" style="color: red;">Please put an email!</span>
</div>
<label for="bio">Bio</label>
<textarea type="textarea" role="textarea" name="bio" ng-model="currentUser.bio" id="bio" class="item-input-profile form-control" placeholder="Bio"></textarea>
<input type="submit" class="btn btn-green btn-lg" value="Update Profile">
</form>
</div>
<div class="col-md-6 col-xs-12">
<h2>Update your password</h2>
<form role="form" name="passwordForm" ng-submit="passwordForm.$valid && updatePasswords()" novalidate>
<label for="oldpassword">Your old password</label>
<input type="password" placeholder="Old Password" ng-model="updatePassword.oldpassword" id="oldpassword" name="oldpassword" ng-minlength= "6" class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.oldpassword.$touched">
<span ng-show="passwordForm.oldpassword.$error.required" style="color: red;">Please put in your old password</span>
</div>
<label for="newpassword">Your new password</label>
<input type="password" placeholder="New Password" ng-model="updatePassword.newpassword" id="newpassword" ng-minlength= "6" name="newpassword" equals="{{ currentUser.passwordagain }}"class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.newpassword.$touched">
<span ng-show="passwordForm.newpassword.$error.required" style="color: red;">Please put in your new password</span>
</div>
<label for="passwordagain">Your new password again</label>
<input type="password" placeholder="New Password Again" ng-model="updatePassword.passwordagain" id="passwordagain" ng-minlength= "6" name="passwordagain" equals="{{ currentUser.newpassword }}" class="item-input-profile form-control" required>
<div ng-show="passwordForm.$submitted || passwordForm.passwordagain.$touched">
<span ng-show="passwordForm.passwordagain.$error.required" style="color: red;">Please put in your new password again</span>
</div>
<input type="submit" class="btn btn-green btn-lg" value="Change Password">
</form>
</div>
</div>
<div class="col-md-4 col-xs-12">
<h2 class="gray-header text-center" ng-if="!hasPosts">No posts to show</h2>
<div class="post-card profile-post" ng-repeat="post in currentUser.posts.posts">
<div class="item-slider">
<uib-carousel interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="image in post.images" active="slide.active" index="slide.id">
<img ng-src="{{addRoute(image.path)}}" style="margin:auto;">
</uib-slide>
</uib-carousel>
</div>
<div class="profile-image" style="background-image:url( {{ addRoute(post.profile_picture) }} ); background-size: cover;"></div>
<div class="post-content">
<div class="top-info">
<span><div class="glyphicon glyphicon-user"> </div></span><span class="post-username">{{ post.firstname}} {{ post.lastname }}</span>
<br>
<span><div class="glyphicon glyphicon-tag"> </div></span><span class="post-username">{{ post.category}}</span>
</div>
<div class="wrap">
<h1 class="post-title">{{post.title}} - <span class="price">{{post.price}}</span></h1>
<p class="description">
{{post.content}}
</p>
</div>
<button type="button" class="btn btn-danger btn-lg btn-block" ng-click="deletePost(post.id)">Delete Post</button>
</div>
</div>
</div>
</div>

Updated answer
NOTE: Angular validation works on name attribute
<!DOCTYPE html>
<html lang="en-US" ng-app="">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body>
<div class="card card-block signup-card">
<h1>Sign Up</h1>
<form role="form" name="signupForm" novalidate>
<!-- <div class="form-group text-center">
<span ng-show="imageError" style="color: #c0392b; padding-bottom: 1em; font-weight: bold;">Please choose a profile picture</span>
<div class="profile-image">
<div class="profile-preview">
<img ng-show="signupForm.file.$valid" ngf-src="picFile" class="thumb">
<button ng-click="picFile = null" ng-show="picFile">Remove</button>
</div>
<input type="file" id="file" ngf-select ng-model="picFile" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFiles" style="display:none;">
<label for="file" class="btn btn-green btn-md">Upload Picture</label>
</div>
</div> -->
<div class="form-group" ng-class="{ 'has-error' : signupForm.email.$invalid && !signupForm.email.$pristine }">
<label for="email">Email ending in .edu</label>
<input type="email" class="form-control" edu-email-validate ng-model="user.email" id="email" placeholder="Email must end in .edu" name="email" required>
<div ng-show="signupForm.email.$touched">
<span ng-show="signupForm.email.$error.required" style="color: red;">email id not proper</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.firstname.$invalid && !signupForm.firstname.$pristine }">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" ng-model="user.firstName" placeholder="First Name" name="firstname" required>
<div ng-show="signupForm.firstname.$touched">
<span ng-show="signupForm.firstname.$error.required" style="color: red;" ng-cloak>Please enter first name</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.lastname.$invalid && !signupForm.lastname.$pristine }">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" ng-model="user.lastName" placeholder="Last Name" name="lastname" required>
<div ng-show="signupForm.lastname.$touched">
<span ng-show="signupForm.lastname.$error.required" style="color: red;">last name required</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.username.$invalid && !signupForm.username.$pristine }">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" ng-model="user.username" placeholder="Username" name="username" required>
<div ng-show="signupForm.username.$touched">
<span ng-show="signupForm.username.$error.required" style="color: red;">username required</span>
</div>
</div>
<div class="form-group">
<label for="gradclass">Graduation Year</label>
<input type="number" class="form-control" min="2016" max="2024" id="gradclass" name="gradclass" ng-model="user.gradClass" placeholder="Graduation Year" required>
<div ng-show="signupForm.school.$touched">
<span ng-show="signupForm.gradclass.$error.required" style="color: red;">Graduaton date required</span>
<span ng-show="signupForm.gradclass.$error.number" style="color: red;">Not valid number!</span>
<span ng-show="!signupForm.gradclass.$valid" style="color: red;">Graduation year between 2016 to 2024</span>
</div>
</div>
<div class="form-group">
<label for="school">School</label>
<select class="form-control" id="school" ng-model="user.schoolId" name="school" required>
<option disabled selected="selected" value="0">Choose School</option>
<option value="1">Champlain College</option>
<option value="2">UVM</option>
</select>
<div ng-show="signupForm.school.$touched">
<span ng-show="signupForm.school.$error.required" style="color: red;">please select a school</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.password.$invalid && !signupForm.password.$pristine }">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" ng-model="user.password" equals="{{ user.passwordCheck }}" ng-minlength= "6" placeholder="Password" name="password" required>
<div ng-show="signupForm.password.$touched">
<span ng-show="signupForm.password.$error.required" style="color: red;">password required</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : signupForm.password2.$invalid && !signupForm.password2.$pristine }">
<label for="password-2">Password Again</label>
<input type="password" class="form-control" id="password-2" ng-model="user.passwordCheck" equals=" {{ user.password }}" ng-minlength = "6" placeholder="Password Again" name="password2" required>
<div ng-show="signupForm.password2.$touched">
<span ng-show="signupForm.password2.$error.required" style="color: red;">confirmation required</span>
</div>
</div>
<div class="login-bottom-container">
<input type="submit" class="btn btn-green btn-lg" value="Sign up" ng-disabled="signupForm.$invalid" ng-click="submitted = true">
<!-- <button class="btn btn-green btn-lg" ng-disabled="signupForm.$invalid" ng-click="Sign up()">Sign up</button>-->
<div class="right">
<a ui-sref="terms" style="margin-top: 1em; display: block;">By signing up you agree to the terms and conditions of BlackMarket University</a>
</div>
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%; background-color: #2980b9; color: #FFF; padding: 1em .5em;font-weight: 500; border-radius: 50%;" ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">Error making account.</span>
</div>
</form>
</div>
</body>
</html>

Angular validations work on the name attribute so try adding name instead of id to the input elements inside your form

Bootstrap 3 modal wont remove when I click close

I am trying to remove the ajax requested model when I user either hits close or cancel. I have tried the following.
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
full code
<div id="registerModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">Sign Up</h1>
</div>
<div class="modal-body">
<form name="register" id="register" action="login" method="post" class="col-md-12 center-block">
<div class="row">
<div class="col-md-6">
<h4 class="text-center">Business Info</h4>
<div class="form-group">
<input type="text" name="businessname" class="form-control input-lg login" placeholder="Business Name">
</div>
<div class="form-group">
<input type="text" name="abnacn" class="form-control input-lg login" placeholder="ABN or ACN" >
</div>
<div class="form-group">
<input type="phone" name="phonenumber" class="form-control input-lg login" placeholder="Main Phone Number" >
</div>
<div class="form-group">
<input type="email" name="busiussemail" class="form-control input-lg login" placeholder="Main Email Address" >
</div>
<div class="form-group">
<input type="checkbox" name="TOS" >
<br>By registering and ticking this box for My Staff, you are agreeing to our TOS and Privacy Policy.
</div>
<!--<div class="form-group">
<select name="buildingtype" class="form-control select-lg">
<option value="0">--- none ---</option>
<option value="1">Unit</option>
<option value="2">Floor</option>
</select>
</div>
<div class="form-group">
<input type="unitnumber" name="number" class="form-control input-lg login" placeholder="Unit / Floow Number">
<input type="streetno" name="number" class="form-control input-lg login" placeholder="street number">
</div>
<div class="form-group">
<input type="text" name="streetname" class="form-control input-lg login" placeholder="Street Name">
</div>
<div class="form-group">
<input type="number" name="postcode" class="form-control input-lg login" onkeyup="getLocation()" placeholder="postcode">
</div>
<div class="form-group">
<input type="text" name="postcode" class="form-control input-lg login" placeholder="state" readonly>
</div>
<div class="form-group">
<input type="text" name="postcode" class="form-control input-lg login" placeholder="Country" readonly>
</div>-->
</div>
<div class="col-md-6">
<h4 class="text-center">User login set up</h4>
<div class="form-group">
<input type="text" name="emailadress" class="form-control input-lg login" placeholder="Admin staff Email Address">
</div>
<div class="form-group">
<input type="password" name="password" class="form-control input-lg login" placeholder="Password">
</div>
<div class="form-group">
<input type="text" name="passwordtwo" class="form-control input-lg login" placeholder="Password Repeat">
</div>
<div class="form-group">
<input type="text" name="firstname" class="form-control input-lg login" placeholder="First Name">
</div>
<div class="form-group">
<input type="text" name="sirname" class="form-control input-lg login" placeholder="Last Name">
</div>
<div class="form-group">
</div>
</div>
<button typpe="submit" onclick="signupmore();" class="btn btn-success col-md-12 btn-lg btn-block">Register</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You're manually adding the class 'show' to the modal.
If you remove that, then open the modal in JS you can close it.
http://www.bootply.com/EMWW2UWBtr
$('#registerModal').modal('show');
<div id="registerModal" class="modal" tabindex="-1" role="dialog" aria-hidden="true">