单击按钮时填写必填字段

时间:2018-07-11 07:12:10

标签: javascript jquery html

我有通过数据库生成的动态表https://jsfiddle.net/vc5dbtw9/8/

这只是一个小例子,实际表要大得多,并且随着时间的推移会增大(这就是为什么我需要动态的原因)。

一些字段是必填字段,因此我在数据库中创建了一个列,您可以看到隐藏标签(IDKarakteristike)的值是True和False。

我需要某种jQuery来动态检查行中的标签是对还是错,并使同一行中的文本框在单击按钮时强制填写(取决于标签)。

有人可以帮助我使用jQuery吗?

我需要这样的东西,单击按钮时发出警告。

 $('#myButton').on('click', function () {
            $("input").prop('required',true);
 });

谢谢!

3 个答案:

答案 0 :(得分:1)

这是转到上一个TD并找到第二个跨度的方法(或者您可以将类选择器用于IDKarakteristike)并检查其值以确定:

$(document).ready(function(){
  $("input").each(function(){
     if ($($this).closest('td').prev('td').find("span").eq(1).html()=='true'){
        $(this).prop('required',true);
     }
  })
})

答案 1 :(得分:1)

这是工作示例。找到跨度,仅获取具有布尔值的跨度,为每个跨度找到父行,然后在该行中找到表单元素:

$(function () {
	$("#myButton").on("click", function () {
		// Loop all span elements with target class
		$(".IDKarakteristike").each(function (i, el) {
			// Skip spans which text is actually a number
			if (!isNaN($(el).text())) {
				return;
			}

			// Get the value
			var val = $(el).text().toUpperCase();
			var isRequired = (val === "TRUE") ? true :
							 (val === "FALSE") ? false : undefined;

			// Mark the textbox with required attribute
			if (isRequired) {
				// Find the form element
				var target = $(el).parents("tr").find("input,select");

				// Mark it with required attribute
				target.prop("required", true);

				// Just some styling
				target.css("border", "1px solid red");
			}
		});
	})
});
.IDKarakteristike {
    display:none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <div>
	<table cellspacing="0" cellpadding="4" id="MainContent_gvKarakteristike" style="color:#333333;border-collapse:collapse;">
		<tr style="color:White;background-color:#507CD1;font-weight:bold;">
			<th scope="col">Characteristic</th><th scope="col">&nbsp;</th><th scope="col">Description</th>
		</tr><tr style="background-color:#EFF3FB;">
			<td>
                        <span id="MainContent_gvKarakteristike_Karakteristike_0" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">PFD Total value</span>
                        

                    </td><td>
                        <span id="MainContent_gvKarakteristike_Label_0" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">1</span>

                        
                
                        <span id="MainContent_gvKarakteristike_Label1_0" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">True</span>

                        
                    </td><td>
                        
                         

                         <input name="ctl00$MainContent$gvKarakteristike$ctl02$txtBoxOpis" type="text" maxlength="4" id="MainContent_gvKarakteristike_txtBoxOpis_0" margin-Left="100px" style="font-family:Georgia;height:30px;width:150px;" />
                      
                    </td>
		</tr><tr style="background-color:White;">
			<td>
                        <span id="MainContent_gvKarakteristike_Karakteristike_1" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">PFD Wear </span>
                        

                    </td><td>
                        <span id="MainContent_gvKarakteristike_Label_1" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">2</span>

                        
                
                        <span id="MainContent_gvKarakteristike_Label1_1" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">False</span>

                        
                    </td><td>
                        
                         

                         <input name="ctl00$MainContent$gvKarakteristike$ctl03$txtBoxOpis" type="text" maxlength="6" id="MainContent_gvKarakteristike_txtBoxOpis_1" margin-Left="100px" style="font-family:Georgia;height:30px;width:150px;" />
                      
                    </td>
		</tr><tr style="background-color:#EFF3FB;">
			<td>
                        <span id="MainContent_gvKarakteristike_Karakteristike_2" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">PFD Weight g/m²</span>
                        

                    </td><td>
                        <span id="MainContent_gvKarakteristike_Label_2" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">3</span>

                        
                
                        <span id="MainContent_gvKarakteristike_Label1_2" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">False</span>

                        
                    </td><td>
                        
                         

                         <input name="ctl00$MainContent$gvKarakteristike$ctl04$txtBoxOpis" type="text" maxlength="8" id="MainContent_gvKarakteristike_txtBoxOpis_2" margin-Left="100px" style="font-family:Georgia;height:30px;width:150px;" />
                      
                    </td>
		</tr><tr style="background-color:White;">
			<td>
                        <span id="MainContent_gvKarakteristike_Karakteristike_3" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">PFD Surface 
</span>
                        

                    </td><td>
                        <span id="MainContent_gvKarakteristike_Label_3" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">5</span>

                        
                
                        <span id="MainContent_gvKarakteristike_Label1_3" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">True</span>

                        
                    </td><td>
                        
                         <select name="ctl00$MainContent$gvKarakteristike$ctl05$ddlOpis" id="MainContent_gvKarakteristike_ddlOpis_3" margin-Left="100px" style="font-family:Georgia;height:35px;width:161px;">
				<option selected="selected" value=""></option>
				<option value="1">Proteco 
</option>
				<option value="2">Proteco  Oil
</option>
				<option value="3">Classic
</option>
				<option value="4">Natura
</option>
				<option value="5">No Surface t</option>

			</select>

                     
                      
                    </td>
		</tr><tr style="background-color:#EFF3FB;">
			<td>
                        <span id="MainContent_gvKarakteristike_Karakteristike_4" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">PFD  product
</span>
                        

                    </td><td>
                        <span id="MainContent_gvKarakteristike_Label_4" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">9</span>

                        
                
                        <span id="MainContent_gvKarakteristike_Label1_4" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">True</span>

                        
                    </td><td>
                        
                         

                         <input name="ctl00$MainContent$gvKarakteristike$ctl06$txtBoxOpis" type="text" maxlength="60" id="MainContent_gvKarakteristike_txtBoxOpis_4" margin-Left="100px" style="font-family:Georgia;height:30px;width:150px;" />
                      
                    </td>
		</tr>
	</table>
</div>


    <input type="button" class="button" id="myButton" value="Save"/>

答案 2 :(得分:1)

我更新了小提琴:https://jsfiddle.net/vc5dbtw9/56/

使用form标签环绕您的html代码,并转换按钮以提交并放置以下脚本,您很高兴!

$('#myButton').on('click', function () {
       $('#MainContent_gvKarakteristike tr').each(function(e){
           var mandatory = $(this).find('.IDKarakteristike:last').text().toLowerCase();
           if(mandatory == 'true')
           {
               $(this).find('input,select').prop('required','required');
           }
           else
           {
               $(this).find('input,select').prop('required',false);
           }
       });
 });