I have a table I create programmatically through ASP.Net code which, in each row, has a checkbox and a textfield.
What I can't seem to achieve (via jQuery at least) is to iterate all the rows to check if all rows which checkbox has been checked have text in the textfield. Confusing? Let me simplify...
I have a table. That table has 3 rows. Each row has a checkbox, some plain text and a textfield. I need to check, in jQuery, if all rows whose checkboxes have been checked by the user also have text in the respective textfields.
I tried to create a simple example based off some answers in here but this doesn't seem to be working; it displays the modal regardless of whether there is text on the input or not.
$('#myButton').on('click', function() {
checkInputs();
});
function checkInputs() {
var hasEmpty = 0;
$('#myTable tr').each(function(i, row) {
var row = $(row);
var checkbox = row.find('input[type*="checkbox"]');
var textbox = row.find('input[type*="text"]');
if (checkbox.is(':checked')) {
if (textbox.val() == "") {
hasEmpty = 1;
};
}
});
if (hasEmpty = 1) {
$(function() {
$("#dialog").dialog();
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<table id="myTable">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<button id="myButton">Button</button>
<div id="dialog" title="Basic dialog" style="display:none;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
The "dialog" part is a jQueryUI modal which I want to display when there's checkboxes that have been checked but the respective inputs don't have a value. I copy-pasted the jQueryUI example code here for the sake of simplification.
Reminder that the actual table is an ASP.Net table which is created programmatically.
Your main issue is that you're using = in the if statement, which sets a value, instead of == or === to compare values. You also don't need the additional document.ready handler around the dialog call.
With that said you can improve the logic slightly by ending the loop as soon as an invalid row is found, like this:
$('#myButton').on('click', function() {
if (!validateInputs())
$("#dialog").dialog();
});
function validateInputs() {
var valid = true;
$('#myTable tr').each(function() {
var $row = $(this);
var $checkbox = $row.find(':checkbox');
var $textbox = $row.find(':text');
if ($checkbox.is(':checked') && $textbox.val().trim() === "") {
valid = false;
return false; // break loop
}
});
return valid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<table id="myTable">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<button id="myButton">Button</button>
<div id="dialog" title="Invalid" style="display: none;">
<p>Not all checked boxes had text entries</p>
</div>
Your if (hasEmpty = 1) has single =. Update it as below.
if (hasEmpty == 1)
Complete code is as below.
$('#myButton').on('click', function() {
checkInputs();
});
function checkInputs() {
var hasEmpty = 0;
$('#myTable tr').each(function(i, row) {
var row = $(row);
var checkbox = row.find('input[type*="checkbox"]');
var textbox = row.find('input[type*="text"]');
if (checkbox.is(':checked')) {
if (textbox.val() == "") {
hasEmpty = 1;
};
}
});
if (hasEmpty == 1) {
$(function() {
$("#dialog").dialog();
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<table id="myTable">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<button id="myButton">Button</button>
<div id="dialog" title="Basic dialog" style="display:none;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
Related
I am trying to create a custom page in powerschool (test server). I have written some piece of code. Actually the problem is that the script is never getting triggered. i was thinking that script will get fired since the password textbox has the keyup event on it. Not sure that i am doing it right. I am new to web pages. Can anyone help?
<!DOCTYPE html>
<html>
<!-- start right frame -->
<head>
<title>Student Information</title>
</head>
<body>
<form id="StudentInformationForm" action="/admin/changesrecorded.white.html" method="POST">
<!-- start of content and bounding box -->
<div class="box-round">
<table border="0" cellspacing="0" cellpadding="3" class="linkDescList">
<colgroup><col><col></colgroup>
<td colspan="2"> </td>
</tr>
<tr class="headerRow">
<td colspan="2" class="bold">-Student Information</td>
</tr>
<tr class="Information">
<td>
<div>
<label>Student Email Address</label>
<input type="text" name="studentEmailAddress" />
</div>
<div>
<label>Student Password</label>
<input type="text" name="studentWebPassword" />
</div>
<div>
<label>Grade</label>
<label name="studentGrade">3<label/>
</div>
<div>
<button name="submit" type="button" disabled>Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$j(function(){
$j("body").on("keyup","input[name='studentWebPassword']",function(){
var current_password = $j("input[name='studentWebPassword']").val();
var studentGrade = $j("input[name='studentGrade']").val();
var password_valid = true;
var hasNumber = /\d/;
var hasSpeacialCharacters=/^[a-zA-Z0-9- ]*$/;
if(studentGrade>=6) //for the students in Grade 3 to 6
{
//password should be of 5 characters and must contain a number
if (current_password.length<5 && current_password>8 && !hasNumber.test(current_password))
{
password_valid=false;
}
}
if (password_valid && current_password!='') {
$j("#submit").show();
}
});
});
</script>
</body>
</html><!-- end right frame -->
jQuery is never assigned to $j.
You can either replace $j with $ or just add $j = $ in the beginning of the script.
Here's a jsFiddle with the added fix of $j = $
The issue with your script is that you are calling an id that doesn't exist $j("#submit") as <button name="submit" type="button" disabled>Submit</button> doesn't have an id. Additionally the show function doesn't remove the disabled attribute, you will want to use prop('disabled', false).
Here's a jsFiddle with the script fixed and $j = $ fixed as well.
<tr>
<td>.....</td>
<td>
<div class="...">
<div class="..." id="..." style="display:block;">
<ul id="..." class="..." style="position:relative;">
<%
for(int i = 0;i < len;i++)
{
//get a json object
if(jsonobj != null)
{
//Get style...id..and some other values....
%>
<li class="..." style="display:block;" id="...">
<div style="<%=style%>">
<input type="checkbox" id="<%=Id%>" class="..." value="true" <%if(enabled){%> checked="checked" <%}%> onClick="..."/>
<input id="inp_<%=Id%>" type="text" class="..." style="border:none;padding-left:5px;" value="<%=text%>" title="<%=title%>">
</div>
</li>
<% }
}
%>
</ul>
</div>
</div>
</td>
</tr>
I have a table row like the above code. As you can see, there are two inputs, a checkbox and a text field. While submiting the form I want to validate the text field and show an error message with a small error icon at the right side. But since the input is in a table row I'm unable to to this.
I have a function which shows a tool tip. I just have to pass the id of the element and the message to that function. I want to validate the input field, show a small error image and call the tool tip function so that the tool tip is shown on the error image.
I want the error image to appear next to the required input field i.e., if the 3rd input field is vaidated to false, then the error should be displayed next to the 3rd containing the input field.
How do I do it?
It's a simple task for jQuery. See the example below:
$(document).ready(function(){
$("#btnSave").click(function(){
$(".txtvalidatorMessage").remove() // remove all messages
var inputs = $(".txtvalidator");
function ShowMessage(message, input){
var messageContainer = $("<div class='txtvalidatorMessage'>"+message+"</div>");
messageContainer.insertAfter(input)// show the message beside the input
}
inputs.each(function(){
var validationType = $(this).attr("validationType");
var require = eval($(this).attr("require"));
switch(validationType)
{
case "NotEmpty":
if ($(this).val() == "" && require == true)
ShowMessage("cant be empty",$(this))
break;
case "Number":
var isnum = /^\d+$/.test($(this).val());
if (!isnum && require == true)
ShowMessage("only number",$(this))
break;
}
});
});
});
.txtvalidatorMessage{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type='text' value="" placeholder='Cant be empty' class='txtvalidator' validationType='NotEmpty' require='true' />
</td>
</tr>
<tr>
<td>
<input type='text' value="" placeholder='only Number' class='txtvalidator' validationType='Number' require='true' />
</td>
<tr>
<td>
<input type='button' value="Validate" id='btnSave' />
</td>
</tr>
</table>
I'm trying to create 2 rows of 6 rectangles (considered to be one object).
I also want to add a plus button, so that when the user clicks on either end, a new set of rectangles appear above or below the original ones. (depending on which plus button they click on)
So I am trying to achieve the following:
What I have tried/found so far:
$(function () {
$(".repeat").on('click', function (e) {
e.preventDefault();
var $self = $(this);
$self.before($self.prev('table').clone());
//$self.remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div class="repeatable">
<table border="1">
<tr>
<td>
<input type="text" name="userInput[]" />
</td>
</tr>
</table>
<button class="repeat">Add Another</button>
</div>
<input type="submit" value="Submit" />
</form>
The above example only works for forms. Does anyone know how I can go about making this work for what I want?
I modified your code to allow add to top, or add below.
I edited your event listener to check whether the button has a specific class. If so, either add above or below. It also listens to "body" click, because new DOM elements won't have event listeners attached:
$("body").on('click', ".repeat", function (e) { //other stuff here}
Also, changed your HTML so it wasn't dependent on "form", you could swap out the element types as long as the classes remain.
$(function () {
$("body").on('click', ".repeat", function (e) {
e.preventDefault();
var $self = $(this);
var $parent = $self.parent();
if($self.hasClass("add-bottom")){
$parent.after($parent.clone());
} else {
$parent.before($parent.clone());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="repeatable">
<button class="repeat add-top">Add above</button>
<table border="1">
<tr>
<td>
<input type="text" name="userInput[]" />
</td>
</tr>
</table>
<button class="repeat add-bottom">Add below</button>
</div>
</div>
I have create a form, and I want to insert image when I click on the button "tester".
This is my code :
<table id="table">
<tr>
<td id="col1">
<form>
<p><label for="text"> your text</label>:<input type="text" id="text"></input></p>
<input type="submit" value="tester" onclick="addImage()" />
</form>
</td>
<td id = "img"></td>
</tr>
</table>
<script>
function addImage(){
document.getElementById("img").innerHTML = "<img src='newWatermark.png'/>"
}
</script>
<style>
#table{width:100%}
#col1{width:50%}
</style>
It's work but just half a time ... And just during a few second ...
I don't understand why
Moreover I think that when I click on the button I refresh the page.
In the URL I have : /watermark.html at the beginning and /watermark.html?your+text= when I click on the button.
But I just want to add an image on the same page. How can I do this?
You submitting Your form.
Change type of input from submit to button.
To avoid page refresh use input type button not submit
function addImage(){
document.getElementById("img").innerHTML = "<img src='newWatermark.png'/>"; //This will overwrite previous image
}
function appendImage(){
document.getElementById("img").innerHTML += "<img src='newWatermark.png'/>"; //This will append image
}
#table{width:100%}
#col1{width:50%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr>
<td id="col1">
<form>
<p><label for="text"> your text</label>:<input type="text" id="text"></input></p>
<input type="button" value="tester" onclick="addImage()" />
<input type="button" value="Append" onclick="appendImage()" />
</form>
</td>
<td id = "img"></td>
</tr>
</table>
I'm new to JQuery and trying to learn more since my work requires me to do a lot of JQuery and AJAX. Now i have this practice project that i use to play around with JQuery and i can't seem to figure out the cause of this problem.
Here's the structure of the website
- index html with an iframe in it containing several buttons
- several html files for each of the iframe
Index.html
<div style="width:750px; height:450px; overflow:hidden; margin: 0 auto; position:relative; margin-top:35px;">
<div id="btn1" style="float:left"> <p> About Us </p> </div>
<div id="btn2" style="float:left"> <p> Objective </p> </div>
<div id="btn3" style="float:left"> <p> Constrains </p> </div>
<div id="btn4" style="float:left"> <p> Modelling </p> </div>
<div id="btn5" style="float:left"> <p> Contact Us </p> </div>
<div id="btn6" style="float:left"> <p> Feedback </p> </div>
<div id="content" style="position:absolute"> <iframe id="main",name="main" frameborder=0 height=450 width=750></iframe> </div>
2.html -- where my textbox resides
<div id="content" style="width: 730px; height: 430px !important;">
<form id="Form_obj", action="index.html", method="post">
<table width="100%" border="1" cellpadding="0">
<tr>
<td>Objective Function:</td>
<td colspan="2"><label id="msg">Your Objective Function</label></td>
</tr>
<tr>
<td></td>
<td align="center", colspan="2"><input type="button", id="Subbutton", value="-", disabled=true><input type="button", id="Addbutton", value="+", disabled=true><input type="submit", value="Submit">
<input type="button", id="Btnclear", value="Clear">
</td>
</tr>
<tr>
<td>Enter Objective Function values:</td>
<td align="right"><input type="text",id="Obj_coef1", name="Obj_coef1", size="5"><input type="text", id="Var_name1",name="Var_name1", size="15"></td>
<td><input type="button", id="Add_var_button", value="Add Variables"></td>
</tr>
</table>
</form>
main.js
$(document).ready(function(){
$("#main").load(function(){
$("#main").ready(function(){
// now read contents
$("#main").contents().find("#Add_var_button").click(function(){
alert("button is clicked");
alert($("#main").contents().find("#Obj_coef1").val());
//alert($("#main").contents().find("#Obj_coef1").val());
//var coef = $("#main").contents().find("#Obj_coef1").val();
//var var_name = $("#main").contents().find("#Var_name1").val();
//var coef_element_name = $("#main").contents().find("#Obj_coef1").getAttribute("name");
//var var_element_name = $("#main").contents().find("#Var_name1").getAttribute("name");
//alert("coef = " + coef);
//alert("var = " + var_name);
//$("#main").contents().find("#msg").text("Jquery changed the text");
//$("#main").contents().find("#msg").append(" appended");
});
});
});
});
Everytime i click the button the alert appears and i can also append text to #msg(label)but for some reason, but when value of the textbox is always undefined even after i changed the value inside the textbox.
What am i missing here?
I figured it out.
Here's my script
var iframe = $("#main");
iframe.load(function(){
iframe.ready(function(){
alert("iframe ready");
// get textboxes and buttons
var btnClear = iframe.contents().find("#Btnclear");
var btnAddVar = iframe.contents().find("#Add_var_button");
var btnAdd = iframe.contents().find("#Addbutton");
var btnSub = iframe.contents().find("#Subbutton");
var msg = iframe.contents().find("#msg");
var obj_coef_input = iframe.contents().find("#Obj_coef1");
var var_name_input = iframe.contents().find("#Var_name1");
btnAddVar.click(function(){
alert("btn add clicked");
btnAdd.prop('disabled',false);
btnSub.prop('disabled',false);
});
btnClear.click(function(){
alert("btn add clicked");
obj_coef_input.prop('value', "");
});
});
});
Oh and don't forget to add $(document).ready(function(){}); to wrap the script
I don't think the find() method is working correctly. I would suggest just using a jQuery selector to get the value. Here's an example:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
var text = $('#blah').val();
alert(text);
})
});
</script>
</head>
<body>
<input type="text" id="blah" /><input type="button" value="button" id="button"/>
</body>