We Keep Coding

Validate radio button a multistep form using Javascript

I want to validate a multipage form using Js. Here is what I want the code to be, when I click 'next' i want it to validate whether the radio button has been checked or not. If not then display an alert popup. The multipage form already works but the problem here is I cannot validate the radio button on each page.
Hope anyone can help me solve this problem since I have been few days trying to solve this problem but I don't know how to do it. Thank you in advance.
HTML
<form class="form" action="" method="post">
<!-- Progress bar -->
<div class="progressbar">
<div class="progress" id="progress"></div>
<div class="progress-step progress-step-active" data-title="DEPARTMENT"></div>
<div class="progress-step" data-title="BLOCK"></div>
<div class="progress-step" data-title="TITLE"></div>
<div class="progress-step" data-title="DESCRIPTION"></div>
<div class="progress-step" data-title="DONE"></div>
</div>
<!-- start Steps 1-->
<div class="form-step form-step-active">
<br/>
<div class="page-header">
<h1>First, choose one department that is related to the complaint you are about to make.
<span style="color:#ffef96; font-size:15px;"><br/>
<p>Click any department for hint</p>
</span>
</h1>
<br/>
<div class="radio-toolbar">
<input type="radio" id="radio1" name="cdepartment" class="hint" value="GENERAL" required/>
<label for="radio1">GENERAL
<span class="hintclick"> e-Aduan UiTM used for
<span style="color:#ffef96">general complaints about UiTM.</span>
</span>
</label>
<input type="radio" id="radio2" name="cdepartment" class="hint" value="FACILITIES"/>
<label for="radio2">FACILITIES
<span class="hintclick">For
<span style="color:#ffef96">electrical, mechanical, telecommunications, event management.</span>
</span>
</label>
<input type="radio" id="radio3" name="cdepartment" class="hint" value="ICT"/>
<label for="radio3">ICT
<span class="hintclick">e-Aduan ICT used for
<span style="color:#ffef96">ICT complaints </span>
</label>
</div>
<br/>
</div><!-- page header-->
<div class="width-50 ml-auto" >
NEXT
</div>
</div>
<!-- end Steps 1 -->
<!-- start Steps 2 -->
<div class="form-step">
<br/>
<div class="page-header">
<h1>Second, which block do you wish to complaint about?</h1>
<br/>
<div class="radio-toolbar">
<div class="grid-container">
<?php
$count=4;
$sql="SELECT * FROM `block`";
$result=mysqli_query($connection,$sql);
while($std=mysqli_fetch_array($result))
{
?>
<input type="radio" id="<?php echo $std['bid'];?>" name="cblock" value="<?php echo $std['blockname'];?>" required/>
<label for="<?php echo $std['bid'];?>"><?php echo $std['blockname'];?></label>
<br/>
<?php }?>
</div>
</div>
</div> <!-- page header-->
<div class="btns-group width-50 ml-auto">
PREVIOUS
NEXT
</div>
</div>
<!-- end Steps 2 -->
<!-- start Steps 3 -->
<div class="form-step">
<br/>
<div class="page-header">
<h1>Third, pick a title or topic
<span style="color:#ffef96; font-size:15px;"><br/>
<p>If your related toppic is not listed, please fill in below text box instead.</p>
</span>
</h1>
<br/>
<div class="radio-toolbar">
<input type="radio" id="radioApple" name="radioFruit" value="apple" required/>
<label for="radioApple">Apple</label>
<input type="radio" id="radioBanana" name="radioFruit" value="banana"/>
<label for="radioBanana">Banana</label>
<input type="radio" id="radioOrange" name="radioFruit" value="orange"/>
<label for="radioOrange">Orange</label>
</div>
<div class="input-group">
<textarea type="text" class="form-control" row="5" name="cdescription" placeholder="Write here.." required/></textarea>
</div>
<br/>
</div>
<div class="btns-group width-50 ml-auto">
PREVIOUS
NEXT
</div>
</div>
<!-- end Steps 3 -->
<!-- start Steps 4 -->
<div class="form-step">
<div class="page-header">
<h1>Lastly, state your description regarding the complaint made
<span style="color:#ffef96; font-size:15px;"><br/>
<p> Below box you can write any notes about the complaint so the staff can help to understand</p>
</span>
</h1>
<br/>
<div class="input-group">
<textarea type="text" class="form-control" row="5" name="cdescription" placeholder="Write here.." required/></textarea>
</div>
</div>
<div class="btns-group width-50 ml-auto">
PREVIOUS
<button class="btn" type="submit" name="submit">SUBMIT</button>
</div>
</div>
<!-- end Steps 4 -->
<!-- start Steps 5 -->
<div class="form-step">
<div class="page-header">
<h1>THANK YOU <br/>
YOU CAN SEE RECENT COMPLAINT ON YOUR HOMEPAGE
</h1>
</div>
<!-- end Steps 5 -->
</form>
CSS
:root {
--primary-color: rgb(165, 121, 64);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.width-50 {
width: 30%;
}
.ml-auto {
margin-left: auto;
}
/* Progressbar */
.progressbar {
position: relative;
display: flex;
justify-content: space-between;
counter-reset: step;
margin: 2rem 4rem;
}
.progressbar::before,
.progress {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 4px;
width: 100%;
background-color: #dcdcdc;
z-index: -1;
}
.progress {
background-color: var(--primary-color);
width: 0%;
transition: 0.3s;
}
.progress-step {
width: 2.1875rem;
height: 2.1875rem;
background-color: #dcdcdc;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.progress-step::before {
counter-increment: step;
content: counter(step);
}
.progress-step::after {
content: attr(data-title);
position: absolute;
top: calc(100% + 0.5rem);
font-size: 0.85rem;
color: #666;
}
.progress-step-active {
background-color: var(--primary-color);
color: #f3f3f3;
}
/* Form */
.form {
width: 80%;
margin: 30px auto;
border: 1px solid #ccc;
border-radius: 0.35rem;
padding: 1.5rem;
box-shadow:
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.form-step {
display: none;
transform-origin: top;
animation: animate 0.5s;
}
.form-step-active {
display: block;
}
.input-group {
margin: 2rem 0;
}
#keyframes animate {
from {
transform: scale(1, 0);
opacity: 0;
}
to {
transform: scale(1, 1);
opacity: 1;
}
}
.row{
height:100%;
width: 50px;
}
/* Button */
.btns-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.btn {
padding: 16px;
display: block;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.2);
color: #f3f3f3;
text-align: center;
border-radius: 0.25rem;
cursor: pointer;
transition: 0.3s;
border-radius: 15px 25px;
box-shadow: 5px 8px 10px #888888;
}
.btn:hover {
box-shadow: 0 0 0 2px #fff, 0 0 0 3px ;
color: #f3f3f3;
}
/* end progress bar*/
.radio-toolbar {
margin-left: 10px;
text-align: center;
}
.radio-toolbar input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.radio-toolbar label {
display: inline-block;
background-color: #f0efef;
padding: 10px;
font-size: 18px;
border: 3px solid #444;
border-radius: 4px;
width: 300px;
height:auto;
}
.radio-toolbar label:hover {
background-color: #c2d4dd;
cursor: pointer;
}
.radio-toolbar input[type="radio"]:focus + label {
border: 2px dashed #f0efef;
}
.radio-toolbar input[type="radio"]:checked + label {
background-color:#a57940;
border-color: #c2d4dd;
}
/* end radio button*/
.hint, label .hintclick {
display: none;
opacity: 0;
}
.hint:checked+ label .hintclick {
display: block;
opacity: 1;
font-size: 17px;
color: white;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto ;
}
.grid-container > label {
width: 100%;
}
JS
const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");
let formStepsNum = 0;
nextBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum++;
updateFormSteps();
updateProgressbar();
});
});
prevBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum--;
updateFormSteps();
updateProgressbar();
});
});
function updateFormSteps() {
formSteps.forEach((formStep) => {
formStep.classList.contains("form-step-active") &&
formStep.classList.remove("form-step-active");
});
formSteps[formStepsNum].classList.add("form-step-active");
}
function updateProgressbar() {
progressSteps.forEach((progressStep, idx) => {
if (idx < formStepsNum + 1) {
progressStep.classList.add("progress-step-active");
} else {
progressStep.classList.remove("progress-step-active");
}
});
const progressActive = document.querySelectorAll(".progress-step-active");
progress.style.width =
((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
}

How to Change the Color of the Progress Bar with Conditions

I am having a problem with changing or update background color in -webkit-progress-value with the condition.
I'm trying to use :
document.querySelectorAll('progress ::-webkit-progress-value').style.setProperty('background', 'blue');
and using jquery :
$('progress ::-webkit-progress-value').css('background', 'blue');
but the color of the progress bar still the default color (grey).
Any solution to update the color with the condition below?
Bronze: Boy (orange red) & Girl (purple)
Silver: Boy (yellow) & Girl (green)
Gold: Boy (red) & Girl (blue)
function check() {
var classTrophy = "Gold";
if (classTrophy == "Bronze") {
console.log("Bronze");
document.getElementById("boy").style.background = "orangered";
document.getElementById("girl").style.background = "purple";
} else if (classTrophy == "Silver") {
console.log("Silver");
document.getElementById("boy").style.background = "yellow";
document.getElementById("girl").style.background = "green";
} else if (classTrophy == "Gold") {
console.log("Gold");
document.getElementById("boy").style.background = "red";
document.getElementById("girl").style.background = "blue";
}
}
progress {
width: 100%;
-webkit-appearance: none;
margin-left: 8px;
height: 8px;
}
progress::-webkit-progress-value {
-webkit-appearance: none;
background: grey;
white-space: pre;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(249, 255, 249, 0.78) inset;
}
progress::-webkit-progress-bar {
-webkit-appearance: none;
white-space: pre;
background: #ffffff;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.34) inset;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body onload="check()">
<main>
<div class="form-group">
<label for="" class="mb-0" id="boyPoint" style="font-size:12px;color:black">Boy</label>
<div id="boyBar" class="input-group">
<progress id="boy" value="50" max="100"> </progress>
</div>
</div>
<br><br>
<div class="form-group">
<label for="" class="mb-0" id="girlPoint" style="font-size:12px;color:black">Girl</label>
<div id="girlBar" class="input-group">
<progress id="girl" value="80" max="100"> </progress>
</div>
</div>
</div>
</main>
</body>
</html>

Try this
function check() {
var classTrophy = "Gold";
if (classTrophy == "Bronze") {
console.log("Bronze");
document.getElementById("boy").style.background = "orangered";
document.getElementById("girl").style.background = "purple";
} else if (classTrophy == "Silver") {
console.log("Silver");
document.getElementById("boy").classList.add("progress-yellow");
document.getElementById("girl").classList.add("progress-green");
} else if (classTrophy == "Gold") {
console.log("Gold");
document.getElementById("boy").classList.add("progress-red");
document.getElementById("girl").classList.add("progress-blue");
}
}
progress {
width: 100%;
-webkit-appearance: none;
margin-left: 8px;
height: 8px;
}
progress::-webkit-progress-value {
-webkit-appearance: none;
background: grey;
white-space: pre;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(249, 255, 249, 0.78) inset;
}
progress::-webkit-progress-bar {
-webkit-appearance: none;
white-space: pre;
background: #ffffff;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.34) inset;
}
.progress-yellow::-webkit-progress-bar{
background: yellow;
}
.progress-red::-webkit-progress-bar{
background: red;
}
.progress-blue::-webkit-progress-bar{
background: blue;
}
.progress-green::-webkit-progress-bar{
background: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body onload="check()">
<main>
<div class="form-group">
<label for="" class="mb-0" id="boyPoint" style="font-size:12px;color:black">Boy</label>
<div id="boyBar" class="input-group">
<progress id="boy" value="50" max="100"> </progress>
</div>
</div>
<br><br>
<div class="form-group">
<label for="" class="mb-0" id="girlPoint" style="font-size:12px;color:black">Girl</label>
<div id="girlBar" class="input-group">
<progress id="girl" value="80" max="100"> </progress>
</div>
</div>
</div>
</main>
</body>
</html>

How can turn my validate function into a ajax method?

document.getElementById("button1").addEventListener("click", mouseOver1);
function mouseOver1(){
document.getElementById("button1").style.color = "red";
}
document.getElementById("button2").addEventListener("click", mouseOver);
function mouseOver(){
document.getElementById("button2").style.color = "purple";
}
$("#button1").hover(function() {
$(this).css('cursor','pointer');
});
$("#button2").hover(function() {
$(this).css('cursor','pointer');
});
$(document).ready(function() {
$(".login").validate({
rules: {
existingUsername: {
required: true,
minlength: 10
},
existingPassword:{
required: true,
minlength: 10
},
messages: {
existingUsername: {
required: "You must enter a valid existing user account",
minlength: "Your username must be at least 10 characters long"
},
existingPassword: {
required: "You must enter a valid password associated with an account",
minlength: "Your username must be at least 10 characters long"
}
intro h1 {
font-family: 'Cambria';
font-size: 16pt;
font: bold;
text-align: left;
}
.intro p {
font-family: 'Calibri';
font: italic;
font-size: 12pt;
padding: 0px 690px 0px 20px;
text-align: left;
}
.content {
border: 2px solid;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#para1 {
padding: 0px 1050px 0px 20px;
}
#para2 {
padding: 0px 1099px 0px 20px;
}
.username-label,
.password-label {
margin: 10px 0px 0px 300px;
position: relative;
top: -70px;
}
.existing1-username-input-textbox,
.existing2-password-input-textbox
{
top: -70px;
position: relative;
}
#button1{
background-color: #add8e6;
margin-left: 390px;
position: relative;
top: -50px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
padding: 0px 20px 0px 20px;
}
#button2{
background-color: #add8e6;
margin-left: -200px;
position: relative;
top: -30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0px 20px 0px 20px;
}
.Username-label1,
.Password-label2,
.Email-label3,
.Repeat-Email-label4
{
margin: 0px 0px 0px 300px;
position: relative;
top: -70px;
}
.username-new-input-textbox,
.password-new-input-textbox,
.email-new-input-textbox,
.reenter-new-input-textbox{
position: relative;
top: -70px;
margin-left: 20px;
}
span{
color: red;
}
<html>
<head>
<link href="Home.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Project</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>Welcome to Cuyahoga Community College Student Services Online</h1>
<p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
</div>
<br/>
<div class="content">
<div class="row top">
<p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
<div class="login">
<label class="username-label" for="existingUsername">Username</label>
<input class="existingUsername" type="text" value="">
<span id="username_error1">*</span><br>
<label class="password-label" for="existingPassword">Password</label>
<input class="existingPassword" type="password" value="">
<span id="password_error2">*</span><br>
<button id="button1">Log in</button>
</div>
</div>
<hr/>
<div class="row bottom">
<p id="para2">New users, please create a new account by providing us with some basic information.</p>
<div class= "new_customers_info">
<label class="Username-label1" for="newUsername">Username</label>
<input class="newUsername" type="text" value="">
<br/><br/>
<label class="Password-label2" for="newPassword">Password</label>
<input class="newPassword" type="password" value="">
<br/><br/>
<label class="Email-label3" for="newEmail">Email Address</label>
<input class="newEmail" type="email" value="" >
<br/><br/>
<label class="Repeat-Email-label4" for="repeatEmail">Repeat Email Address</label>
<input class="repeatEmail" type="email" value="">
<button id="button2">Create Account</button>
</div>
</div>
</div>
<br/>
<footer>Cuyahoga Community College</footer>
<footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
<script src="Home.js"></script>
</body>
</html>
How can I validate each of (upper textboxes) using AJAX to see if the username and password is correct and if they are not correct, display the error messages in red below each respective textbox. Here is my code. Any suggestions would be help. I know I could use the $.ajax() method, but I don't know how I can translate my current validate function into the sensible ajax method.

$(".selector").validate({
rules: yourRules,
messages: {
username: {
remote: "Username already exists"
}
}
})
// This is cited from Stack Overflow. Would this how Ajax work internally?
*/http://stackoverflow.com/questions/6772154/using-the-jquery- validate-plugin-with-the-remote-option?rq=1 /*

Modal window (popup) alert show on error field using angularJs

i created sample program for business validation, here error message showing , but its not showing particular error field , how to solve this issue,
Thanks in advance .................................................................
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.save=function()
{
if($scope.firstName == undefined)
{
$('#popup1').fadeIn($(this).data());
// in the RC of 1.3 there is function.link only the function customs Validation.compile which
// needs to be invoked to get at the functions.
setTimeout(function(){
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('firstName');
if (element)
element.focus();
}
if($scope.lastName = undefined){
$('#popup1').fadeIn($(this).data());
// in the RC of 1.3 there is function.link only the function customs Validation.compile which
// needs to be invoked to get at the functions.
setTimeout(function(){
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('lastName');
if (element)
element.focus();
}
}
});
.modal-box {
display: none;
position: absolute;
z-index: 1000;
width: 98%;
background: white;
border-bottom: 1px solid #aaa;
border-radius: 20px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
background-clip: padding-box;
}
#media (min-width: 32em) {
.modal-box { width: 180px; top: 215px; left: 390px; }
}
.modal-box header,
.modal-box .modal-header {
padding: 1.25em 1.5em;
border-bottom: 1px solid #ddd;
}
.modal-box .modal-body { padding:22px; background-color: #dd4b39;
border-radius: 20px; height: 0px;
color: white;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<input type="submit" ng-click="save()">
</div>
<div id="popup1" class="modal-box">
<div class="modal-body">
<span style="position:absolute;top:10px;">Please Enter the Value </span>
</div>
</div>
</body>

why you are opting this way to carry out validations on form fields when angular have self validation functions/operations. And your method isn't good enough to be considered as best practice when you're with angularJs
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>Try leaving the first input field blank:</p>
<form name="myForm">
<p>Name:
<input name="firstName" ng-model="firstName" required>
<span ng-show="myForm.firstName.$touched && myForm.firstName.$invalid">The First name is required.</span>
</p>
<p>Adress:
<input type="text" name="lastName" ng-model="lastName" required>
<span ng-show="myForm.lastName.$touched && myForm.lastName.$invalid">The Addressis required.</span>
</p>
</form>
</body>
</html>
And after this you could customize styling for span used for error as well as JQUERY for animation effects. In your external css & Js scripts.
And it is considered to be the best practices for angularjs too. As well reduces headache of writing jquery code manually for validation. Thanks & Cheers :)

I edit your code please compare and verify
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<style type="text/css">
.modal-box
{
display: none;
position: absolute;
z-index: 1000;
width: 98%;
background: white;
border-bottom: 1px solid #aaa;
border-radius: 20px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
background-clip: padding-box;
}
#media (min-width: 32em)
{
.modal-box { width: 180px; top: 215px; left: 390px; }
}
.modal-box header,
.modal-box .modal-header
{
padding: 1.25em 1.5em;
border-bottom: 1px solid #ddd;
}
.modal-box .modal-body
{
padding:22px; background-color: #dd4b39;
border-radius: 20px; height: 0px;
color: white;
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<input type="submit" ng-click="save()">
<div id="popup1" class="modal-box">
<div class="modal-body">
<span style="position:absolute;top:10px;">{{error}}</span>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope,$http,$sce)
{
$scope.save=function()
{
if($scope.firstName == undefined)
{
$('#popup1').fadeIn($(this).data());
setTimeout(function()
{
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('firstName');
if (element)
element.focus();
$scope.error = "Please enter first name.";
return;
}
if($scope.lastName == undefined)
{
$('#popup1').fadeIn($(this).data());
setTimeout(function()
{
$('#popup1').fadeOut($(this).data());
},3000);
var element = window.document.getElementById('firstName');
if (element)
element.focus();
$scope.error = "Please enter last name.";
return;
}
}
});
</script>
</body>
</html>

Value of margin padding and width properties

Consider the following html code snippet:
<div id="parent" class="parent">
<form id="child" class="child">
<input id="textForDim" type="text" />
<input type="submit" value="submit"/>
</form>
<div id="divchild" class="childd"><input type="text" /><br/>
<div class="cchild"></div>
</div>
and corresponding css styles
.parent{
position: absolute;
text-align: center;
width: 350px;
height: 450px;
background-color: #f7f7f7;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
}
.childd{
width:200px;
height:180px;
background: grey;
}
.cchild{
background:aqua;
width:20px;
height:10px;
}
JSFIDDLE. How i can do that after submit button click we have margin-left,margin-right,width,padding-left,padding-right in the textForDim input as the follow:
margin-left: _Margin-Left_Value_px, margin-right: _Margin-Right_Value_px, etcetera...
Is it possible to apply JS for this needs or it's a bad practice?
Where _Margin-Right_Value_px is the value of margin-right property of divchild div element.

<script>
function doThis()
{
var k = document.getElementById('textForDim');
k.style.marginLeft = _Margin_Left_Value_px + "px";
k.style.marginRight = _Margin_Right_Value_px + "px";
}
</script>
<div id="parent" class="parent">
<form id="child" class="child">
<input type="text" id="textForDim" onclick="doThis()"/>
<input type="submit" value="submit"/>
</form>
<div id="divchild" class="childd"><input type="text" /><br/>
<div class="cchild"></div>
</div>