在NetSuite中创建响应式表单 [英] creating a responsive form within NetSuite
问题描述
NetSuite中的自定义表单要求使用字段标签，例如NLFORM和NLCATEGORY等.但是，我不清楚如何将这些标签正确地集成到响应表单的模板中，这样才能正常工作.
custom forms within NetSuite require the use of field tags like NLFORM and NLCATEGORY, etc. However it's unclear to me how to incorporate these tags properly into the template of a responsive form so it works.
这是我到目前为止所拥有的:
Here's what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<Title>General Contact Form</Title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<style type="text/css">
h1, p {
font-family: 'Lato', sans-serif;
}
</style>
</head>
<Body>
<div class="container">
<h1>
<center>Submit a Message</center>
</h1>
<form class="form-horizontal">
<NLFORM>
<br>
<fieldset>
<legend>How Can We Help You?</legend>
<div class="form-group">
<p class="control-label col-sm-2">Type of Inquiry*</p>
<div class="col-sm-10">
<NLCATEGORY>
</div>
</div>
<div class="form-group">
<p class="control-label col-sm-2">Subject*</p>
<div class="col-sm-10"><NLTITLE> </div></div>
<div class="form-group">
<p class="control-label col-sm-2">Message*</label>
<div class="col-sm-10"><NLINCOMINGMESSAGE> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLFILE">File Upload</label>
<div class="col-sm-10"><NLFILE> </div></div>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<div class="form-group">
<label class="control-label col-sm-2" for="first-name">First Name*</label>
<div class="col-sm-10">
<NLFIRSTNAME></div></div>
<div class="form-group">
<label class="control-label col-sm-2" for ="NLLASTNAME">Last Name*</label>
<div class="col-sm-10"><NLLASTNAME></div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLEMAIL">E-mail*</label>
<div class="col-sm-10"><NLEMAIL> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLPHONE">Phone</label>
<div class="col-sm-10"><NLPHONE> </div></div>
<div class="form-group">
<label class="control-label col-sm-2" for="NLCOUNTRY">Country</label>
<div class="col-sm-10"><NLCOUNTRY> </div></div>
</fieldset>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Submit"> - or -
<input type="button" value="Reset" onclick="page_reset(); return false;"></div></div>
<NLSUBSIDIARY>
<br>
<p align=center>Fields marked with an<img src="http://shopping.na2.netsuite.com/core/media/media.nl?id=35211&c=4382721&h=2eef11083f182592e0bb">are required.</p>
</form>
</Body>
</HTML>
表单字段确实会响应于调整浏览器窗口的大小，但是NetSuite无法使用此特定表单正确创建记录.谁能看到我在这里做错了！?
the form fields do respond to resizing the browser window, but NetSuite is not able to properly create a record using this particular form. can anyone see what I'm doing wrong here!?
这是表格URL: http://www.boxcomponents.com/support-form
NetSuite字段标签是从UI内控制的；因此字段宽度是固定的，不接受百分比；也有具有固定宽度的下拉菜单，这有点令人讨厌.如果不删除NetSuite的所有标签，我似乎无法正确响应表单.
NetSuite Field Tags are controlled from within the UI; so field width is fixed and doesn't accept percentages; there are also drop-down menus which have a fixed width, which is mildly annoying. I can't seem to get the form to respond properly without removing all of NetSuite's tags.
推荐答案
您需要做的是在打开表单时使用脚本对其进行处理.在</form>标记之后添加脚本标记，以从表单元素中添加和删除类.
What you'll need to do is process the form with script when it opens. Add a script tag after the </form> tag to add and remove classes from the form elements.
这也是多余的，您最终会遇到某种形式的损坏:
Also this is redundant and you'll end up with some sort of broken form:
<form class="form-horizontal">
<NLFORM>
例如，您将拥有:
<NLFORM>
...
</form>
<script>
jQuery(function($){
$("#main_form").addClass('form-horizontal');
});
</script>
这篇关于在NetSuite中创建响应式表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
