我想使用一些 javascript 来允许用户输入无限选项和无限图像 URLS。
我做了一个jsFiddle
这是 html:
<div class="container-fluid body">
<div class="admin-box">
<form action="http://localhost/MyZone/public_html/index.php/create_option/2" class="form-horizontal" method="post" accept-charset="utf-8"><div style="display:none">
<input type="hidden" name="ci_csrf_token" value="001b4b051689692edec29d09b9837f3a">
</div> <fieldset>
<legend>Option Title</legend>
<div class="control-group">
<label class="control-label" for="Option title">title</label>
<div class="controls">
<input type="text" name="name" id="name" class="span6">
</div>
</div>
<div class="admin-box" id="option_information">
<fieldset>
<legend>Option information</legend>
<div class="control-group">
<label class="control-label" for="value">Description</label>
<div class="controls">
<input type="text" name="value" id="value" class="span6">
</div>
</div>
<div class="control-group">
<label class="control-label" for="cost_including_vat">Cost including VAT</label>
<div class="controls">
<input type="text" name="cost_including_vat" id="cost_including_vat" class="span6">
</div>
</div>
<div class="control-group">
<label class="control-label" for="vat_of_cost">VAT of cost</label>
<div class="controls">
<input type="text" name="vat_of_cost" id="vat_of_cost" class="span6">
</div>
</div>
<div class="control-group">
<label class="control-label" for="sale_price_including_vat">Sale price including vat</label>
<div class="controls">
<input type="text" name="sale_price_including_vat" id="sale_price_including_vat" class="span6">
</div>
</div>
<div class="control-group">
<label class="control-label" for="vat_of_sale_price">VAT of sale price</label>
<div class="controls">
<input type="text" name="vat_of_sale_price" id="vat_of_sale_price" class="span6">
</div>
</div>
<div id="image_addition">
</div>
<div class="control-group">
<button class="controls" id="add_image" value="Add image">Add Image</button>
</div>
</fieldset>
</div>
<div class="control-group">
<button class="controls" id="add_option" value="Add option">Add option</button>
</div>
<div class="form-actions">
<br>
<input type="submit" name="save" class="btn btn-primary" value="Create option">
or <a href="http://localhost/MyZone/public_html/index.php" class="btn btn-warning">Cancel</a> </div>
</fieldset>
</form>
这是Javascript
var counter_image = 1;
$('#add_image').click(function()
{
var newrow = '<div class="control-group">'+
'<label class="control-label" for="image_name'+counter_image+'">Image '+counter_image+' name</label>'+
'<div class="controls">' +
'<input type="text" name="image_name'+counter_image+'" id="image_name'+counter_image+'" class="span6" />'+
'</div>' +
'</div>' +
'<div class="control-group">' +
'<label class="control-label" for="image_description'+counter_image+'">Image '+counter_image+' message</label>' +
'<div class="controls">' +
'<input type="text" name="image_description'+counter_image+'" id="image_description'+counter_image+'" class="span6" />' +
'</div>' +
'</div>' +
'<div class="control-group">' +
'<label class="control-label" for="image_url'+counter_image+'">Image '+counter_image+' URL</label>' +
'<div class="controls">' +
'<input type="url" name="image_url'+counter_image+'" id="image_url'+counter_image+'" class="span6" />' +
'</div>' +
'</div>';
$('#image_addition').append(newrow);
counter_image++;
return false;
});
var counter_option = 1;
$('#add_option').click(function()
{
var newrow = '<fieldset>' +
'<legend>Option information</legend>'+
'<div class="control-group">'+
'<label class="control-label" for="value">Description</label>'+
'<div class="controls">'+
'<input type="text" name="value" id="value" class="span6" />'+
'</div>'+
'</div>'+
'<div class="control-group">'+
'<label class="control-label" for="cost_including_vat">Cost including VAT</label>'+
'<div class="controls">'+
'<input type="text" name="cost_including_vat" id="cost_including_vat" class="span6" />'+
'</div>'+
'</div>'+
'<div class="control-group">'+
'<label class="control-label" for="vat_of_cost">VAT of cost</label>'+
'<div class="controls">'+
'<input type="text" name="vat_of_cost" id="vat_of_cost" class="span6" />'+
'</div>'+
'</div>'+
'<div class="control-group">'+
'<label class="control-label" for="sale_price_including_vat">Sale price including vat</label>'+
'<div class="controls">'+
'<input type="text" name="sale_price_including_vat" id="sale_price_including_vat" class="span6" />'+
'</div>'+
'</div>'+
'<div class="control-group">'+
'<label class="control-label" for="vat_of_sale_price">VAT of sale price</label>'+
'<div class="controls">'+
'<input type="text" name="vat_of_sale_price" id="vat_of_sale_price" class="span6" />'+
'</div>'+
'</div>'+
'<div id="image_addition">'+
'</div>'+
'<div class="control-group">'+
'<button class="controls" id="add_option" value="Add image">Add Image</button>'+
'</div>'+
'</fieldset>';
$('#option_information').append(newrow);
counter_option++;
return false;
});
所以基本上我可以继续添加选项,在第一个选项上我可以添加无限图像,但是,在前面的任何选项(生成的选项)上,当我按“添加图像”时它只是重新加载页面让我松了到目前为止生成的所有内容?
我的想法是,我希望允许某人输入他们想要添加的每个选项和图像的数量,然后最终将它们添加到数据库中。
谢谢
最佳答案
在你的回调函数中,你只需要阻止这样的默认操作:
$("#whatever").click(function(event) {
event.preventDefault();
...
});
此外,通过查看您的代码,我认为您可能会从研究 javascript 模板引擎中受益。他们让这样的事情变得 super 简单。 http://underscorejs.org有一个很好的包裹,并且http://handlebarsjs.com/也很甜。
关于javascript - 按钮按下使 javascript 无意中重新加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19301418/