jQuery在按钮之前查找输入

jquery find input before button

本文关键字：查找 输入 按钮 jQuery      更新时间：2023-09-26

我在页面上有一个表单，我有一些jQuery来确保在提交之前完成输入。

但是现在我需要在页面上重复多个类似的表单，我需要更改 jQuery 以仅检查单击按钮的形式中的两个输入，而不检查页面上的任何其他表单。

<div class="offerDate">
    <form class="form-inline hidden-phone" action="http://www.treacyswestcounty.com/bookings/" method="get">
        <fieldset> 
            <input type="text" name="from_date" placeholder="dd/mm/yy" id="from_date" class="input-small hasDatepicker">
            <input type="text" name="to_date" placeholder="dd/mm/yy" id="to_date" class="input-small hasDatepicker">
            <button id="submitDates" class="btn btn-main" type="submit">CHECK NOW</button>
         </fieldset>
    </form>
</div>
<div class="offerDate">
    <form class="form-inline hidden-phone" action="http://www.treacyswestcounty.com/bookings/" method="get">
        <fieldset> 
            <input type="text" name="from_date" placeholder="dd/mm/yy" id="from_date" class="input-small hasDatepicker">
            <input type="text" name="to_date" placeholder="dd/mm/yy" id="to_date" class="input-small hasDatepicker">
            <button id="submitDates" class="btn btn-main" type="submit">CHECK NOW</button>
         </fieldset>
    </form>
</div>

我以前用来使用 ID 检查表单的 jQuery

    // validate signup form on keyup and submit
    jQuery('#submitDates').click(function () {
    var found = false;
    jQuery("#to_date, #from_date").each(function(i,name){
        // Check if field is empty or not
        if (!found && jQuery(name).val()=='') {
        alert ('Please choose your arrival and departure dates!')
        found = true;
        } ;
    });
    return !found;
    });

.prev（ [选择器 ] ）

返回： jQuery

说明：获取每个元素的前面的同级元素 匹配元素集，可选择由选择器筛选。

这很短，将针对按钮之前显示的任何输入：

$("button").prev("input")

js在这里摆弄

你可以这样尝试：

法典 

jQuery('.submitDates').click(function () {
 var found = false;
 jQuery(this).siblings("input").each(function (i, name) {
     // Check if field is empty or not
     if (!found && jQuery(name).val() == '') {
         alert('Please choose your arrival and departure dates!')
         found = true;
     };
 });
 return !found;

}）;

假设你的inputs是button的兄弟姐妹。注意 我还将按钮的id更改为class。

小提琴 http://jsfiddle.net/FY9P9/

最近和查找也可以这样做，无论按钮的输入在哪里：

.HTML：

<form class="form">
    <input type="text" class="toDate" />
    <input type="text" class="fromDate" />
    <div class="button">Click</div>
</form>
<form class="form">
    <input type="text" class="toDate" />
    <input type="text" class="fromDate" />
    <div class="button">Click</div>
</form>

.JS：

$(".button").each(function () {
    $(this).click(function () {
        if (($(this).closest(".form").find(".toDate").val() == "") || ($(this).closest(".form").find(".fromDate").val() == "")) {
            alert("Please fill in arrival and departure Date");
        }
    })
})

http://jsfiddle.net/GuqJF/1/

相关文章：