Display on load not just when checked

Display on load not just when checked - javascript

I have the demo setup at https://jsfiddle.net/pinchetpooche/xgugjojq/5/
I want if the Yes is checked on page load that it shows the result of what is checked. This works only if I go back and check yes even if it were already checked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($('.trigger').is(':checked')) {
$('.content').hide();
$('.' + $(this).data('rel')).show();
}
$('.trigger').click(function() {
$('.content').hide();
$('.' + $(this).data('rel')).show();
});
});
</script>
<style>
.gads {
border:none;
background-color:transparent;
outline:none;
}
.content {
display: none;
}
.none {
border:none;
background-color:transparent;
outline:none;
}
.ee {
border:none;
background-color:transparent;
outline:none;
}
.et {
border:none;
background-color:transparent;
outline:none;
}
.gads-yes {
border:none;
background-color:transparent;
outline:none;
}
.gads-no {
border:none;
background-color:transparent;
outline:none;
}
.gads-na {
border:none;
background-color:transparent;
outline:none;
}
.ee-yes {
border:none;
background-color:transparent;
outline:none;
}
.ee-no {
border:none;
background-color:transparent;
outline:none;
}
</style>
</head>
<BODY>
<div id="content">
<form id="form1" name="form1" method="post" action="add_incident.asp">
<table border="0" class="formset" >
<tr>
<td> </td>
</tr>
<tr>
<td><label class="style8">Event?</label></td>
<td>
<input type="radio" name="age1" value="Yes" class="gads-yes trigger" data-rel="gads-yes" /><span class="style8"> Yes</span>
<input type="radio" name="age1" value="No" class="gads-no trigger" data-rel="gads-no" /><span class="style8"> No</span>
<input type="radio" name="age1" value="NA" class="gads-na trigger" data-rel="gads-na" /><span class="style8"> NA</span>
</td>
</tr>
</table>
<div>
<div class="gads-yes content">
<table border="0" class="formset">
<tr>
<td class="style9">MENU</td>
</tr>
<tr>
<td><label for="description" class="style8">Description</label></td>
<td colspan="2" class="textarea"><textarea class="textbox2" id="description" name="description" rows="3"></textarea></td>
</tr>
<tr>
<td colspan="3" align="right"><input type="submit" name="submit3" value="Submit" class="form_button_clear" /></td>
</tr>
</table>
</div>
<div class="gads-no content">
<table border="0" class="formset" >
<tr>
<td colspan="4" class="style9">MENU 2</td>
</tr>
<tr>
<td><label for="description1" class="style8">Description Two</label></td>
<td colspan="3"><textarea id="description1" name="description1" rows="3" class="textbox2"></textarea></td>
</tr>
<tr>
<td colspan="4" align="right"><input type="submit" name="submit2" value="Submit" class="form_button_clear" /></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>

Change your JS for the below:
<script>
$(document).ready(function(){
$('.trigger').on('click', function() {
$('.content').hide();
$('.' + $(this).data('rel')).show();
}).filter(':checked').trigger('click');
});
</script>
First bind the click event and then trigger it on page load on the filtered :checked element.

Change selector in if using :eq(0)
$(document).ready(function(){
if ($('.trigger:eq(0)').is(':checked')) {
$('.content').hide();
$('.' + $('.trigger:eq(0)').data('rel')).show();
}
$('.trigger').click(function() {
$('.content').hide();
$('.' + $(this).data('rel')).show();
});
});
Example
or you can use gads-yes selector
$('.' + $('.gads-yes').data('rel')).show();

You could just use the callback of hide():
$(document).ready(function(){
//Wait until the content's hidden before showing the selected item
$(".content").hide(function(){
$("." + $(".trigger:checked").data("rel")).show();
});
$('.trigger').click(function() {
$('.content').hide();
$('.' + $(this).data('rel')).show();
});
});

Related

Why is the first table column skipped?

As this screenshot shows, the Title header is misaligned with the table data.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Writer's Tryst - Manage Uploads</title>
<style>
table {
border-spacing:0;
border-collapse:collapse;
}
td, th {
padding: 5px;
}
.nbr-pages {
width: 48px;
text-align: right;
padding-right: 2px;
}
.delete {
cursor: pointer;
}
</style>
</head>
<body>
<h1>Manage Uploads</h1>
<form id="form-manage-uploads">
<table id="table-writer-uploads">
<tbody>
<tr>
<th>Delete</th><th>TItle</th><th>Type</th><th>Genre</th><th>Length</th><th>PDF</th><th>Save</th>
</tr>
<tr class="tr-clone" >
<td><img class="delete" src="img/icons/delete.png" alt="delete" /> </td>
<td><input class="id" name="id" type="hidden" /></td>
<td><input class="title" name="title" placeholder="Title" autofocus="true" /></td>
<td>
<select class="form-type" name="form-type">
</select>
</td>
<td>
<select class="genre" name="genre">
</select>
</td>
<td><input class="nbr-pages" name="nbr-pages" required placeholder="Pages" /></td>
<td>Synopsis</td>
<td><input type="button" class="save btn btn-custom-primary" value="Save" /></td>
<td><input type="hidden" class="id" name="id" /></td>
</tr>
</tbody>
</table>
<input class="current-id" type="hidden" />
</form>
<script src="js/common.js"></script>
<script src="js/manage-uploads.js"></script>
</body>
</html>
The table is built using JavaScript:
function getWritersData() {
var data = {};
data.action = 'get-writer-data';
data["account-id"] = localStorage.getItem("account-id");
ajax('post', 'php/manage-uploads.php', data, getSuccess, "Error retrieving writer's data: ");
function getSuccess(data) {
var trClone = $(".tr-clone");
var jsonData = $.parseJSON(data);
var count = 0;
for (var key in jsonData) count++;
if (key != undefined) {
count--;
$.each(jsonData, function (index, value) {
trClone = trClone.clone().insertAfter($(".tr-clone:last"));
trClone.find(".id").val(value.ID);
trClone.find(".title").val(value.Title);
trClone.find(".form-type").val(value.FormType);
trClone.find(".genre").val(value.Genre);
trClone.find(".nbr-pages").val(value.NumberOfPages);
var filepath = "uploads/" + value.Filename;
var synopsis = trClone.find(".synopsis");
var sv = synopsis.val(filepath);
synopsis.attr("href", filepath);
});
} else {
$("h1").append("<br/><br/><div class='but-custom-warning'>No records were found.</div>"); //.css("disp
$("table").css("display", "none");
}
$(".tr-clone:first").css("display", "none");
}
}

You have an extra table column for the hidden input:
There's no need for this to be in its own table cell, so combine it with one of the other cells.
<td><input class="id" name="id" type="hidden" /><input class="title" name="title" placeholder="Title" autofocus="true" /></td>

You got an extra column with nothing visible in it:
<td><input class="id" name="id" type="hidden" /></td>
I'd recommend you put the hidden field in another column or use this:
<th colspan="2">Delete</th>

on selection of checkbox display textarea. if it's not selected textarea value should empty

I created page with 2 checkbox, submit and reset button as attached image
If i click on radio buttons it will show hidden text area's.
If I select both checkboxes and click on submit it will work fine. But if I click on only one of the checkboxes and click on submit it won't work.
Could you please help me how to submit the query with selecting only one checkbox?
My request_to_approve.php code is
<html>
<script type="text/javascript">
function checkValue()
{
if(document.getElementById("reject").checked == true)
{
document.getElementById('xtraInfo').style.display='block';
document.getElementById('xtraInfo1').style.display='block';
document.getElementById('xtraInfo2').style.display='block';
document.getElementById('xtraInfo3').style.display='block';
document.getElementById('xtraInfo4').style.display='block';
document.getElementById('xtraInfo5').style.display='block';
}
else
{
document.getElementById('xtraInfo').style.display='none';
document.getElementById('xtraInfo1').style.display='none';
document.getElementById('xtraInfo2').style.display='none';
document.getElementById('xtraInfo3').style.display='none';
document.getElementById('xtraInfo4').style.display='none';
document.getElementById('xtraInfo5').style.display='none';
}
}
function checkswcr()
{
if(document.getElementById("swcr").checked == true)
{
document.getElementById('swcrInfo').style.display='block';
document.getElementById('swcrInfo1').style.display='block';
document.getElementById('swcrInfo2').style.display='block';
document.getElementById('swcrInfo3').style.display='block';
document.getElementById('swcrInfo4').style.display='block';
document.getElementById('swcrInfo5').style.display='block';
}
else
{
document.getElementById('swcrInfo').style.display='none';
document.getElementById('swcrInfo1').style.display='none';
document.getElementById('swcrInfo2').style.display='none';
document.getElementById('swcrInfo3').style.display='none';
document.getElementById('swcrInfo4').style.display='none';
document.getElementById('swcrInfo5').style.display='none';
}
}
function checkother()
{
if(document.getElementById("other").checked == true)
{
document.getElementById('otherInfo').style.display='block';
document.getElementById('otherInfo1').style.display='block';
if(document.getElementById("reject").checked == false)
{
document.getElementById('otherInfo2').style.display='block';
document.getElementById('otherInfo3').style.display='block';
document.getElementById('otherInfo4').style.display='block';
document.getElementById('otherInfo5').style.display='block';
}
}
else
{
document.getElementById('otherInfo').style.display='none';
document.getElementById('otherInfo1').style.display='none';
document.getElementById('otherInfo2').style.display='none';
document.getElementById('otherInfo3').style.display='none';
document.getElementById('otherInfo4').style.display='none';
document.getElementById('otherInfo5').style.display='none';
}
}
</script>
<table id="structure">
<tr>
<td id="page">
<body>
<?php
if (isset($_POST['submit']) )
{
$pronto = $_POST['pronto'];
$fatal = $_POST['fatal'];
$medi = $_POST['medi'];
$neu = $_POST['neu'];
$swcr = $_POST['swcr'];
print_r($pronto);
print_r($fatal);
print_r($medi);
print_r($neu);
print_r($swcr);
}
?>
</br>
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<table width="100%" align="left" cellpadding="3" cellspacing="1">
<form name = "Register" method = "post" action = "request_to_approve.php">
<tr>
<td>
PR: <input type='checkbox' name='reject' id='reject' value='Rejected' onClick="checkValue()" />
</td>
</tr>
<tr>
<td align="left">
<div id="xtraInfo1" style="text-align:left; display:none; font-weight:bold;">
PRONTO Details: </div></td>
<td>
<div id="xtraInfo" style="text-align:left; display:none; font-weight:bold;">
<textarea id="pronto" width="900" style="width: 650px; resize:vertical;" name="pronto" required><?php if( $_SERVER['REQUEST_METHOD'] === 'POST' ) { print_r($_POST['rejectdt']); }?></textarea>
</div>
</td>
</tr>
<tr>
<td>
<div id="xtraInfo2" style="text-align:left; display:none; font-weight:bold;">Review Comments :</div></td>
<td>
<table>
<tr>
<td align="center"> <div id="xtraInfo3" style="text-align:left; display:none; font-weight:bold;">Fatal :- </br>
<textarea id="fatal" class="wmd-input processed" name="fatal" type="file" cols="31" rows="5" tabindex="50" data-min-length="" wrap=physical required></textarea>
</div></td>
<td align="center"> <div id="xtraInfo4" style="text-align:left; display:none; font-weight:bold;">Medium :- </br>
<textarea id="medi" class="wmd-input processed" name="medi" type="file" cols="31" rows="5" tabindex="50" data-min-length="" wrap=physical required></textarea>
</div></td>
<td align="center"> <div id="xtraInfo5" style="text-align:left; display:none; font-weight:bold;">Neutral :- </br>
<textarea id="neu" class="wmd-input processed" name="neu" type="file" cols="31" rows="5" tabindex="50" data-min-length="" wrap=physical required></textarea>
</div></td>
</tr>
</table>
</tr>
<tr>
<td>
SWCR/Feature : <input type='checkbox' name='swcr' id='swcr' value='swcr' onClick="checkswcr()" />
</td>
</tr>
<tr>
<td align="left">
<div id="swcrInfo1" style="text-align:left; display:none; font-weight:bold;">
SWCR/Feature/Backlog Details: </div></td>
<td>
<div id="swcrInfo" style="text-align:left; display:none; font-weight:bold;">
<textarea id="swcr" width="900" style="width: 650px; resize:vertical;" name="swcr" required><?php if( $_SERVER['REQUEST_METHOD'] === 'POST' ) { print_r($_POST['swcr']); } ?></textarea>
</div>
</td>
</tr>
<tr><td>
<button type="submit" name="submit" value="submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</td></tr>
</form>
</table>
</table>
</html>
Could anyone please help me on this

function checkswcr(){
var swcrInfo = document.getElementById('swcrInfo');
swcrInfo.style.display == 'block' ? swcrInfo.style.display = 'none' : swcrInfo.style.display = 'block';
}
Demo

okay make a hidden field like a number, store a value on first checkbox click..attach your desired function to it. on second checkbox click store a different value and the function and if both the checkboxes have been clicked store the third value in the same hidden field. the value of the hidden field will indicate exactly what to do with the click..hope it should work

HTML submit button doesnt nvigate to the respective URL's

The submit button in my html code doesnt respond to the onclick event
.please take a look at my html code and please let me know where i went wrong..
I use location.href usually, but, that too doesnt work here.
I used the function to switch between 2 URL's based on the radio button options "yes" or "No".
thanks in advance.
<html>
<head>
<style type="text/css">
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:10px;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #000000;
background:#ebf4fb;
width:500px;
height:350px;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:left;
width:140px;
float:left;
}
#stylized form{
float:left;
font-size:12px;
<!--padding:4px 2px;-->
<!-- border:solid 1px #aacfe4;-->
width:100px;
margin:2px 0 20px 10px;
}
#stylized table, th, td
{
font-size:12px;
width:400px;
border: 1px solid black;
}
th
{
width:10%;
background-color: black;
color: white;
}
#stylized button.custom-submit {
float: left;
clear: none;
margin-left: 50px;
}
</style>
<script>
$(function(){
$('myform').submit(function(event){
event.preventDefault();
window.location = $('input[type=radio]:checked').val();
});
});
</script>
</head>
<body>
<div id="stylized" class="myform">
<form id="form" name="form">
<label>New Data set :
</label>
<input type="radio" name="url" value="Inputs1.html" /> Yes
<input type="radio" name="url" value="ResultsPage.html" /> No
<br>
<label>Dataset description:
</label>
<input type ="text" name= "Dataset" size="30"><br><br><br>
<table id="Previous Datasets">
<tr>
<th>Check</th>
<th>Token Number</th>
<th>Dataset description</th>
</tr>
<tr>
<td><input type="checkbox"> </td>
<td>234567</td>
<td>MHEX North America Dataset</td>
</tr>
<tr>
<td><input type="checkbox"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"> <td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"> </td>
<td></td>
<td></td>
</tr>
</table>
<div style="text-align: center"><br>
<input type="Submit" name="submit" value="Submit" class="submit" onClick="gotoResults()">
<div class="spacer"></div>
</form>
</div>
</body>

When you have an input of type submit and you click it, the form tag is looked at to determine where to go.
You need to add the action command to the form if you are going to do it this way, and specify the new page in that action command. Something like this..
<form id="form" name="form" action="newpage.html" method="get">
This will send a get request to the server when you hit submit, and bring you to the new page with the form's elements in the query string.
On the other hand, if you decide you do want to call a javascript function and grab the form's field values on your own, just take the button out of the form tags, make it a regular button (not a submit button), and call the javascript function in the onclick like you are now.

Instead of onClick you need to use onsubmit on the form:
<form id="form" name="form" onsubmit="gotoResults(); return false;">
return false will prevent default behavior of submiting a form and go to the same page (if you don't have action).

Its working...
javascript
$(document).ready(function () {
$("#sub").click(function () {
var x = $("#select").val();
if (x == "yes") {
window.location.href = "http://www.google.com";
}
else {
window.location.href = "http://www.yahoo.com";
}
})
});
css
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:10px;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #000000;
background:#ebf4fb;
width:500px;
height:350px;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:left;
width:140px;
float:left;
}
#stylized form{
float:left;
font-size:12px;
<!--padding:4px 2px;-->
<!-- border:solid 1px #aacfe4;-->
width:100px;
margin:2px 0 20px 10px;
}
#stylized table, th, td
{
font-size:12px;
width:400px;
border: 1px solid black;
}
th
{
width:10%;
background-color: black;
color: white;
}
#stylized button.custom-submit {
float: left;
clear: none;
margin-left: 50px;
}
html
<div>
<div id="stylized" class="myform">
<form id="form" name="form" method="post">
<label>
New Data set :
</label>
<select id="select">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br>
<br>
<label>
Dataset description:
</label>
<input type="text" name="Dataset" size="30"><br>
<br>
<br>
<table id="Previous Datasets">
<tr>
<th>
Check
</th>
<th>
Token Number
</th>
<th>
Dataset description
</th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
234567
</td>
<td>
MHEX North America Dataset
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
<td>
<td>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<div style="text-align: center">
<br>
<input id="sub" type="Submit" name="submit" value="Submit" class="submit">
<div class="spacer">
</div>
</div>
</form>
</div>
</div>

Fill form field with ajax request not working in other file

I apologize first for this question. I tried to fill data in sale_price section but it still no work.
R1. My sale4.php is okay. I tried it with this url and it has returns as I need.
sale4.php?q=Samsung%20Galaxy%20S4
R2. My test.php is okay. IT returned/filled with obtained value from sale4.php
But in my cash.php file it is working well. Can anyone tell what is my wrong?
Screen shot:
Explain:
test.php: send get request to sale4.php
sale4.php return sale price with $_GET var.
cash.php the applied file to obtain as test.php. My file are bellow-
// sale4.php
<?php
include('../_db/_con.php');
$m=$_GET['q'];
$que="SELECT `purchase_list`.`sale_price` , `purchase_list`.`pur_id`
FROM `purchase_list`
JOIN `item_info` ON `purchase_list`.`item_id` = `item_info`.`item_id`
WHERE `purchase_list`.`sale_price` <>0 AND `item_info`.`item_name` = '$m'";
$result = $mysqli->query($que);
$y=$result->fetch_array(MYSQLI_NUM);
echo $y['0'];
include('../_db/con_.php');
?>
//test.php
<html><head><title>hello</title></head><body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</script>
<script>
function sale_price(itemed)
{
$(document).ready(function()
{
$.get("sale4.php?q="+itemed,function(data,status)
{
$("#sale").val(data);
//alert("Data: " + data + "\nStatus: " + status);
});
});
}
</script>
<input onChange="sale_price(this.value)" value="Mobile battery">
<input id="sale" value="<?php
$msg='fdf'; print $msg; ?>">
</div>
</body>
</html>
// cash.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Epos</title>
<link rel="stylesheet" href="http://localhost/epos/css/jquery-ui.css" />
<style type="text/css">
#body{
margin:0 auto;
width:1000px;
}
#main{
font-size: 40px;
color:#039;
font-weight:bold;
font-family:"Courier New", Courier, monospace;
}
#bottom{
font-size: 12px;
color:#039;
font-weight:bold;
font-family:"Courier New", Courier, monospace;
background-color: #DDDDDD;
}
#menuWrapper {
width:1000px; /* Menu width */
height:35px;
padding-left:14px;
background-color: #fff;
border-radius: 10px; /* Menu border roundedness */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background-color:#C0C0C0;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
background-color:#C0C0C0;
color:#000;
text-decoration:none;
font-family:"Verdana", sans-serif;
font-size:16px; /* Tama�o de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
width:146px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#000; }
.menu li:hover {position:relative; z-index:2;}
.menu ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu li:hover ul.sub {
left:0;
top:35px;
background:#CBE4E4; /* Submenu background color */
padding:3px;
color:#000;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#000;
font-size:16px;
font-weight:600;
text-decoration:none;
}
.menu li:hover ul.sub li a:hover {
background: #0779F8; /* Background Color on mouseover */
color:#fff;
}
table{
margin:0 auto;
}
.h1{
font-size:72px;;
text-align:center;
}
</style>
</head>
<body>
<div id="body">
<center>
<span class="h1">EPOS</span>
</center>
<div id="menuWrapper">
<ul class="menu">
<li class="top">
<a class="top_link" href="http://localhost/epos/master/user.php"><span class="top">Epos</span></a>
<ul class="sub">
<li class="top">Admin setup</li>
<li class="top">Company setup</li>
<li class="top">Logout</li>
</ul>
<span> </span>
<li class="top">
<a class="top_link" href="http://localhost/epos/master/user.php"><span class="top">Master</span></a>
<ul class="sub">
<li class="top">User master</li>
<li class="top">Group master</li>
<li class="top">Unit master</li>
<li class="top">Category master</li>
<li class="top">Item master</li>
</ul>
<span> </span>
<li class="top"><a class="top_link" href="http://localhost/epos/?go=rent"><span class="top">Market</span></a>
<ul class="sub">
<li class="top">Cash sale</li>
<li class="top">Credit sale</li>
<li class="top">Cash purchase</li>
<li class="top">Credit purchase</li>
<li class="top">Cash purchase2</li>
<li class="top">Credit purchase2</li>
</ul>
<span> </span></li>
<li class="top"><a class="top_link" href="http://localhost/epos/?go=account"><span class="top">Account</span></a>
<span> </span></li>
<li class="top"><a class="top_link" href="?go=reports"><span class="top">Reports</span></a></li>
</ul>
</div></header>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function sale_price(itemed)
{
$(document).ready(function()
{
$.get("sale4.php?q="+itemed,function(data,status)
{
$("#sale").val(data);
//alert("Data: " + data + "\nStatus: " + status);
});
});
}
</script>
<script>
$(function() {
var items = ["Motorola Razr HD",
"iPhone 4",
"Samsung Galaxy S3",
"Motorola Razr HD",
"Mobile equipment",
"Mobile equipment",
"Samsung Galaxy S4",
"Mobile equipment",
"Mobile equipment",
"Samsung Galaxy S4",
"Mobile equipment",
"Mobile equipment",
"Sony Xperia S",
"Walton Mobile",
"Mobile",
""
];
$( "#item" ).autocomplete({
source: items
});
var dates = [
"",
"20/7/2013"
];
$( "#day" ).autocomplete({
source: dates
});
});
</script>
<style type="text/css">
.y2
{
background-color:#DDDDDD;
}
.scope
{
background-color:#CCCCCC;
padding:4px;
}
.y1
{
width:25px;
background-color:#DDDDDD;
}
.y21
{
width:55px;
background-color:#DDDDDD;
}
#txt
{
width:200px;
height:25px;
}
#input{
background-color:#666666;
color:#fff;
font-size:16px;
border:#000 1px solid;
padding:2px;
font-weight:600;
}
td
{
padding:3px;
vertical-align:top;
}
th
{
width:300px;
}
.ordel
{
width:300px;
}
</style>
<div id="hello"></div>
<form action="cash.php" method="post" name="users">
<table width="400" border="0" class="ui-widget">
<tr>
<th class="col">Date</th>
<th class="col">Customer</th>
<th class="col">Note</th>
<th class="col">Item</th>
<th class="col">Quantity</th>
<th class="col">Vat(%)</th>
</tr><input name="form" value="usr" type="hidden">
<tr>
<td><input size="10" name="date" id="day" value="20/7/2013" type="text"></td>
<td><input size="20" name="customer" id="customer" value="" type="text"></td>
<td><textarea id="txt" name="note" id="info"></textarea></td>
<td><input onChange="sale_price(this.value)" size="20" name="item_name" id="item" value="" type="text"></td>
<td><input size="10" name="qty" id="qty" value="" type="text"></td>
<td><input name="vat" size="5" id="vat" value="" type="text"></td>
</tr>
<tr>
<th align="left" colspan="3">Sale Price:
<input id="salep" name="sale" size="5" value="" type="text">
Profit:
<input disabled="disabled" name="price" size="5" value="" type="text"></th><th align="left" colspan="5">
<input name="add" value="Add new" id="input" type="submit"> <input name="go" size="4" value="" placeholder="10" id="lab" type="text">
<input name="goto" value="Go to S.N." id="input" type="submit">
<input value="Delete" name="delete" id="input" type="submit"></th>
</tr>
</table>
<table>
<tr>
<th style="width:25px;" class="scope">#</th>
<th style="width:145px;" class="scope">Date</th>
<th style="width:225px;" class="scope">Customer</th>
<th style="width:645px;" class="scope">Note</th>
<th style="width:205px;" class="scope">Item</th>
<th style="width:25px;" class="scope">Sale(each)</th>
<th style="width:25px;" class="scope">Bye(each)</th>
<th style="width:35px;" class="scope">Quantity</th>
<th style="width:25px;" class="scope">Vat</th>
</tr>
<tr>
<td class="y1">1</td>
<td class="y21">18 July 2013</td>
<td class="scope"></td>
<td class="y2"><i></i></td>
<td class="y2">Mobile</td>
<td class="y2">11111111</td>
<td class="y2">444444</td>
<td class="y2">4 Taka</td>
<td class="y2">10%</td>
</tr>
<tr>
<td class="y1">2</td>
<td class="y21">20 July 2013</td>
<td class="scope">Shiam</td>
<td class="y2"><i>asdf</i></td>
<td class="y2">Huawei Ascend G330</td>
<td class="y2">0</td>
<td class="y2">78</td>
<td class="y2">8 piece</td>
<td class="y2">10%</td>
</tr>
<tr>
<td class="y1">3</td>
<td class="y21">20 July 2013</td>
<td class="scope">Shiam</td>
<td class="y2"><i>asdf</i></td>
<td class="y2">Huawei Ascend G330</td>
<td class="y2">0</td>
<td class="y2">78</td>
<td class="y2">8 piece</td>
<td class="y2">10%</td>
</tr></table>
</form>
</div>
</body>
</html>

Add Jquery 1.10.1 and jquery UI for autocomplete 1.10.3

I think you need as so.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Epos</title>
<link rel="stylesheet" href="http://localhost/epos/css/jquery-ui.css" />
<style type="text/css">
#body{
margin:0 auto;
width:1000px;
}
#main{
font-size: 40px;
color:#039;
font-weight:bold;
font-family:"Courier New", Courier, monospace;
}
#bottom{
font-size: 12px;
color:#039;
font-weight:bold;
font-family:"Courier New", Courier, monospace;
background-color: #DDDDDD;
}
#menuWrapper {
width:1000px; /* Menu width */
height:35px;
padding-left:14px;
background-color: #fff;
border-radius: 10px; /* Menu border roundedness */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background-color:#C0C0C0;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
background-color:#C0C0C0;
color:#000;
text-decoration:none;
font-family:"Verdana", sans-serif;
font-size:16px; /* Tama�o de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
width:146px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#000; }
.menu li:hover {position:relative; z-index:2;}
.menu ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu li:hover ul.sub {
left:0;
top:35px;
background:#CBE4E4; /* Submenu background color */
padding:3px;
color:#000;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#000;
font-size:16px;
font-weight:600;
text-decoration:none;
}
.menu li:hover ul.sub li a:hover {
background: #0779F8; /* Background Color on mouseover */
color:#fff;
}
table{
margin:0 auto;
}
.h1{
font-size:72px;;
text-align:center;
}
</style>
</head>
<body>
<div id="body">
<center>
<span class="h1">EPOS</span>
</center>
<div id="menuWrapper">
<ul class="menu">
<li class="top">
<a class="top_link" href="http://localhost/epos/master/user.php"><span class="top">Epos</span></a>
<ul class="sub">
<li class="top">Admin setup</li>
<li class="top">Company setup</li>
<li class="top">Logout</li>
</ul>
<span> </span>
<li class="top">
<a class="top_link" href="http://localhost/epos/master/user.php"><span class="top">Master</span></a>
<ul class="sub">
<li class="top">User master</li>
<li class="top">Group master</li>
<li class="top">Unit master</li>
<li class="top">Category master</li>
<li class="top">Item master</li>
</ul>
<span> </span>
<li class="top"><a class="top_link" href="http://localhost/epos/?go=rent"><span class="top">Market</span></a>
<ul class="sub">
<li class="top">Cash sale</li>
<li class="top">Credit sale</li>
<li class="top">Cash purchase</li>
<li class="top">Credit purchase</li>
<li class="top">Cash purchase2</li>
<li class="top">Credit purchase2</li>
</ul>
<span> </span></li>
<li class="top"><a class="top_link" href="http://localhost/epos/?go=account"><span class="top">Account</span></a>
<span> </span></li>
<li class="top"><a class="top_link" href="?go=reports"><span class="top">Reports</span></a></li>
</ul>
</div></header>
<script src="http://localhost/epos/js/jquery-1.9.1.js"></script>
<script src="http://localhost/epos/js/jquery-ui.js"></script>
<script>
function checkform()
{ var q1 = parseInt(document.form.qty.value);
var q2 = parseInt(document.form.q.value);
if(q1 > q2)
{
alert("Maximum available quantity is "+q2);
return false;
}
else
{
document.form.submit();
}
}
function sale_price(itemed)
{
$(document).ready(function()
{
$.get("sale4.php?q="+itemed,function(data,status)
{
var prcS = data.split("|");
var prc = prcS[0];
document.getElementById("sale").value=prc;
var prc2 = prcS[1];
document.getElementById("qt").innerHTML=prc2;
});
});
}
function myformat(x) {
var partz = x.toString();
var parts = partz.split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return parts.join(".");
}
function calculated()
{
$(document).ready(function()
{
var prc = parseInt(document.getElementById("sale").value);
var vatQ = document.getElementById("vat").value;
var vatzz =vatQ*prc;
var vat= vatzz/100;
var prc1=parseInt(vat)+parseInt(prc);
var quan = document.getElementById("qty").value;
var inp = parseInt(quan)*prc1;
var vals= parseInt(inp);
var x1 = myformat(vals);
var parts1 = inp.toString();
var parts = parts1.split('.');
var x2 = parts[1] ? "." + myformat(parts[1]) : "";
var profits = x1+x2;
var elem = document.getElementById("profit");
if(inp){
elem.setAttribute("style","font-family: Tahoma; background-color: #ccc; font-weight: bold; color:#000;");
$("#profit").val(profits);
}else{
elem.setAttribute("style","font-family: Courier; background-color: red; text-decoration: blink; color:#fff;");
alert("Please enter info");
$("#profit").val("0");
}
//document.getElementById("profit").value=profits;
//alert(profits);
});
}
</script>
<script>
$(function() {
var items = ["Samsung Galaxy S4",
"Motorola Razr HD",
"iPhone 4",
"Samsung Galaxy S3",
"Motorola Razr HD",
"Mobile equipment",
"Mobile equipment",
"Samsung Galaxy S4",
"Mobile equipment",
"Mobile equipment",
"Samsung Galaxy S4",
"Mobile equipment",
"Mobile equipment",
"Sony Xperia S",
"Walton Mobile",
"Mobile",
""
];
$( "#item" ).autocomplete({
source: items
});
var dates = [
"",
"22/7/2013"
];
$( "#day" ).autocomplete({
source: dates
});
});
</script>
<style type="text/css">
.y2
{
background-color:#DDDDDD;
}
.scope
{
background-color:#CCCCCC;
padding:4px;
}
.y1
{
width:25px;
background-color:#DDDDDD;
}
.y21
{
width:55px;
background-color:#DDDDDD;
}
#txt
{
width:200px;
height:25px;
}
#txt:hover{
background-color:#999999;
border:#666666 1px solid;
padding:5px;
}
#input{
background-color:#666666;
color:#fff;
font-size:16px;
border:#000 1px solid;
padding:2px;
font-weight:600;
}
td
{
padding:3px;
vertical-align:top;
}
th
{
width:300px;
}
.ordel
{
width:300px;
}
</style>
<div id="hello"></div>
<form action="cash.php" method="post" name="form">
<table width="400" border="0" class="ui-widget">
<tr>
<th class="col">Date</th>
<th class="col">Customer</th>
<th class="col">Note</th>
<th class="col">Item</th>
<th class="col">Quantity</th>
<th class="col">Vat(%)</th>
</tr><input name="form" value="usr" type="hidden">
<tr>
<td><input size="10" name="date" id="day" value="22/7/2013" type="text"></td>
<td><input size="20" name="customer" id="customer" value="" type="text"></td>
<td><textarea onFocus="if(this.value=='n/a'){this.value=''}" id="txt" name="note" id="info">n/a</textarea></td>
<td><input onChange="sale_price(this.value)" size="20" name="item_name" id="item" value="" type="text"></td>
<td id="qt">
<input type="hidden" value="1" name="q" id="q">
<input size="10" name="qty" id="qty" value="1" type="text"></td>
<td><input onChange="" name="vat" size="5" id="vat" value="5" type="text"></td>
</tr>
<tr>
<th align="left" colspan="3">Price(each):
<input id="sale" name="sale" size="6" value="" type="text">
Total(+Vat):
<input name="price" disabled="disabled" id="profit" size="6" value="" type="text">
<input id="input" type="button" onClick="calculated()" value="Calculate"></th><th align="left" colspan="5">
<input onClick="return checkform()" name="add" value="Add new" id="input" type="submit"> <input name="go" size="4" value="" placeholder="10" id="lab" type="text">
<input name="goto" value="Go to S.N." id="input" type="submit">
<input value="Delete" name="delete" id="input" type="submit"></th>
</tr>
</table>
<table>
<tr>
<th style="width:25px;" class="scope">#</th>
<th style="width:145px;" class="scope">Date</th>
<th style="width:225px;" class="scope">Customer</th>
<th style="width:645px;" class="scope">Note</th>
<th style="width:205px;" class="scope">Item</th>
<th style="width:25px;" class="scope">Sale(each)</th>
<th style="width:25px;" class="scope">Bye(each)</th>
<th style="width:35px;" class="scope">Quantity</th>
<th style="width:25px;" class="scope">Vat</th>
</tr>
<tr>
<td class="y1">1</td>
<td class="y21">18 July 2013</td>
<td class="scope"></td>
<td class="y2"><i></i></td>
<td class="y2">Mobile</td>
<td class="y2">11111111</td>
<td class="y2">444444</td>
<td class="y2">4 Taka</td>
<td class="y2">10%</td>
</tr>
<tr>
<td class="y1">2</td>
<td class="y21">20 July 2013</td>
<td class="scope">Shiam</td>
<td class="y2"><i>asdf</i></td>
<td class="y2">Huawei Ascend G330</td>
<td class="y2">0</td>
<td class="y2">78</td>
<td class="y2">8 piece</td>
<td class="y2">10%</td>
</tr>
<tr>
<td class="y1">3</td>
<td class="y21">20 July 2013</td>
<td class="scope">Shiam</td>
<td class="y2"><i>asdf</i></td>
<td class="y2">Huawei Ascend G330</td>
<td class="y2">0</td>
<td class="y2">78</td>
<td class="y2">8 piece</td>
<td class="y2">10%</td>
</tr>
<tr>
<td class="y1">4</td>
<td class="y21">20 July 2013</td>
<td class="scope">jonson</td>
<td class="y2"><i>n/a</i></td>
<td class="y2">Motorola Razr HD</td>
<td class="y2">0</td>
<td class="y2">6000</td>
<td class="y2">2 piece</td>
<td class="y2">12%</td>
</tr>
<tr>
<td class="y1">17</td>
<td class="y21">22 July 2013</td>
<td class="scope">Shiamss</td>
<td class="y2"><i>dsadasd</i></td>
<td class="y2">Motorola Razr HD</td>
<td class="y2">0</td>
<td class="y2">8000</td>
<td class="y2">100 piece</td>
<td class="y2">5%</td>
</tr>
<tr>
<td class="y1">18</td>
<td class="y21">22 July 2013</td>
<td class="scope">Mister Don</td>
<td class="y2"><i>He is a mangow people.</i></td>
<td class="y2">Mobile equipment</td>
<td class="y2">0</td>
<td class="y2">1222</td>
<td class="y2">30 piece</td>
<td class="y2">5%</td>
</tr>
<tr>
<td class="y1">19</td>
<td class="y21">22 July 2013</td>
<td class="scope">Doen</td>
<td class="y2"><i>nothing</i></td>
<td class="y2">Sony Xperia S</td>
<td class="y2">0</td>
<td class="y2">8000</td>
<td class="y2">5 piece</td>
<td class="y2">2%</td>
</tr>
<tr>
<td class="y1">20</td>
<td class="y21">22 July 2013</td>
<td class="scope">Northern</td>
<td class="y2"><i>no need to do.</i></td>
<td class="y2">Sony Xperia S</td>
<td class="y2">0</td>
<td class="y2">8000</td>
<td class="y2">4 piece</td>
<td class="y2">5%</td>
</tr>
<tr>
<td class="y1">21</td>
<td class="y21">22 July 2013</td>
<td class="scope">Sael</td>
<td class="y2"><i>win to do</i></td>
<td class="y2">Sony Xperia S</td>
<td class="y2">0</td>
<td class="y2">4000</td>
<td class="y2">5 piece</td>
<td class="y2">5%</td>
</tr>
<tr>
<td class="y1">22</td>
<td class="y21">22 July 2013</td>
<td class="scope">Sael</td>
<td class="y2"><i>win to do</i></td>
<td class="y2">Sony Xperia S</td>
<td class="y2">0</td>
<td class="y2">4000</td>
<td class="y2">5 piece</td>
<td class="y2">5%</td>
</tr></table>
</form>
</div>
</body>
</html>

Remove whitespaces from input fields

I know there is a lot of topics about this and i checked a lot of them without success.
I have one input field in my form that creates a problem when it includes whitespaces. I already made it required so it's not possible to leave it empty or only add some whitespaces.
What i noticed is that i can add a text and just add a whitespace in the end or in the beginning and my work will fail.
Actually it should not be allowed to have any whitespaces at all, also not in the middle of the text but thats is to 99% not going to happend. What i understand you can only take away whitespaces in the beginning and in the end with trim function?
Could some helpful person help me what i have to add to my code that it works...?
Goal is that when i press submit the values from my five input fields should have no whitespaces at the beginning or in the end.
Here is my whole code.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mathys Lieferungen</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="jquery.ui.progressbar.js"></script>
<script type="text/javascript" src="validate.js"></script>
<script type="text/javascript">
function changeHiddenInput (objDropDown)
{
document.getElementById("hiddenInput").value = objDropDown.value;
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.timepicker').timepicker();
$('.datepicker').datepicker({dateFormat: 'dd.mm.yy'});
$('.button').button();
$('#myForm').submit(function() {
$('#formBox').hide();
var lnr = $("input[name=lnr]");
var auto_refresh = setInterval(
function()
{
$('#csv').load(lnr.val()+'_JobStatus.csv?'+new Date().getTime(),function(data){$(this).html(data).fadeIn("slow");}); });
$('#working').show();
$("#progressbar").progressbar();
var value = 0;
var timer = setInterval (function ()
{
$("div#progressbar").progressbar ("value", value);
value++;
if (value > 100) value = 0;
}, 60);
$url = "/BT_Mathys_LNr_export_0.1/services/BT_Mathys_LNr_export?method=runJob";
$i = 1
$('#myForm :input').each(function() {
$inputName = $(this).attr('name');
if ($inputName != 'submit') {
$url = $url + "&arg"+$i+"=--context_param%20"+$inputName+"="+$(this).val();
$i++
};
});
$('#runArea').load($url, function(){
$('#csv').hide();
$('#working').hide();
$('#resultBox').show();
$html = $('#runArea').html();
$('#csv').text($html);
});
return false;
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="style2.css">
<style type="text/css">
body {
background-color:#FFD8B2;
font-family: 'Century Schoolbook', Calibri,Arial;
font-size: 1em;
}
#logo {
position:absolute;
top:10px;
right:10px;
}
h1 {
margin-bottom:20px;
font-size: 1.5em;
font-weight:bold;
text-align:center;
}
#formBox, #resultBox, #working{
width:50%;
margin:auto;
margin-top:20%;
}
#resultBox, #working {
display:none;
}
#runArea{
border:none;
height:0;
width:0;
}
.button { font-family:Garamond; font-size: 15px; }
.ui-timepicker { font-family:Garamond; font-size: 11px; margin-left:40px }
.ui-datepicker { font-family:Garamond; font-size: 11px; margin-left:40px }
.ui-timepicker-hour-cell, .ui-timepicker-minute-cell { cursor:pointer; }
</style>
</head>
<body>
<div id="logo">
<img src="\\rzwsrv006\daten\Opacc_Betrieb\Marcel Mathys\Mathys\FLYER_LOGO.png" alt="Flyer" width="260" height="48">
</div>
<div id="formBox">
<h1>Lieferungen Mathys</h1>
<form method="get" id="myForm">
<table width="290px" height="auto" style="margin:auto;">
<tr>
<td><label for="lnr">Liefernummer:</label></td>
<td class="arg"><input type="text" name="lnr" class="required"></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<!--<tr>
<td><label for="vAbladezeit_spaet">Abladezeit spät:</label></td>
<td><input type="text" name="vAbladezeit_spaet" class="timepicker"></td>
</tr>
<tr>
<td><label for="vAbladezeit_frueh">Abladezeit früh:</label></td>
<td><input type="text" name="vAbladezeit_frueh" class="timepicker"></td>
</tr>-->
<tr>
<td><label for="vAbladetermin">Abladetermin:</label></td>
<td><input type="text" name="vAbladetermin" class="datepicker"></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr>
<td><label for="vLadezeit_spaet">Ladezeit spät:</label></td>
<td><input type="text" name="vLadezeit_spaet" class="timepicker"></td>
</tr>
<tr>
<td><label for="vLadezeit_frueh">Ladezeit früh:</label></td>
<td><input type="text" name="vLadezeit_frueh" class="timepicker"></td>
</tr>
<tr>
<td><label for="vLadedatum">Ladedatum:</label></td>
<td><input type="text" name="vLadedatum" class="datepicker"></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr>
<td>Mitarbeiter:</td>
<td><select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="e.schaer#flyer.ch" name="email">Ester Schär</option>
<option value="i.gerber#flyer.ch" name="email">Irene Gerber</option>
<option value="m.maeder#flyer.ch" name="email">Marion Mäder</option>
<option value="apelsinrepubliken#hotmail.com" name="email">Jens Frejd</option>
<option value="marcel.lack#symbium.ch" name="email">Marcel Lack</option>
</select></td>
</tr>
<tr>
<td></td>
<td><input type="hidden" name="hiddenInput" id="hiddenInput" /></td>
</tr>
<tr>
<td><p style="text-align:center;"><input type="submit" name="submit" id="submit" value=" Ausführen " class="button"></p></td>
<td></td>
</tr>
</table>
</form>
</div>
<div id="working" onkeydown ="my_onkeydown_handler();">Verarbeitung läuft, bitte warten und job nicht abbrechen. Job läuft im Hintergrund<div id="progressbar">
</div>
</div>
<div id="resultBox">
<h1 id="csv"></h1>
<p style="text-align:center;"><input type="button" onClick="location.href='./'" value=" << Neue Lieferung ausführen " class="button"></p>
<!--<p style="text-align:left;">Rückmeldung:<br>
<textarea id="csv" style="width:100%;height:300px;"></textarea>
</p>-->
</div>
<iframe id="runArea" />
</body>

How about just using a regex to replace the white-space:
str.replace(/\s/g, "");

Develop Reference

JavaScript is the programming language of the Web.

Display on load not just when checked - javascript

Related

Why is the first table column skipped?

on selection of checkbox display textarea. if it's not selected textarea value should empty

HTML submit button doesnt nvigate to the respective URL's

Fill form field with ajax request not working in other file

Remove whitespaces from input fields

Categories

Resources