1 $(document).ready(function () { 2 $('#radioExtranet').on('click', function () { showProjectInformation() }); 3 $('#radioCorp').on('click', function () { hideProjectInformation() }); 4 $('.add').on("click", function () { addServerIP(this) }); 5 6 $("form").submit(function () { 7 8 //if ($("#wo").val() != "")//验证 9 if (true)//验证ip1~3不为空，ComputerName不为空，Friendly name不为空，pitid&sraid 不为空 10 { 11 if ($("#radioExtranet").val() == "Extranet") { 12 $.ajax({ 13 url: "/ScanNow/RadioBtnType", 14 type: "Post", 15 //dataType: "json", 16 data: { TypeName: $("#radioExtranet").val()}, 17 //success: function (data) { 18 // if (data.wuyang == "1") { 19 // alert(data.wuyang) 20 // alert(data.yangwu); 21 // //location.reload(); 22 // } else { 23 // alert(data.yangwu); 24 // } 25 //} 26 }) 27 28 } 29 else { 30 31 } 32 return true; 33 } 34 else { 35 alert("Some fields are empty! Please fill in the item."); 36 37 return false; 38 } 39 40 }); 41 } 42 ); 43 44 function hideProjectInformation() { 45 $("#tabProjectInformation").hide(); 46 $("#radioCorp").attr('value', 'Corp'); 47 $("#radioExtranet").attr('value', '1'); 48 49 50 } 51 function showProjectInformation() { 52 $("#tabProjectInformation").show(); 53 $("#radioCorp").attr('value', '0'); 54 $("#radioExtranet").attr('value', 'Extranet'); 55 } 56 57 function addServerIP(el) { 58 var account = $('#iptable').find("tr").length; 59 var trServerIP = $("#ServerIP1").clone(); 60 trServerIP.attr("id", "ServerIP" + account); 61 trServerIP.attr("class", "addServerIP"); 62 trServerIP.find(".labServerIP").remove(); 63 trServerIP.find("img").attr("src", "/Content/Images/Add.png"); 64 trServerIP.find("img").attr("title", "add"); 65 trServerIP.find("img").attr("alt", "add"); 66 trServerIP.find("img").attr("class", "add"); 67 68 $("#ServerIP"+(account-1)).after(trServerIP); 69 70 $("#ServerIP" + (account - 1)).find("img").attr("src", "/Content/Images/Remove.png"); 71 $("#ServerIP" + (account - 1)).find(".add").attr("title", "remove"); 72 $("#ServerIP" + (account - 1)).find(".add").attr("alt", "remove"); 73 $("#ServerIP" + (account - 1)).find(".add").attr("class", "remove"); 74 $('.add').off("click"); 75 $('.add').on("click", function () { addServerIP(this) }); 76 $('.remove').off("click"); 77 $('.remove').on("click", function () { removeServerIP(this) }); 78 79 } 80 function removeServerIP(el) { 81 82 $(el).parent().parent().parent("tr").remove(); 83 84 $('.remove').off("click"); 85 $('.remove').on("click", function () { removeServerIP(this) }); 86 87 if ($('#iptable').find("tr").length == 2) 88 { 89 $("#iptable").find("tr:eq(1)").attr("id", "ServerIP1"); 90 $('#ServerIP1').find("td").first().append("<label class="labServerIP"><strong>Server IP</strong></label>"); 91 } 92 $('.add').off("click"); 93 $('.add').on("click", function () { addServerIP(this) }); 94 95 } 96 97 // 98 function removePorjectInformation(el) { 99 var tabProjectInformationTemplate = $('#tabProjectInformationTemplate').clone(); 100 if ($('#tabProjectInformation').length == 0) 101 { 102 tabProjectInformationTemplate.removeAttr('style'); 103 tabProjectInformationTemplate.attr('id','tabProjectInformation'); 104 } 105 if (el == 'radionBtnExtranet') { 106 $('#radionBtnCorp').attr('checked', false); 107 $('#tabRequestInformation').after(tabProjectInformationTemplate); 108 } 109 else { 110 $('#radionBtnExtranet').attr('checked', false); 111 $('#tabProjectInformation').remove(); 112 } 113 114 115 }
jQuery添加删除元素。。。
前台代码：
1 @model Q6.Models.ScanRequestModel 2 @{ 3 ViewBag.Title = "Qualys Self-Serve"; 4 } 5 6 @section HeaderContent 7 { 8 @Styles.Render("~/Content/tip-yellow.css") 9 @Scripts.Render("~/Scripts/jquery.poshytip.min.js") 10 @Scripts.Render("~/Scripts/jquery-Q6-scannow.js"); 11 <script type="text/javascript"> 12 $(document).ready(function () { CreatePoshyTip('#Ip1, #Ip5, #Title, #NotificationList, #PitId, #SraId, #SdlTrackId, #EsdlId, #MsAppId, #RequestorAlias'); }); 13 </script> 14 <!--[Yang] Start--> 15 <script type="text/ecmascript"> 16 function addRowToTable() { 17 var tbl = document.getElementById('iptable'); 18 var lastRow = tbl.rows.length; 19 20 var iteration = lastRow; 21 var row = tbl.insertRow(lastRow); 22 // ServerIP cell 23 var cellLeft = row.insertCell(0); 24 var textNode = document.createTextNode(''); 25 cellLeft.appendChild(textNode); 26 // IP1 cell //class = "wide", maxlength = "3", style = "28px", title = "Enter IP xxx.xxx.xxx.xxx" 27 var cellIP1 = row.insertCell(1); 28 var el = document.createElement('input'); 29 el.type = 'text'; 30 el.name = 'IP1' + iteration; 31 el.id = 'IP1' + iteration; 32 el.className = 'wide'; 33 el.style.width = "28px"; 34 el.title = 'Enter IP xxx.xxx.xxx.xxx'; 35 cellIP1.appendChild(el); 36 // IP2 cell 37 var cellIP2 = row.insertCell(2); 38 var sel2 = document.createElement('lable'); 39 sel2.name = 'sel2' + iteration; 40 sel2.textContent = '. '; 41 cellIP2.appendChild(sel2); 42 var el2 = document.createElement('input'); 43 el2.type = 'text'; 44 el2.name = 'IP2' + iteration; 45 el2.id = 'IP2' + iteration; 46 el2.className = 'wide'; 47 el2.style.width = "28px"; 48 cellIP2.insertBefore(el2, sel2.nextSibling); 49 //IP3 cell 50 var cellIP3 = row.insertCell(3); 51 var sel3 = document.createElement('lable'); 52 sel3.name = 'sel3' + iteration; 53 sel3.textContent = '. '; 54 cellIP3.appendChild(sel3); 55 var el3 = document.createElement('input'); 56 el3.type = 'text'; 57 el3.name = 'IP3' + iteration; 58 el3.id = 'IP3' + iteration; 59 el3.className = 'wide'; 60 el3.style.width = "28px"; 61 cellIP3.insertBefore(el3, sel3.nextSibling); 62 //IP4 cell 63 var cellIP4 = row.insertCell(4); 64 var sel4 = document.createElement('lable'); 65 sel4.name = 'sel4' + iteration; 66 sel4.textContent = '. '; 67 cellIP4.appendChild(sel4); 68 var el4 = document.createElement('input'); 69 el4.type = 'text'; 70 el4.name = 'IP4' + iteration; 71 el4.id = 'IP4' + iteration; 72 el4.className = 'wide'; 73 el4.style.width = "28px"; 74 cellIP4.insertBefore(el4, sel4.nextSibling); 75 //IP5 cell 76 var cellIP5 = row.insertCell(5); 77 var sel5 = document.createElement('lable'); 78 sel5.name = 'sel5' + iteration; 79 sel5.textContent = '- '; 80 cellIP5.appendChild(sel5); 81 var el5 = document.createElement('input'); 82 el5.type = 'text'; 83 el5.name = 'IP5' + iteration; 84 el5.id = 'IP5' + iteration; 85 el5.className = 'wide'; 86 el5.style.width = "28px"; 87 el5.title = 'Enter ending range'; 88 cellIP5.insertBefore(el5, sel5.nextSibling); 89 90 } 91 92 93 </script> 94 <!--End--> 95 } 96 <h2>Create a New Scan Request</h2> 97 <p>@Html.ValidationMessageFor(m => m.CreatedDate)</p> 98 @if (!string.IsNullOrWhiteSpace(ViewBag.AddSuccess)) 99 { 100 <p class="error" style="color:Red">@ViewBag.AddSuccess</p> 101 } 102 103 @using (Html.BeginForm("Index", "ScanNow", FormMethod.Post)) 104 { 105 <div id="mainform"> 106 <h3>Scan Type</h3> 107 <table id="scanTypetable" style="border-collapse:collapse; border: 0px solid black;"> 108 <tr> 109 <td> 110 <strong><label>Select Scan Type: </label></strong> 111 </td> 112 </tr> 113 <tr> 114 <td> 115 <input type="radio" name="radioScanType" id="radioExtranet" checked="checked" value="Extranet"/>Extranet Scan 116 <input type="radio" name="radioScanType" id="radioCorp" value="0" />Corp Scan 117 @*@Html.RadioButtonFor(model => model.TypeState, 0, new {@id="radio1",@name="rdolstState" })Use 118 @Html.RadioButtonFor(model => model.TypeState, 1, new {@id="radio2",@name="rdolstState" })Unuse*@ 119 </td> 120 </tr> 121 </table> 122 <h3>Server information:</h3> 123 <table id="iptable" class="iptable" style="border-collapse:collapse; border: 0px solid black;"> 124 <tr> 125 <td></td> 126 <td></td> 127 <td></td> 128 <td></td> 129 <td colspan="2" align="center" style="font-size:10px"><strong>(range)</strong></td> 130 @*[Yang] add a <td> element*@ 131 <td></td> 132 </tr> 133 <tr id="ServerIP1" class="ip"> 134 <td ><label class="labServerIP"><strong>Server IP</strong></label></td> 135 <td> 136 @Html.TextBoxFor(m => m.Ip1, new { @class = "wide", @maxlength = "3", @style = "28px", @title = "Enter IP xxx.xxx.xxx.xxx" }) 137 </td> 138 <td> 139 <label>.</label> 140 @Html.TextBoxFor(m => m.Ip2, new { @class = "wide", @maxlength = "3", @style = "28px" }) 141 </td> 142 <td> 143 <label>.</label> 144 @Html.TextBoxFor(m => m.Ip3, new { @class = "wide", @maxlength = "3", @style = "28px" }) 145 </td> 146 147 <td> 148 <label>.</label> 149 @Html.TextBoxFor(m => m.Ip4, new { @class = "wide", @maxlength = "3", @style = "28px" }) 150 </td> 151 <td> 152 153 <label>- </label> 154 @Html.TextBoxFor(m => m.Ip5, new { @class = "wide", @maxlength = "3", @style = "28px", @title = "Enter ending range" }) 155 </td> 156 @*[Yang] add a <td> element*@ 157 <td> 158 <a href="#"><img src="~/Content/Images/Add.png" class="add" alt="add" style="vertical-align:top;margin-top:0px;22px;height:22px;" title="add" /></a> 159 </td> 160 161 @if (@Html.ValidationMessageFor(m => m.Ip1).ToString() != "<span class="field-validation-valid" data-valmsg-for="Ip1" data-valmsg-replace="true"></span>") 162 { 163 <td>@Html.ValidationMessageFor(m => m.Ip1)</td> 164 } 165 </tr> 166 167 @if (@Html.ValidationMessageFor(m => m.Ip2).ToString() != "<span class="field-validation-valid" data-valmsg-for="Ip2" data-valmsg-replace="true"></span>") 168 { 169 <tr> 170 <td></td> 171 <td></td> 172 <td></td> 173 <td></td> 174 <td></td> 175 <td></td> 176 <td>@Html.ValidationMessageFor(m => m.Ip2)</td> 177 </tr> 178 } 179 @if (@Html.ValidationMessageFor(m => m.Ip3).ToString() != "<span class="field-validation-valid" data-valmsg-for="Ip3" data-valmsg-replace="true"></span>") 180 { 181 <tr> 182 <td></td> 183 <td></td> 184 <td></td> 185 <td></td> 186 <td></td> 187 <td></td> 188 <td>@Html.ValidationMessageFor(m => m.Ip3)</td> 189 </tr> 190 } 191 @if (@Html.ValidationMessageFor(m => m.Ip4).ToString() != "<span class="field-validation-valid" data-valmsg-for="Ip4" data-valmsg-replace="true"></span>") 192 { 193 <tr> 194 <td></td> 195 <td></td> 196 <td></td> 197 <td></td> 198 <td></td> 199 <td></td> 200 <td>@Html.ValidationMessageFor(m => m.Ip4)</td> 201 </tr> 202 } 203 @if (@Html.ValidationMessageFor(m => m.Ip5).ToString() != "<span class="field-validation-valid" data-valmsg-for="Ip5" data-valmsg-replace="true"></span>") 204 { 205 <tr> 206 <td></td> 207 <td></td> 208 <td></td> 209 <td></td> 210 <td></td> 211 <td></td> 212 <td>@Html.ValidationMessageFor(m => m.Ip5)</td> 213 </tr> 214 } 215 </table> 216 <!--[Yang] Start--> 217 @*<table> 218 <tr> 219 <td><strong>@Html.LabelFor(m => m.ComputerName)</strong></td> 220 <td>@Html.TextBoxFor(m => m.ComputerName, new { @class = "wide", @title = "Enter a Computer name for the Scan", @maxlength = "255" }) 221 @Html.ValidationMessageFor(m => m.ComputerName) 222 </td> 223 <td> 224 <input type="image" src="@Url.Content("~/Content/Images/Remove.png")" alt="remove" style="vertical-align:top;margin-top:0px;22px;height:22px;" title="remove" /> 225 </td> 226 <td> 227 @Html.Hidden("hiddenTest", "hiddenTest") 228 <input type="image" src="@Url.Content("~/Content/Images/CheckRight.png")" alt="valid computer name" style="vertical-align:top;margin-top:0px;22px;height:22px;" title="valid computer name" /> 229 </td> 230 </tr> 231 </table>*@ 232 <!--End--> 233 <table> 234 <tr> 235 <td><strong>@Html.LabelFor(m => m.Title)</strong></td> 236 <td>@Html.TextBoxFor(m => m.Title, new { @class = "wide", @title = "Enter a friendly name for the scan. No special characters are allowed in this field.", @maxlength = "255" }) 237 @Html.ValidationMessageFor(m => m.Title) 238 </td> 239 </tr> 240 </table> 241 </div> 242 <div id="tabRequestInformation"> 243 <h3>Request information:</h3> 244 <table> 245 246 <tr> 247 <td> 248 <strong>@Html.LabelFor(m => m.RequestorAlias)</strong> 249 </td> 250 <td> 251 @Html.TextBoxFor(m => m.RequestorAlias, new { @class = "wide", @disabled = "disabled" }) 252 @Html.ValidationMessageFor(m => m.RequestorAlias) 253 </td> 254 </tr> 255 256 <tr> 257 <td> 258 <strong>@Html.LabelFor(m => m.NotificationList)</strong> 259 </td> 260 <td> 261 @Html.TextBoxFor(m => m.NotificationList, new { @class = "wide", @title = "Enter Alias of people you want to notify about scan completion. Use ; to separate multiple aliases." }) 262 @Html.ValidationMessageFor(m => m.NotificationList) 263 </td> 264 </tr> 265 266 </table> 267 </div> 268 269 <div id="tabProjectInformation"> 270 <h3>Project Information:</h3> 271 <table> 272 <tr> 273 <td> 274 <a target="_blank" href="http://eapm/">Planning IT ID</a> 275 </td> 276 <td> 277 @Html.TextBoxFor(m => m.PitId, new { @class = "wide", @title = "Required for actual Extranet Sign-off Request.Obtain from http://eapm" }) 278 @Html.ValidationMessageFor(m => m.PitId) 279 </td> 280 </tr> 281 282 <tr> 283 <td> 284 <a target="_blank" href="http://engageisrm/">SRA ID</a> 285 </td> 286 <td> 287 @Html.TextBoxFor(m => m.SraId, new { @class = "wide", @title = "Required for actual Extranet Sign-off Request.Obtain from http://engageisrm. " }) 288 @Html.ValidationMessageFor(m => m.SraId) 289 </td> 290 </tr> 291 292 <tr> 293 <td> 294 <a target="_blank" href="http://getsecure/">SDL Track ID</a> 295 </td> 296 <td> 297 @Html.TextBoxFor(m => m.SdlTrackId, new { @class = "wide", @title = "Optional for this request.Required for actual Extranet Sign-off Request for any applications created before April 1st, 2013.See http://getsecure for instructions how to obtain." }) 298 @Html.ValidationMessageFor(m => m.SdlTrackId) 299 </td> 300 </tr> 301 302 <tr> 303 <td> 304 <a target="_blank" href="http://getsecure/">eSDL ID</a> 305 </td> 306 <td> 307 @Html.TextBoxFor(m => m.EsdlId, new { @class = "wide", @title = "Optional for this request.Required for actual Extranet Sign-off Request for any applications created after April 1st, 2013.See http://getsecure for instructions how to obtain." }) 308 @Html.ValidationMessageFor(m => m.EsdlId) 309 </td> 310 </tr> 311 312 <tr> 313 <td> 314 <a target="_blank" href="http://eapm/">MS Apps ID</a> 315 </td> 316 <td> 317 @Html.TextBoxFor(m => m.MsAppId, new { @class = "wide", @title = "Optional for this request. MSApps has been replaced by Planning IT in 2012. An Extranet sign-off request will be denied if a Planning IT identifier has not been provided. Planning IT supports association with your MSAppsID. Obtain your Planning IT identifier and associate it to your MSAppsID from http://eapm." }) 318 @Html.ValidationMessageFor(m => m.MsAppId) 319 </td> 320 </tr> 321 </table> 322 </div> 323 //[Yang] Clone a Project Information 324 <div id="tabProjectInformationTemplate" style="display: none"> 325 <h3>Project Information:</h3> 326 <table> 327 <tr> 328 <td> 329 <a target="_blank" href="http://eapm/">Planning IT ID</a> 330 </td> 331 <td> 332 @Html.TextBoxFor(m => m.PitId, new { @class = "wide", @title = "Required for actual Extranet Sign-off Request.Obtain from http://eapm" }) 333 @Html.ValidationMessageFor(m => m.PitId) 334 </td> 335 </tr> 336 337 <tr> 338 <td> 339 <a target="_blank" href="http://engageisrm/">SRA ID</a> 340 </td> 341 <td> 342 @Html.TextBoxFor(m => m.SraId, new { @class = "wide", @title = "Required for actual Extranet Sign-off Request.Obtain from http://engageisrm. " }) 343 @Html.ValidationMessageFor(m => m.SraId) 344 </td> 345 </tr> 346 347 <tr> 348 <td> 349 <a target="_blank" href="http://getsecure/">SDL Track ID</a> 350 </td> 351 <td> 352 @Html.TextBoxFor(m => m.SdlTrackId, new { @class = "wide", @title = "Optional for this request.Required for actual Extranet Sign-off Request for any applications created before April 1st, 2013.See http://getsecure for instructions how to obtain." }) 353 @Html.ValidationMessageFor(m => m.SdlTrackId) 354 </td> 355 </tr> 356 357 <tr> 358 <td> 359 <a target="_blank" href="http://getsecure/">eSDL ID</a> 360 </td> 361 <td> 362 @Html.TextBoxFor(m => m.EsdlId, new { @class = "wide", @title = "Optional for this request.Required for actual Extranet Sign-off Request for any applications created after April 1st, 2013.See http://getsecure for instructions how to obtain." }) 363 @Html.ValidationMessageFor(m => m.EsdlId) 364 </td> 365 </tr> 366 367 <tr> 368 <td> 369 <a target="_blank" href="http://eapm/">MS Apps ID</a> 370 </td> 371 <td> 372 @Html.TextBoxFor(m => m.MsAppId, new { @class = "wide", @title = "Optional for this request. MSApps has been replaced by Planning IT in 2012. An Extranet sign-off request will be denied if a Planning IT identifier has not been provided. Planning IT supports association with your MSAppsID. Obtain your Planning IT identifier and associate it to your MSAppsID from http://eapm." }) 373 @Html.ValidationMessageFor(m => m.MsAppId) 374 </td> 375 </tr> 376 </table> 377 </div> 378 //Clone end 379 380 <h3>Agreement:</h3> 381 <p> 382 @Html.CheckBoxFor(m => m.Agreement, new { @class = "left" }) 383 <strong>Read </strong>the @Html.ActionLink("Terms of Agreement", "Agreement", "Home"). By clicking here you attest agreement and compliance with these terms; that you own or have explicit permission of the owner to scan the target(s); that these targets are part of the MSIT extranet; these targets will require, at some point in the near future, either a VIP or SNAT. If your target/host does not meet these requirements, you should not submit the scan request. 384 <br /> 385 @Html.ValidationMessageFor(m => m.Agreement) 386 </p> 387 388 <div class="formright" style="text-align:left"> 389 390 <input name="submitButton" id="submitButton" type="submit" value="Submit" class="button" /> 391 </div> 392 393 }
基于MVC的前台。。。