我正在通过使用jQuery创建动态字段 [英] I am creating dynamic field by using jquery
本文介绍了我正在通过使用jQuery创建动态字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用jquery创建动态字段，但显示不正确.
这是我的代码.
I am creating dynamic field by using jquery,but it is not display properly.
This is the my code.
<?php ob_start();?>
<?php
$errorMessage="";
if(isset($_REQUEST["errorMessage"]))
{
$errorMessage=$_REQUEST["errorMessage"];
}
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Article Submission service form</title>
<script type="text/javascript" src="js/artical_submition.js">
</script>
<script type="text/javascript">
var counter = 4;
var limit = 7;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.className="reg-login iclear";
newdiv.id="title";
var path = "css";
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = path + '/css/style.css';
newdiv.appendChild(style);
newdiv.innerHTML = "<ul><li class='ilable'>Title "+counter+"</li>";
newdiv.innerHTML+="<li class='cInput'><input name='title[]' type='text' /></li></ul>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var counter = 4;
$("#addButton").click(function () {
// alert("HI");
if(counter>=7){
alert("Only 3 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'title' + counter);
newTextBoxDiv.addClass('reg-login iclear');
newTextBoxDiv.html("<ul><li class='ilable'>Title: " +counter+"<input type='text' name='textbox' id='textbox' value='' ></li></ul>");
newTextBoxDiv.appendTo("#title");
counter++;
});
/* $("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});*/
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
</head>
<?php include("include/adminheader.php"); ?>
<!-- banner starts here -->
<div class="accountBanner"> <span class="accountBannerAdd fltRight">
<h1>Article Submission service form</h1>
</span>
<div class="iclear"></div>
</div>
<!-- banner starts here -->
<!-- container starts here -->
<div id="container">
<div class="infoWarning">You will not be able to change this data once filled and submitted. So kindly fill in correct data</div>
<form method="post" action="form-article-submission-service-confirm-details.php">
<div>
<ul>
<li><font color="red"><h2 id ="errorMessage">
<?php
echo $errorMessage;
?>
</h2></font></li>
</ul>
</div>
<div class="reg-login iclear">
<ul>
<li class="ilable">Name: *</li>
<li class="cInput"><input name="article_name" type="text" id="artical_name" /></li>
<li class="ilable">URL of your site *</li>
<li class="cInput"><input name="url" type="text" id="url"/></li>
</ul>
<div class="infoIdea">Don't have your title be more than 50 Character and dont forget to include keyword in your title</div>
</div><!---1 reg closing--->
<div class="reg-login iclear" id="title">
<ul>
<li class="ilable">Title 1 *</li>
<li class="cInput"><input name="title[1]" type="text" /></li>
<li class="ilable">Title 2 *</li>
<li class="cInput"><input name="title[]" type="text" /></li>
<li class="ilable">Title 3 *</li>
<li class="cInput"><input name="title[]" type="text" /></li>
<li class="ilable"></li>
<!-- <li style="width:300px;"> <span class="buttons"><button type="button" class="regular" onClick="return addInput('reg-login iclear');"><img src="images/add1.png" alt=""/> Add 1 more Title </button></span></li>
<li><input type="button" value="Add another text input" onClick="return generatenew();"></li>-->
<li style="width:300px"><span class="buttons"><input type="button" value="Add another text input" onClick="addInput('title');"></span></li>
<li style="width:300px;"> <input type="button" value="Add Button" id="addButton"></li>
</ul>
</div>
<div class="reg-login iclear" id="title">
</div>
<div class="reg-login iclear" id="reg-login iclear">
<div class="infoIdea">Don't have your description be more than 250 Character long</div>
<ul>
<li class="ilable">Long description 1 *</li>
<li class="ctextarea"><textarea cols="5" rows="5" name="comment[1]" class="txtClass"> </textarea></li>
<li class="ilable">Long description 2 *</li>
<li class="ctextarea"><textarea cols="5" rows="5" name="comment[]" class="txtClass"> </textarea></li>
<li class="ilable">Long description 3 *</li>
<li class="ctextarea"><textarea cols="5" rows="5" name="comment[]" class="txtClass"> </textarea></li>
<li class="ilable"></li>
<li style="width:300px;"> <span class="buttons"><a href="#" class="regular"> <img src="images/add1.png" alt=""/> Add 1 more Description</a></span></li>
<!-- <input type="button" value="Add another text input" onClick="addInput('reg-login iclear');">-->
</ul>
</div>
<div class="reg-login iclear">
<div class="infoIdea">Type your Keyword with saparated with comma</div>
<ul>
<li class="ilable">Keyword *</li>
<li class="cInput"><input name="search" type="text" /></li>
</ul>
</div>
<div class="reg-login iclear">
<div class="infoIdea">Try to be as specific as possible for your site category</div>
<ul>
<li class="ilable">Category 1 *</li>
<li class="cInput">
<input name="" type="text" />
<span class="buttons btnposs">
<a href="#" class="regular"> <img src="images/folders_tree.png" alt=""/> Category tree </a>
</span>
</li>
<li class="ilable">Category 2 *</li>
<li class="cInput">
<input name="" type="text" />
<span class="buttons btnposs">
<a href="#" class="regular"> <img src="images/folders_tree.png" alt=""/> Category tree </a>
</span>
</li>
<li class="ilable">Category 3 *</li>
<li class="cInput">
<input name="" type="text" />
<span class="buttons btnposs">
<a href="#" class="regular"> <img src="images/folders_tree.png" alt=""/> Category tree </a>
</span>
</li>
</ul>
</div>
<div class="reg-login clear">
<ul>
<li class="ilable"></li>
<!--<li><button type="submit"><a href="#" class="regular"> <img src="images/iconSubmit.png" alt=""/> Submit </a></button></span> <span class="buttons"><a href="#" class="regular"> <img src="images/iocnUpdate.png" alt=""/> Reset </a></span></li>-->
<li><button type="submit" onclick= "return check();"><img src="images/iconSubmit.png">Submit</button></li>
</ul>
</div>
</form>
</div>
<!-- container ends here -->
<?php include("include/sidebar.php"); ?>
</div>
<div class="cBottom fltLeft"></div>
<?php include("include/adminfooter.php"); ?>
<?php ob_flush();?>推荐答案
errorMessage=""; if(isset(
errorMessage=""; if(isset(
_REQUEST["errorMessage"])) {
_REQUEST["errorMessage"])) {
errorMessage=
errorMessage=
这篇关于我正在通过使用jQuery创建动态字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
