3

我想使用一些 javascript 来允许用户输入无限选项和无限图像 URL。

我做了一个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;
});

所以基本上我可以继续添加选项，在第一个选项上我可以添加无限图像，但是，在前面的任何选项（生成的那些）上，当我按下“添加图像”时，它只会重新加载页面，让我失去所有生成的东西，所以远的？

我的想法是，我希望允许某人输入他们想要添加的尽可能多的选项和图像，然后最终将它们添加到数据库中。

谢谢

4

3 回答 3

6

在您的回调函数中，您只需要阻止这样的默认操作：

$("#whatever").click(function(event) {
    event.preventDefault();
    ...
});

另外，通过查看您的代码，我认为您可能会从查看 javascript 模板引擎中受益。他们让这样的事情变得超级容易。http://underscorejs.org有一个很好的包装，http://handlebarsjs.com/也很不错。

于 2013-10-10T16:37:58.547 回答
3

改变：

 <button class="controls" id="add_option" value="Add option">

至：

 <button type="button" class="controls" id="add_option" value="Add option">

防止按钮提交表单。有关更多信息，请参见type 属性。

您还可以在处理程序中取消表单提交click：

$('#add_option').click(function(e) 
{
   e.preventDefault(); // Cancel form submit
   // Rest of code
});

当然，您还需要更新注入的 HTML<button>标记。您将遇到的一个问题是您的.click处理程序不会绑定到您创建的新按钮。一种解决方法是改用.live绑定：

$('#add_option').live('click', function()
{
   // Old code here
});

这是一个更新的 Fiddle。

建议：我会使用 aclass而不是 an id，因为id不建议多次使用相同的。基本上，改变：

<button type="button" class="controls" id="add_option" value="Add option">

至：

<button type="button" class="controls add_option" value="Add option">

并将其绑定：

$('.add_option').live('click', function()

如果您的 UI 变得过于复杂，您可能需要检查 MVVM 类型模式，例如Knockout.js，它可以通过将所有内容绑定到模型来非常轻松地完成所有这些工作。您只需将一个项目添加到模型中，它就会自动创建新的 UI。

于 2013-10-10T16:38:13.560 回答
1

您正在创建多个 ID 为“add_option”的元素。那是不对的。它可能适用于某些浏览器。

此外，当它是原始 HTML 中的那个按钮时，您正在将一个“单击”处理程序附加到该按钮。

但是当您添加更多 HTML 和另一个按钮时，您不会在其上放置点击处理程序。.append()在您使用新的 HTML调用后，您需要立即执行此操作。

按钮的正常工作是提交它所在的表单。提交表单会将内容发送到服务器，服务器将发送回将显示的内容。

暗示：

您可能想要的是一种在 javascript 中通过 ajax 提交表单内容的方法。这不适合胆小的人。网络上有很多相互矛盾的信息，因为最近的 HTML5 更改使其变得非常容易，但所有旧信息仍然存在。您将需要找出FormData哪个是 javascript 对象类并将其作为数据传递给 jQuery $.ajax()。请务必查找示例以获取适用于 ajax 调用的其他属性。

于 2013-10-10T16:41:37.963 回答