脱机HTML / Jquery表单 - 查看输入数据

时间：2014-01-22 23:15:48

标签： javascript jquery html forms

我对此很新，所以我会尽力解释我的情况。

我要做的是创建一个包含多个输入字段的表单，包括文本，下拉列表和复选框。填写完信息后，我想单击一个提交按钮，只有一个新页面填充了数据输入或修改过的字段。例如，某些字段可能不适用，并且每次都可能没有数据输入。我想在选择某些单选按钮时只显示某些字段，但此时并不重要。该文档仅在离线状态下使用，必须能够完全在客户端进行处理。

从我的研究中可以看出，JQuery可能是实现这一目标的最好选择，但我不确定我应该使用哪种功能。

这是我正在使用的当前代码。 textarea显然是错误的，只显示原始代码，提交按钮生成一个像我想要的页面，但它显示我的实际形式。

非常感谢任何指导。如果您还有其他问题，请与我们联系。

<!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>

<script type="text/javascript">

function displayHTML(form) {
  var inf = form.htmlArea.value;
  win = window.open(", ", 'popup', 'toolbar = no, status = no');
  win.document.write("" + inf + "");
}


</script>


</head>



<body id="main_body" >




<form>
  <textarea name="htmlArea" rows="50" cols="150">
  <H3>Data</H3>

  <ul >

                    <li id="li_4" >
        <label class="description" for="element_4">FIELD </label> 
        <span>
            <input id="element_4_1" name= "element_4_1" class="element text" maxlength="255" size="8" value=""/>
            <label>FIELD</label>
        </span>
        <span>
            <input id="element_4_2" name= "element_4_2" class="element text" maxlength="255" size="14" value=""/>
            <label>FIELD</label>
        </span> 
        </li>       <li id="li_1" >
        <label class="description" for="element_1">FIELD </label>
        <div>
            <input id="element_1" name="element_1" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       <li id="li_2" >
        <label class="description" for="element_2">FIELD </label>
        <div>
            <input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       <li id="li_3" >
        <label class="description" for="element_3">FIELD </label>
        <div>
            <input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       <li class="section_break">
            <h3>Section Break</h3>
            <p></p>
        </li>       <li id="li_18" >
        <label class="description" for="element_18">FIELD</label>
        <div>
        <select class="element select medium" id="element_18" name="element_18"> 
            <option value="" selected="selected"></option>
<option value="1" >FIELD</option>
<option value="2" >FIELD</option>
<option value="3" >FIELD</option>
<option value="4" >FIELD</option>
<option value="5" >FIELD</option>
<option value="6" >FIELD</option>

        </select>
        </div> 
        </li>       <li id="li_7" >
        <label class="description" for="element_7">FIELD </label>
        <div>
            <input id="element_7" name="element_7" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       <li id="li_19" >
        <label class="description" for="element_19">FIELD </label>
        <div>
        <select class="element select medium" id="element_19" name="element_19"> 
            <option value="" selected="selected"></option>
<option value="1" >FIELD</option>
<option value="2" >FIELD</option>
<option value="3" >FIELD</option>
<option value="4" >FIELD</option>
<option value="5" >FIELD</option>
<option value="6" >FIELD</option>

        </select>
        </div> 
        </li>       <li id="li_20" >
        <label class="description" for="element_20">FIELD </label>
        <span>
            <input id="element_20_1" name="element_20" class="element radio" type="radio" value="1" />
<label class="choice" for="element_20_1">FIELD</label>
<input id="element_20_2" name="element_20" class="element radio" type="radio" value="2" />
<label class="choice" for="element_20_2">FIELD</label>

        </span> 
        </li>       <li id="li_6" >
        <label class="description" for="element_6">FIELD </label>
        <div>
            <input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       <li id="li_21" >
        <label class="description" for="element_21">FIELD </label>
        <span>
            <input id="element_21_1" name="element_21_1" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_21_1">FIELD</label>
<input id="element_21_2" name="element_21_2" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_21_2">FIELD</label>
<input id="element_21_3" name="element_21_3" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_21_3">FIELD</label>
<input id="element_21_4" name="element_21_4" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_21_4">FIELD</label>
<input id="element_21_5" name="element_21_5" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_21_5">FIELD</label>
<input id="element_21_6" name="element_21_6" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_21_6">FIELD</label>

        </span> 
        </li>       <li id="li_9" >
        <label class="description" for="element_9">FIELD </label>
        <div>
            <input id="element_9" name="element_9" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       <li id="li_22" >
        <label class="description" for="element_22">FIELD </label>
        <span>
            <input id="element_22_1" name="element_22_1" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_22_1">FIELD</label>
<input id="element_22_2" name="element_22_2" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_22_2">FIELD</label>
<input id="element_22_3" name="element_22_3" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_22_3">FIELD</label>
<input id="element_22_4" name="element_22_4" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_22_4">FIELD</label>
<input id="element_22_5" name="element_22_5" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_22_5">FIELD</label>
<input id="element_22_6" name="element_22_6" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_22_6">FIELD</label>
<input id="element_22_7" name="element_22_7" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_22_7">FIELD</label>
<input id="element_22_8" name="element_22_8" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_22_8">FIELD</label>
<input id="element_22_9" name="element_22_9" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_22_9">FIELD</label>

        </span> 
        </li>       <li id="li_8" >
        <label class="description" for="element_8">FIELD</label>
        <div>
            <input id="element_8" name="element_8" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       <li id="li_23" >
        <label class="description" for="element_23">FIELD </label>
        <span>
            <input id="element_23_1" name="element_23_1" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_23_1">FIELD</label>
<input id="element_23_2" name="element_23_2" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_23_2">FIELD</label>
<input id="element_23_3" name="element_23_3" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_23_3">FIELD</label>
<input id="element_23_4" name="element_23_4" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_23_4">FIELD</label>
<input id="element_23_5" name="element_23_5" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_23_5">FIELD</label>
<input id="element_23_6" name="element_23_6" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_23_6">FIELD</label>
<input id="element_23_7" name="element_23_7" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_23_7">FIELD</label>
<input id="element_23_8" name="element_23_8" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_23_8">FIELD</label>
<input id="element_23_9" name="element_23_9" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_23_9">FIELD</label>
<input id="element_23_10" name="element_23_10" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_23_10">FIELD</label>
<input id="element_23_11" name="element_23_11" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_23_11">FIELD</label>

        </span> 
        </li>       <li id="li_10" >
        <label class="description" for="element_10">FIELD </label>
        <div>
            <input id="element_10" name="element_10" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       <li id="li_24" >
        <label class="description" for="element_24">FIELD  </label>
        <div>
        <select class="element select medium" id="element_24" name="element_24"> 
            <option value="" selected="selected"></option>
<option value="1" >FIELD</option>
<option value="2" >FIELD</option>
<option value="3" >FIELD</option>
<option value="4" >FIELD</option>
<option value="5" >FIELD</option>
<option value="6" >FIELD</option>
<option value="7" >FIELD</option>
<option value="8" >FIELD</option>
<option value="9" >FIELD</option>
<option value="10" >FIELD</option>
<option value="11" >FIELD</option>
<option value="12" >FIELD</option>

        </select>
        </div> 
        </li>       <li id="li_14" >
        <label class="description" for="element_14">FIELD</label>
        <div>
            <input id="element_14" name="element_14" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       <li id="li_15" >
        <label class="description" for="element_15">FIELD </label>
        <div>
            <input id="element_15" name="element_15" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       <li id="li_16" >
        <label class="description" for="element_16">FIELD </label>
        <div>
            <input id="element_16" name="element_16" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       <li id="li_25" >
        <label class="description" for="element_25">FIELD </label>
        <div>
        <select class="element select medium" id="element_25" name="element_25"> 
            <option value="" selected="selected"></option>
<option value="1" >FIELD</option>
<option value="2" >FIELD</option>
<option value="3" >FIELD</option>
<option value="4" >FIELD</option>
<option value="5" >FIELD</option>
<option value="6" >FIELD</option>
<option value="7" >FIELD</option>
<option value="8" >FIELD</option>
<option value="9" >FIELD</option>
<option value="10" >FIELD</option>
<option value="11" >FIELD</option>
<option value="12" >FIELD</option>
<option value="13" >FIELD</option>

        </select>
        </div> 
        </li>       <li id="li_17" >
        <label class="description" for="element_17">FIELD </label>
        <div>
            <input id="element_17" name="element_17" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       <li class="section_break">
            <h3>Section Break</h3>
            <p></p>
        </li>       <li id="li_12" >
        <label class="description" for="element_12">FIELD </label>
        <div>
            <textarea id="element_12" name="element_12" class="element textarea medium"></textarea> 
        </div> 






</textarea>
  <br>
  <input type="button" value=" Work? " onclick="displayHTML(this.form)">
</form>    



</div>

    </body>
</html>

0 个答案:

没有答案
相关问题
最新问题