Is there a max length on alert()?
If so is there a way to overcome it...different tool with larger max length?
Here is massive outptut from alert...note truncated at the end. The truncated content renders in the browser so I know it is there.
|<!--p|2--><!--FRAMEWORK
-->
<div id="Ba">
<div id="Ba1">
<!--ACCOUNT
--->
<div id="account">
<img id="picture" class="b" src="foo/images/generic_small.jpg" alt="">
</img>
<div id="wrap_menu_new">
<p id="top_new">
Test Account </p>
<div id="wrap_drop_down_new">
<p id="signout_button" class="drop_down_new">Sign Out
</p>
<p id="settings_button" class="drop_down_new">Settings
</p>
</div>
</div>
</div>
<!--FRAMEWORK
--->
</div>
</div>
<div id="Bb">
<div id="Bb1">
<!--BOOKMARKS
--->
<div id="bookmark_hold">
<form id="bookmark" method="post" name="bookmark">
<div id="bookmark_url_wrap">
<input id="bookmark_input_url" name="url" type="text" maxlength="2048" class="bookmark">
<p id="bookmark_label_url">Url
</p>
</input>
</div>
<div id="bookmark_title_wrap">
<input id="bookmark_input_title" name="title" type="text" maxlength="32" class="bookmark">
<p id="bookmark_label_title">Title
</p>
</input>
</div>
<div id="bookmark_tag_wrap">
<input id="bookmark_input_tag" name="tag" type="text" maxlength="8" class="bookmark">
<p id="bookmark_label_tag">Tag
</p>
</input>
</div>
<input type="hidden" name="domain" value="not_domain">
</input>
<input type="hidden" name="favicon" value="not_favicon">
</input>
<p id="bookmark_flip_button">Delete
</p>
<p id="bookmark_add_button">Add
</p>
<div id="bookmark_response" class="response">
</div>
</form>
<div id="tag_bookmark_fill">
<div id="tag_fill">
<!--TAG FILL
-->
</div>
<div id="space">
</div>
<div id="bookmark_fill">
<!--BOOKMARK FILL
-->
</div>
</div>
</div>
<!--TWEETS
-->
<div id="tweet_hold">
<form id="tweet" method="post" name="tweet">
<div id="tweet_input_wrap">
<input id="tweet_input" name="tweet" type="text" maxlength="40">
<p id="tweet_label">Comment
</p>
</input>
</div>
<p id="tweet_button" href="javascript:void(0)">Share
</p>
<div id="tweet_response" class="response">
</div>
<div id="tweet_fill">
<!--TWEET FILL
-->
</div>
</form>
</div>
<!--SETTINGS
-->
<form id="privacy">
<input type="radio" id="radio1" name="rdo">
<label for="radio1"></label>
<p class="privacy_title">Normal</p>
<p class="privacy_content">Your bookmarks are posted to the feed.</p>
<input type="radio" id="radio2" name="rdo">
<label for="radio2"></label>
<p class="privacy_title">Private</p>
<p class="privacy_content">Your bookmarks are not posted to the feed.</p>
<!--
<input type="radio" id="radio3" name="rdo">
<label for="radio3"></label>
<p class="privacy_title">Secret</p>
<p class="privacy_content">Same as private and all of your data is encrypted using NSA approved algorithms.</p>
-->
<p id="save_button" class="wordpress">Save
</p>
<p id="cancel_button" class="wordpress">Cancel
</p>
</form>
<!--FRAMEWORK
--->
</div>
</div>
<!--DYNAMIC CONTENT
-->
<script type='text/javascript'>new Arc.Shared().set( 'load_on', 1 );</script><div id='bookmark_data'>[{"id":"1","0":"1","title":"ebay ","1":"ebay ","url":"http:\/\/ebay.com","2":"http:\/\/ebay.com","domain":"ebay.com","3":"ebay.com","tag":"buy","4":"buy","favicon":"http:\/\/www.ebay.com\/favicon.ico","5":"http:\/\/www.ebay.com\/favicon.ico"},{"id":"1","0":"1","title":"gilt","1":"gilt","url":"http:\/\/www.gilt.com\/","2":"http:\/\/www.gilt.com\/","domain":"gilt.com","3":"gilt.com","tag":"buy","4":"buy","favicon":"http:\/\/assets2.giltcdn.com\/assets\/201205231954-27b1d5fa2c\/images\/default\/util\/favicon.ico","5":"http:\/\/assets2.giltcdn.com\/assets\/201205231954-27b1d5fa2c\/images\/default\/util\/favicon.ico"},....
Yes, browsers do limit the maximum length of alert messages.
Why you you ever want to alert() such a huge blob of text anyway? For debugging you should use console.log() which works in all modern browsers or create a div/textarea and show the data in there.
Related
basically I am not a coder. I just trying to learn about Javascript and is it possible to make a toggle to a specific class?
for HTML
<section class="book_shelf">
<h2>Unfinished Section</h2>
<div id="incompleteBookshelfList" class="book_list">
<article class="book_item">
<h3>Book Title</h3>
<p>Penulis: John Doe</p>
<p>Tahun: 2002</p>
<div class="action">
<button class="green">Finished</button>
<button class="green">Edit</button>
<button class="red">Delete</button>
</div>
<section class="input_section edit_section">
<form id="editBook">
<div class="input">
<input id="editTitle" required="">
<input id="editAuthor" required="">
<input id="editYear" required="">
</div>
<div class="action">
<button class="black">Cancel</button>
<button class="grey">Save</button></div> </form>
</section>
</article>
<article class="book_item">
<h3>Book Title2</h3>
<p>Penulis: John Doe</p>
<p>Tahun: 2002</p>
<div class="action">
<button class="green">Finished</button>
<button class="green">Edit</button>
<button class="red">Delete</button>
</div>
<section class="input_section edit_section">
<form id="editBook">
<div class="input">
<input id="editTitle" required="">
<input id="editAuthor" required="">
<input id="editYear" required="">
</div>
<div class="action">
<button class="black">Cancel</button>
<button class="grey">Save</button></div> </form>
</section>
</article>
<article class="book_item">
<h3>Book Title 3</h3>
<p>Penulis: John Doe</p>
<p>Tahun: 2002</p>
<div class="action">
<button class="green">Finished</button>
<button class="green">Edit</button>
<button class="red">Delete</button>
</div>
<section class="input_section edit_section">
<form id="editBook">
<div class="input">
<input id="editTitle" required="">
<input id="editAuthor" required="">
<input id="editYear" required="">
</div>
<div class="action">
<button class="black">Cancel</button>
<button class="grey">Save</button></div> </form>
</section>
</article>
<br>
</div>
</section>
for CSS
.edit_section {
margin-top: 20px;
display: none;
}
.edit_section.active {
display: block;
}
so my objective is when I click the edit button, the class edit_section has an active class, but the other edit_section classes from another article tag still collapsed. Is that possible without ID tag? I need to do it with pure JavaScript, Thanks guys.
I have just learnt Google Apps Script a week to build a small online survey for my work.
Everything work fine, until I added 1 more question about taking Photo in the Index. Before that, it worked OK with 1 element taking Photo, but when I added 1 more element than an "Uncaught" error appear. I have tried to find this issue but it seems my English is not good enough to "google" right search key and didn't find any same error.
Please see my Index HTML code below: The error occurs when I added element with id "ds_q_Q06"
<!DOCTYPE html>
<html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta http-equiv="Expires" content="0" />
<meta name="msapplication-TileColor" content="#0072C6" />
<title>GAS Question Templates</title>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<?!= include('CSS'); ?>
<?!= include('JS'); ?>
<?!= include('Json_data'); ?>
<?!= include('Routing'); ?>
</head>
<body>
<form class="form-survey test" id="mainForm">
<div class="survey-info" style="display:none;">
<input type="text" name="respID" id="respId" class="respId" ></input>
<input type="text" name="currentPage" id="currentPage" class="currentPage" ></input>
<input type="text" name="routing" id="routing" class="routing" ></input>
</div>
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q01_1" id="ds_q_Q01_1">
<div class="q-question">
1. Điểm bán:
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>Vui lòng chọn...</option>
<option value="Điểm bán mở cửa - Khảo sát TC">Điểm bán mở cửa - Khảo sát TC</option>
<option value="Điểm bán không tìm thấy">Điểm bán không tìm thấy</option>
<option value="Điểm bán thay đổi KD">Điểm bán thay đổi KD</option>
<option value="Điểm bán đóng cửa">Điểm bán đóng cửa</option>
<option value="Điểm bán mở cửa - Từ chối hợp tác">Điểm bán mở cửa - Từ chối hợp tác</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsImage ds-question" name="ds_q_Q01_2" id="ds_q_Q01_2">
<div class="q-question">
Chụp hình
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<input type="file" accept="image/*" name="file" id="Q02_img"></input>
<div class="button">
<div class="btnUpload" >Upload</div>
</div>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsText ds-question" name="ds_q_Q02" id="ds_q_Q02">
<div class="q-question">
2. Ghi chú
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<textarea type="text" name="answer" class="answer" ></textarea>
</div>
</div>
</div>
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q03_1" id="ds_q_Q03_1">
<div class="q-question">
3. Tên điểm bán / Biển hiệu:
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>Vui lòng chọn...</option>
<option value="Đúng">Đúng</option>
<option value="Sai">Sai - Cập nhật tên điểm bán mới</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsText ds-question optional" name="ds_q_Q03_2" id="ds_q_Q03_2">
<div class="q-question">
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" placeholder="Nhập tên điểm bán..." ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q04_1" id="ds_q_Q04_1">
<div class="q-question">
4. Địa chỉ:
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>Vui lòng chọn...</option>
<option value="Đúng">Đúng</option>
<option value="Sai">Sai</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsText ds-question optional" name="ds_q_Q04_2" id="ds_q_Q04_2">
<div class="q-question">
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" placeholder="Nhập địa chỉ..." ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsSingle ds-question" name="ds_q_Q05" id="ds_q_Q05">
<div class="q-question">
5. Single Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<ul>
<li>
<input type="radio" name="ds_sa_Q01" id="Q01_C1" class="dsSingleChoice"></input>
<label for="Q01_C1" class="answerLabel">Câu 2</label>
</li>
<li>
<input type="radio" name="ds_sa_Q01" id="Q01_C2" class="dsSingleChoice"></input>
<label for="Q01_C2" class="answerLabel">Câu 3</label>
</li>
<li>
<input type="radio" name="ds_sa_Q01" id="Q01_C3" class="dsSingleChoice"></input>
<label for="Q01_C3" class="answerLabel">Câu 4</label>
</li>
</ul>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
</div>
**<div class="main-content">
<div class="dsImage ds-question" name="ds_q_Q06" id="ds_q_Q06">
<div class="q-question">
6. Take Photo
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<input type="file" accept="image/*" id="Q06_img"></input>
<div class="button">
<div class="btnUpload" >Upload</div>
</div>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" ></input>
</div>
</div>
</div>**
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q07" id="ds_q_Q07">
<div class="q-question">
7. Drop Down Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>------</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsText ds-question" name="ds_q_Q08" id="ds_q_Q08">
<div class="q-question">
8. Text / Search Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsSearch ds-question" name="ds_q_Q09" id="ds_q_Q09">
<div class="q-question">
9. Text / Search Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" ></input>
</div>
</div>
</div>
<div class="ds-navigator">
<table>
<tbody>
<tr>
<td class="left"><div class="button dsPrev">Previous Page</div></td>
<td class="right"><div class="button dsNext">Next Page</div></td>
</tr>
</tbody>
</table>
</div>
<div class="survey-done hidden"><div class="dsEndMessage">Thank you for submitting!</div></div>
<div class="survey-loading hidden">
<div class="loader">
<div class="loader-wheel"></div>
<div class="loader-text"></div>
</div>
</div>
</form>
</body>
</html>
Here is my app script that input data when click on submit button
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function uploadFiles(imageFile) {
//var folderId = getFolderID("App_Img");
var blob = Utilities.newBlob(imageFile.bytes, imageFile.mimeType, imageFile.filename);
var file = DriveApp.getFolderById("ID_FOLDER");
try {
var child = file.getFoldersByName(imageFile.folderName).next();
}
catch(e){
var child = file.createFolder(imageFile.folderName);
}
child.createFile(blob);
return {fileURL:file.getUrl(),fileDir:imageFile.fileDir};
}
function getFolderID(folderName)
{
var folders = DriveApp.getFolders();
while (folders.hasNext()) {
var folder = folders.next();
if(folder.getName() == folderName)
{
return folder.getId();
}
}
}
**
function inputData(formSurvey){
var url = "URL_GOOGLE_SHEETS";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Sheet1");
Logger.log(ws.getName());
console.log(ws.getName());
var data = [];
for (var i = 0; i<formSurvey.answer.length; i++){
data.push(formSurvey.answer[i]);
}
Logger.log(data.join(";"));
console.log(data.join(";"));
//ws.appendRow(data);
}
**
Here is my JS when click Submit button (last page)
function endSurvey(){
$(".survey-loading").show(0).delay(5000).hide(0);
google.script.run.withSuccessHandler(submitSuccess).inputData($("#mainForm")[0]);
}
function submitSuccess(){
$(".survey-done").toggleClass("hidden",false);
}
The error is quite weird , without any more information.
Please help me on this.
I've faced a similar situation with an "uncaught" console error after running some specific server side function. After a day of searching where the problem is, in my case It was caused by running the google app script from one account while logged in chrome to another one.
Once I changed and opened the app from the same account as logged in to Chrome, the problem disappeared.
Hello I have a problem with this following code :
<form id="signon_form" method="post" action="r1.php" class="form-signin" name="">
<div id="error" class="error">
<img src="images/error_button.png" /> <span id="error_message"></span>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="username_input_label" class="user_label" for=
"username_input" style=""></label> <input id="username_input" name=
"username" type="text" class="input_fields username_input" autocorrect=
"off" autocapitalize="off" autocomplete="off" tabindex="1" placeholder="example#email.ca"/>
</div>
<div class="input_info help_icon">
<a id="help_icon" class="help_link" href="javascript:;" data-toggle="modal" data-target="#myModal" tabindex="3">
<img src="images/icons/helpIcon.png"><br/>
Help
</a>
</div>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="password_input_label" class="user_label" for=
"password_input" style="">Password</label> <input id="password_input"
name="password" type="password" class="input_fields" tabindex="2" />
</div>
<div class="input_info">
<button type="button" id="account_number_popover_password" class=
"account_number_popover ic icon-shaw-question" data-toggle="modal"
data-target="#myModal"></button>
</div>
</div>
<div class="clearfix"></div>
<div id="checkbox-section" class="checkbox-section">
<div id="checkbox" class="checkboxFive">
<input type="checkbox" id="" class="persistent_check" name="" checked=
"checked" tabindex="4"/> <label id="checkboxMask" class="ic" for=""></label>
</div>
<div id="checkbox-label" class="checkbox-label">
<label>Remember Shaw email</label>
</div>
</div>
<div style="text-align:center">
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class=
"button button_disabled" tabindex="5">Sign in</button>
</div>
<div id="description-section" class="description-section">
<center>
<div id="forgot" class="description_one">
To recover your email address or to reset your password visit the Internet section in My Account.
</div>
<div id="create_new_account" class="description_two hidden-xs hidden-sm hidden-md">
<span class="dont-have-account-phone">Don't have an account?</span>
<a target="_self" data-event="navigation-element" data-value=
"signon|body|create-one-now-link" id="create_one_now" href=
"#"><span class=
"dont-have-account-desktop">Don't have an account?</span>
<span class="create-one-now-url">Create one now.</span></a>
</div>
</center>
</div><input type="hidden" id="anchor" name="anchor" value="" />
</form>
you see that I have an action in the form which is r1.php and the button has a onclick="location.href='r1.php'" if I delete it the Sign In button doesn't work I want to get rid of it can you help me guys I'm a begginer and experimenting with website's source code to learn a little please if you could help me I'll be so greatfull
What you are looking for is an actual form submission, rather than a simple redirection.
Instead of:
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class="button button_disabled" tabindex="5">Sign in</button>
You need an input type of submit:
<input type="submit" value="Submit" id="signin_submit">
This tells the button to actual POST the data. Note that you may need to slightly tweak your CSS to give the desired display.
Hope this helps!
I am new to AngularJS. So, I have a form and buttons that I have created. But, for some reason, my form is not disabled. All I want to do is when the user comes to the page, I want the form to be disabled. Thank you.
Here is my code.
<a class="back" href="#/user">Back</a>
<button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
Edit
</button>
<button type="submit" class="submit" ng-show="!inactive" ng-click="inactive = !inactive">Save</button>
<div class="people-view">
<h2 class="name">{{audience.firstName}}</h2>
<h2 class="name">{{audience.lastName}}</h2>
<span class="title">{{audience.email}}</span>
<span class="date">{{audience.website}} </span>
</div>
<div class="list-view">
<form>
<fieldset ng-disabled="inactive">
<legend>Basic Info</legend>
<b>First Name:</b>
<input type="text" ng-model="audience.firstName">
<br>
<b>Last Name:</b>
<input type="text" ng-model="audience.lastName">
<br>
<b>Email:</b>
<input type="email" ng-model="audience.email">
</fieldset>
</form>
</div>
</div>
JS
app.controller('MainCtrl', function($scope) {
$scope.inactive = true;
}
Is this close to what you're looking for?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="">
Click here to disable all the form fields:<input type="checkbox" ng-model="all"><br>
<br>
<a class="back" href="#/user">Back</a>
<button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive"> Edit </button>
<button type="submit" class="submit" ng-show="!inactive" ng-click="inactive = !inactive">Save</button>
<div class="people-view">
<h2 class="name"> {{audience.firstName}}</h2>
<h2 class="name">{{audience.lastName}}</h2>
<span class="title">{{audience.email}}</span>
<span class="date">{{audience.website}} </span>
</div>
<div class="list-view">
<form>
<fieldset ng-disabled>
<legend>Basic Info</legend>
<b>First Name:</b>
<input type="text" ng-model="audience.firstName" ng-disabled="all">
<br>
<b>Last Name:</b>
<input type="text" ng-model="audience.lastName" ng-disabled="all">
<br>
<b>Email:</b>
<input type="email" ng-model="audience.email" ng-disabled="all">
</fieldset>
</form>
</div>
</div>
Please take a look at this JSFiddle!
https://jsfiddle.net/rickydam/fstkcs26/
Wrap all your fields in fieldset and use ngDisabled directive like this:
<fieldset ng-disabled="inactive"> ... input fields ...</fieldset>
It will automatically disable all inputs inside the fieldset.
Then in controller set $scope.inactiveto true.
Why not use the native html attribute?
<input type="text" ng-model="audience.firstName" disabled>
Or you can use the ng-disabled directive.
<input type="text" ng-model="audience.firstName" ng-disabled="inactive">
I have the current code below, which is working. The problem is this code will be in a form and i can't have nested forms. How do i change the code, so this works with a div parent element instead of a form?
<form>
<script type="text/javascript">
function inmet(form){
form.in2met.value = ((form.inch.value -0) * 25.4).toFixed(2)
}
</script>
<div id="calcbody">
<div class="calctitle">Convert <br />Inches to Millimetres</div>
<div class="singcalcquestion">Enter the Inches:
<input class="box1" type="text" name="inch" />
</div>
<div class="singsubmit">
<input onclick="inmet(this.form)" type="button" value="GO" />
</div>
<div class="singcalcanswer">Equals in Millimetres:<br />
<input class="calcbox2" type="text" readonly="readonly" name="in2met" />
</div>
</div>
</form>
One option would be to use Element.getElementsByClassName() or a similar method to get the input field you want:
<div id="form-root">
<script type="text/javascript">
function inmet(calcRoot){
calcRoot.getElementsByClassName('calcbox2')[0].value = ((form.inch.value -0) * 25.4).toFixed(2);
}
// example: inmet(document.getElementById('form-root'))
</script>
<div id="calcbody">
<div class="calctitle">Convert <br />Inches to Millimetres</div>
<div class="singcalcquestion">Enter the Inches: <input class="box1" type="text" name="inch" /></div>
<div class="singsubmit"><input onclick="inmet(document.getElementById('form-root'))" type="button" value="GO" /></div>
<div class="singcalcanswer">Equals in Millimetres:<br /><input class="calcbox2" type="text" readonly="readonly" name="in2met" /></div>
</div>
</div>
Not the cleanest solution, but it should do the job:
<div>
<script>
function inmet() {
document.getElementById('in2met').value = ((document.getElementById('inch').value - 0) * 25.4).toFixed(2)
}
</script>
<div id="calcbody">
<div class="calctitle">Convert <br/>Inches to Millimetres</div>
<div class="singcalcquestion">
<label for="inch">Enter the Inches:</label>
<input class="box1" type="text" name="inch" id="inch"/>
</div>
<div class="singsubmit">
<input onclick="inmet()" type="button" value="GO"/>
</div>
<div class="singcalcanswer">
<label for="in2met">Equals in Millimetres:</label>
<input class="calcbox2" type="text" readonly="readonly" name="in2met" id="in2met"/>
</div>
</div>
</div>