Question

我在页面上有两种表格

    <div class="list">
    <div class="item"><a href="javascript: void(0);" class="okrug">Area 1</a>
    <div class="okrug_box">
    <form method="post" class="okrug_form">

        <div class="success" style="display: none;">New item is added.</div>

        <div class="label">Opština</div>

        <div class="field"><input type="text" id="opstina" name="opstina" /></div>

        <div class="clear"></div>

        <input type="hidden" name="oid" id="oid" value="2" />
        <input type="submit" value="Add" class="submit">

        <p><a href="javascript: void(0);" id="close">Close</a></p>

    </form>
    </div>

    </div>
</div>

<div class="list">
    <div class="item"><a href="javascript: void(0);" class="okrug">Area 2</a>
    <div class="okrug_box">

    <form method="post" class="okrug_form">

        <div class="success" style="display: none;">New item is added.</div>

        <div class="label">Opština</div>
        <div class="field"><input type="text" id="opstina" name="opstina" /></div>

        <div class="clear"></div>

        <input type="hidden" name="oid" id="oid" value="1" />
        <input type="submit" value="Add" class="submit">


        <p><a href="javascript: void(0);" id="close">Close</a></p>

    </form>
    </div>
    </div>
</div>

我需要使用相同的jquery代码单独提交它们

$(document).ready(function(){

$('.okrug').click(function() {

    if($(this).next().is(':visible')) {
        $('div.okrug_box').slideUp('normal');
    } else {
        $('div.okrug_box').slideUp('normal');    
        $(this).next().slideDown('normal');
    }
});

$('a#close').click(function(){
    $('div.okrug_box').slideUp('normal');
})


//HIDE THE DIVS ON PAGE LOAD
$("div.okrug_box").hide();

$(".okrug_form").submit(function() {  
// we want to store the values from the form input box, then send via ajax below  
var opstina = $('#opstina').attr('value');
var oid = $('#oid').attr('value');
var part = $('#part').attr('value');
    $.ajax({  
        type: "POST",  
        url: "okrug.php",  
        data: "part="+ part +"&oid="+ oid +"&opstina="+ opstina,  
        success: function(){  
            $('div.success').fadeIn();
            setTimeout("$('div.success').fadeOut();", 6000);
        }  
    });  
return false;  
});  
});

我该怎么做？这是预览http://jsfiddle.net/WvQXQ/

Answer 1

尝试这样的事情：

$(".okrug_form .submit").click(function(e){
  e.preventDefault();
  // submit all forms with a class of okrug_form
  $(".okrug_form").submit();
});

Answer 2

我建议使用表单的onSubmit属性并将表单元素传递给函数，以便您可以直接访问这些值。我在这里修改了你的代码版本：http://jsfiddle.net/8dZ8m/1/（第一次使用jsfiddle，所以希望我做对了）。

显着差异：

onSubmit被添加到两个表单中（如果该函数仅绑定到提交按钮，则用户可能会通过按Enter键意外绕过js处理程序。使用onSubmit处理此问题）
通过.elements [field_name] .value

使用重复的CSS ID无效，因此如果您要继续使用它们，则应将其更改为唯一。

我无法找到'part'表单元素，因此我的代码在提交时生成错误。需要添加该字段，或者需要删除该行。

希望有所帮助！

jQuery多表单单独提交

2 个答案: