Question

我有一张表格

ng-repeat="job in products.jobs"

当我点击

形式的链接时

<form:form commandName="cnd" class="form">
<div class="form-group form-group-label">
    <div class="row">
        <div class="col-md-10 col-md-push-1">
            <label class="floating-label">Title</label>
            <form:input path="title" cssClass="form-control"/>
        </div>
    </div>
</div>
<div class="form-group form-group-label">
    <div class="row">
        <div class="col-md-10 col-md-push-1">
            <label class="floating-label">Company</label>
            <form:input path="company" cssClass="form-control"/>
        </div>
    </div>
</div>
<div class="form-group form-group-label">
    <div class="row">
        <div class="col-md-10 col-md-push-1">
            <label class="floating-label" >Location</label>
            <form:input path="location" cssClass="form-control"/>
        </div>
    </div>
</div>

<a class="btn btn-block waves-button waves-effect" data-toggle="modal" href="#modal">Toggle Modal</a>                           

<div class="form-group">
    <div class="row">
        <div class="col-md-10 col-md-push-1">
            <button class="btn btn-block btn-blue waves-button waves-effect waves-light">Sign In</button>
        </div>
    </div>
</div>    
</form:form>

我想展示以下内容

 <a class="btn btn-block waves-button waves-effect" data-toggle="cat" href="#modal">Show cat</a>

我想从select中选择值并在我使用Javascript提交表单时提交它们，我因某种原因无法将<div aria-hidden="true" class="modal fade" id="cat" role="dialog" tabindex="-1"> <div class="modal-dialog modal-xs"> <div class="modal-content"> <div class="modal-heading"> <a class="modal-close" data-dismiss="modal">×</a> <h2 class="modal-title">Seclect Categories</h2> </div> <div class="modal-inner"> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </div> <div class="modal-footer"> <p class="text-right"><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">Close</button><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">OK</button></p> </div> </div> </div> </div>字段放在表单中。

Answer 1

您需要使用javascript函数。您可以从头开始加载cat div并使用javascript隐藏它以显示/隐藏它，或者您可以通过Ajax调用它。

我在您的表单中包含了div，并将样式设置为隐藏，使用javascript显示或隐藏点击。如果您不想再次隐藏它，可以在单击时删除if和just设置为显示块。值得注意的是，这不会清除价值观。如果要在关闭时清除值，则应使用AJax调用它并在关闭时清除div。

<form:form commandName="cnd" class="form">
<div class="form-group form-group-label">
    <div class="row">
        <div class="col-md-10 col-md-push-1">
            <label class="floating-label">Title</label>
            <form:input path="title" cssClass="form-control"/>
        </div>
    </div>
</div>
<div class="form-group form-group-label">
    <div class="row">
        <div class="col-md-10 col-md-push-1">
            <label class="floating-label">Company</label>
            <form:input path="company" cssClass="form-control"/>
        </div>
    </div>
</div>
<div class="form-group form-group-label">
    <div class="row">
        <div class="col-md-10 col-md-push-1">
            <label class="floating-label" >Location</label>
            <form:input path="location" cssClass="form-control"/>
        </div>
    </div>
</div>

<a class="btn btn-block waves-button waves-effect" data-toggle="modal" href="#modal" onClick="swap(); return false">Toggle</a>
<div aria-hidden="true" class="modal fade" id="cat" role="dialog" tabindex="-1" style="display: none;" >
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
            <div class="modal-heading">
                <a class="modal-close" data-dismiss="modal">&times;</a>
                <h2 class="modal-title">Seclect Categories</h2>
            </div>
            <div class="modal-inner">
                <select>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
                </select>
            </div>
            <div class="modal-footer">
                <p class="text-right"><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">Close</button><button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">OK</button></p>
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="row">
        <div class="col-md-10 col-md-push-1">
            <button class="btn btn-block btn-blue waves-button waves-effect waves-light">Sign In</button>
        </div>
    </div>
</div>    

<script type="text/javascript">
var counter = 1

function swap() {
    if (counter%2 == 0) {
        document.getElementById('cat').style.display = 'none';
    }
    if (counter%2 != 0) {
        document.getElementById('cat').style.display = 'block';
    }
    counter += 1;
}
</script>

</form:form>

如何从字段中获取超出形式的值

1 个答案: