I want to change the color of the text box in html when on focus. But my color is not changing.!
Html
<!DOCTYPE html>
<html>
<head>
<title>Make a new account</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js" type="text/javascript" ></script>
</head>
<body>
<h2 align="center" class="Heading">Want an account</h2>
<h3 align="center" class="Heading">Enter your details</h3>
<div align="center">
<form name="Info_Form">
<table>
<tr>
<td class="TD">Your Name Pal :</td> <td><input type="text" name="Name"></td>
</tr>
<tr>
<td class="TD">Your Password :</td> <td><input type="password" name="pwd"></td>
</tr>
<tr>
<td align="right" ><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
my js file:
$(document).ready(function(){
$('h2').fadeOut(3000);
$(".TD").focus(function(){
$(this).css("background-color","blue");
});
});
What am i doing wrong?
Instead of :
$(".TD").focus(function(){
$(this).css("background-color","blue");
});
Use:
$("input").focus(function(){
$(this).css("background-color","blue");
});
It's because you can apply .focus() to only a limited number of element (links, form inputs).
From jQuery documentation :
The focus event is sent to an element when it gains focus. This event
is implicitly applicable to a limited set of elements, such as form
elements (, , etc.) and links (). In recent
browser versions, the event can be extended to include all element
types by explicitly setting the element's tabindex property. An
element can gain focus via keyboard commands, such as the Tab key, or
by mouse clicks on the element.
Here you try to apply it to a <td> tag.
Moreover, your <input> is not a child of .TD, so it's another problem in your code.
Why not simply use css :focus selector to achieve this ?
Related
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<tr>id</tr>
<input type="text" id= "101" style = "color:black" required></td>
<input type="button" value="Submit" style = "color:Red;">
<script>
document.getElementById("101").reset()
</script>
</body>
</html>
1) i want to make mandatory my id field but i am unable to do it .I used required but it is not working
2) i want to empty my text fields after submitting the fields when user clicks submit it is not working
3)In my code i used tr as text fields plese suggest for following tr tag only
You need to keep your code inside <form> and just submit type is enough to reset it. No need to write javascript to reset. Here is your working code snippet:
<body>
<form>
<table>
<tr>
<td>id</td>
<td><input type="text" id= "101" style = "color:black" required></td>
<td><input type="submit" value="Submit" style = "color:Red;"></td>
</tr>
</table>
</form>
</body>
If you want separate reset button to reset the field, add this in your table:
<td><input type="reset" value="Reset" style = "color:Red;"></td>
First, your html markup is wrong (inside TR you need to put TD), plus you are missing the form tag.
Adding the form tag, the page will submit and refresh. Te text field will be blank by default, no need to use javascript.
"required" is a HTML5 tag, it will work only with html5 browser that support it.
This code will work with every compatible html5 browser
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<table>
<tr>
<td>id</td>
<td><input type="text" id= "101" style = "color:black" required></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" style = "color:Red;"></td>
</tr>
</table>
</form>
</body>
</html>
If you want an "editable grid" i.e. a table like structure that allows you to make any of the rows a form, use CSS that mimics the TABLE tag's layout: display:table, display:table-row, and display:table-cell.
There is no need to wrap your whole table in a form and no need to create a separate form and table for each apparent row of your table.
Try this instead:
<style>
DIV.table
{
display:table;
}
FORM.tr, DIV.tr
{
display:table-row;
}
SPAN.td
{
display:table-cell;
}
</style>
<div class="table">
<form class="tr" method="post" action="blah.html">
<span class="td"><input type="text"/></span>
<span class="td"><input type="text"/></span>
</form>
<div class="tr">
<span class="td">(cell data)</span>
<span class="td">(cell data)</span>
</div>
</div>
The problem with wrapping the whole TABLE in a FORM is that any and all form elements will be sent on submit (maybe that is desired but probably not). This method allows you to define a form for each "row" and send only that row of data on submit.
The problem with wrapping a FORM tag around a TR tag (or TR around a FORM) is that its invalid HTML. The FORM will still allow submitting as usual but at this point, the DOM is broken. Note: Try getting the child elements of your FORM or TR with JavaScript, it can lead to unexpected results.
Note that IE7 doesn't support these CSS table styles and IE8 will need a doctype declaration to get it into "standards" mode: (try this one or something equivalent)
Any other browser that supports display:table, display:table-row and display:table-cell should display your CSS data table the same as it would if you were using the TABLE, TR and TD tags. Most of them do.
Note that you can also mimic THEAD, TBODY, TFOOT by wrapping your row groups in another DIV with display: table-header-group, table-row-group, and table-footer-group respectively
you are missign a semi-colon in your input field. Should be
<input type="text" id="101" style="color:black;" required>
In general it's preferable to create a separate .css file rather than utilizing the style attirbute
In general you are invokingthe javascript incorrectly.
<input type="button" value="Submit" style = "color:Red;" onclick="clearInput()">
And you should change the javascript accordingly:
<script>
function clearInput() {
document.GetElementById('101').value = "";
}
</script>
Your table form in general is wrong. Your general structure should look something like this
<table>
<td>
<tr>1</tr>
<tr>2</tr>
</td>
<td>
<tr>Column 2 Row</tr>
</td>
</table>
A working js fiddle example:
function clearInput() {
document.getElementById('101').value = "";
}
input[type="button"] {
color: red;
}
<input type="text" id="101">
<input type="button" value="Submit" onclick="clearInput()">
innerHTML and jqueries .html() ... GOTCHA!
I had just created a little template html tag for my javascript to go get a copy of and push into a table... It looked like this:
<div id="TimesheetEntryRow">
<tr id="row{RowID}">
<td></td>
</tr>
</div >
So in jquery I thought, cool let's grab that:
timesheetTemplateHtml = $( "#TimesheetEntryRow" ).html();
and then I appended it to my awesome table:
$( "#TimesheetTable" ).append( timesheetTemplateHtml );
It didn't work?
It had stripped off the <tr> and the <td>s and left true tags like the <input />s I had inside it.
So I thought, oh jquery you naughty little critter, I'll use innerHTML so that I do not have to worry about jquery being clever:
timesheetTemplateHtml = document.getElementById( "TimesheetEntryRow" ).innerHTML;
document.getElementById( "TimesheetTable" ).innerHTML += timesheetTemplateHtml;
Still not working? Still it stripped off all the tags for my template...
I binged the hell out of it and stumbled across these two articles:
FIREFOX: https://developer.mozilla.org/en-US/docs/Web/API/element.innerHTML?redirectlocale=en-US&redirectslug=DOM%2Felement.innerHTML
IE: http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx
GREAT, so that function I've used my entire life has been a LIE I tell you. In fact, the only browser it does work in is Chrome ( I think they are ignoring the standards or something? ).
I managed to figure out that if you put the entire tag around the it, seems to copy it okay... Which is very annoying but has saved my bacon on this occasion.
<div id="TimesheetEntryRow">
<table>
<tr id="row{RowID}">
<td></td>
</tr>
</table>
</div>
Now the above makes sense, but I really did not know innerHTML also does html parsing to check you're not being silly... Can any of you think of another way of not having to put an entire tag set in my templater?
Crazy crazy crazy!
Related posts:
IE+jQuery+Ajax+XHTML: HTML getting clipped after .html() or .innerHTML
My full example template is this:
<div id="TimesheetEntryRow" style="display:none;">
<table>
<tbody>
<tr id="row{RowID}">
<td>blah</td>
<td class="timeSpent"><input name="timeMon[]" type="text" class="form-control inputTimeSpent timeSpent timeMon" placeholder="0" /></td>
<td class="timeSpent"><input name="timeTue[]" type="text" class="form-control inputTimeSpent timeSpent timeTue" placeholder="0" /></td>
<td class="timeSpent"><input name="timeWed[]" type="text" class="form-control inputTimeSpent timeSpent timeWed" placeholder="0" /></td>
<td class="timeSpent"><input name="timeThur[]" type="text" class="form-control inputTimeSpent timeSpent timeThur" placeholder="0" /></td>
<td class="timeSpent"><input name="timeFri[]" type="text" class="form-control inputTimeSpent timeSpent timeFri" placeholder="0" /></td>
<td class="timeSpent timeSpentWeekend"><input name="timeSat[]" type="text" class="form-control inputTimeSpent timeSpent timeSat" placeholder="0" /></td>
<td class="timeSpent timeSpentWeekend"><input name="timeSun[]" type="text" class="form-control inputTimeSpent timeSpent timeSun" placeholder="0" /></td>
<td class="timeSpent"><input disabled type="text" class="form-control timeSpent allocated" /></td>
<td class="timeSpent"><input disabled type="text" class="form-control timeSpent total" value="0" /></td>
<td><textarea name="note[]" class="form-control inputNotes" placeholder="Enter notes"></textarea></td>
</tr>
</tbody>
</table>
</div>
NOTE TO EVERYONE : If you use clone, do not forget to display:block on the css style.
Anyways, even with clone, the above example will not do what you expect (if you think it does, actually go inspect the element and it would have stripped the whole load out)
The problem that you're experiencing is due to the fact that the template isn't valid HTML. <tr> elements must be inside of a <table>, <tbody>, <thead>, <tfoot>, and maybe something else I'm forgetting. When the browser sees the <tr> elements in an invalid place, it just deletes them and moves on, leaving the content where it is. (Same for the <td>s not in a <tr>s.) Therefore, what you can do is to make your template element a <table>:
<table id="TimesheetEntryRow" style="display:none">
<tr>
<td>blah</td>
</tr>
</table>
See a working example here: http://jsfiddle.net/6GSJ4/2/
I know that some frameworks such as AngularJS (one I work with) allow you to put your templates inside of <script type="text/template"> elements since those are not processed as DOM elements by the HTML parser so all of your elements will stay intact. That may be an option if you need it (though .innerHTML obviously wouldn't work).
You could of course just add the html back to the template tag right away. Not optimal, but will get the job done
timesheetTemplateHtml = $("#TimesheetEntryRow").html();
$("#TimesheetEntryRow").html(timesheetTemplateHtml);
I would do it like this. Simply use a table for your template without displaying it:
<table id="TimesheetEntryRow" style="display: none;">
<tr>
<td>aaa</td>
</tr>
</table>
and than just select the template and the destination once on document ready. When needed, clone the template and append it to the destination:
$(function(){
var $table = $( "#TimesheetTable" );
var $row = $( "#TimesheetEntryRow tr" );
$('#button').on('click', function(){
$table.append($row.clone());
});
});
See a working example here: http://codepen.io/timbuethe/pen/czJla/
You can "misuse" the script tag like this:
<script type="text/template" id="TimesheetEntryRow">
<tr id="row{RowID}">
<td></td>
</tr>
</script>
Some JavaScript templating scripts use this, e.g. Underscore.js
I have some code below that contains a form which contains a hiddenTable element that will show up once you click the search button. My question is: how would I display the table in a modal popup window while still having it be apart of the same form. The table contains a comment box and a submit button, I want the comment to be submitted along with all the other field's data inside the form.
<!DOCTYPE html>
<html>
<head>
<style>
#hiddenStuff {
display: none;
}
</style>
</head>
<body>
<form action="...">
// search fields here
<input type="button"
value="Search"
onclick="document.getElementById('hiddenTable').style.display='block';">
<table id="hiddenTable" class="form_table" style="display:none;">
<tr>
<td class="form_field_name">Enter a comment</td>
</tr>
<tr>
<td class="form_field_entry">
<textarea required ="true"
name="textarea" rows="10"
cols="50"
placeholder="Please enter a description for the performed task."></textarea>
</td>
</tr>
<tr>
<td class="form_field_entry">
<cfinput type="submit" name="createPeriod" value="Submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Please excuse my messy code.
I agree with #Dan that it might be a pain for a ux standpoint to make this an extra modal, but if that's the result you want, you can surround your table in a div and add javascript to make the box "popup". Add CSS styles to create the black transparent background on click, and you will have a very simple modal popup.
I created a codepen for a reference - http://codepen.io/anon/pen/brEHI
I am creating a website and there are some pages containing the <div> tags as the wrapper of <table>. A <tr> of each table contains a <form> and another <tr> contains some <a> tags. I am using these anchor tags to make buttons just to add hide and show functionality. Whenever some new data is fetched from database, the set of said html structure is created dynamically. Every <div> contains the same id and every <tr> also containing the <form> assigned the same id. Below is my example htmlfor the better explanation.
HTML
<div class='static_archive'> // First Wrapper
<table>
<tr>
<td>Some data</td>
<td>Some data</td>
<td>
<a id='show_hide_details' href='#'>Show/Hide Button</a>
</td>
</tr>
<tr id='form_container'>
<td colspan='3'>
<form>
<input type='text' name'first' />
<input type='text' name'second' />
<input type='text' name'third' />
</form>
</td>
</tr>
</table>
</div>
<div class='static_archive'> // Second Wrapper
<table>
<tr>
<td>Some data</td>
<td>Some data</td>
<td>
<a id='show_hide_details' href='#'>Show/Hide Button</a>
</td>
</tr>
<tr id='form_container'>
<td colspan='3'>
<form>
<input type='text' name'first' />
<input type='text' name'second' />
<input type='text' name'third' />
</form>
</td>
</tr>
</table>
</div>
jQuery
$(document).ready(function(){
$("#form_container").hide();
$("#show_hide_details").click(function(){
$("#form_container").toggle();
});
});
As soon as the page loads, $("#form_container").hide(); hides all the <tr> containing the <form>. By clicking hide/show button with the toggle effect, hides and shows the every content with the same id.
I want to show only one form at a time when a particular button is hide/show button is pressed. How can i control such behavior?
With a new record fetched, a new DIV is created with only one table inside it. And the table contains only one form. The table row containing the form needs to be hide/show.
Here is the jsfiddle with my code structure jsfiddle
Every clicked hide/show should effects the respective form.
I have edited my post. Please have a look now.
You can use $(this) to do the toggle with particular block.
$(this).closest('tr').next("#form_container").toggle();
You should not use same id for multiple elements, assign class and use that
$(this).closest('tr').next(".form_container").toggle();
I think u want this or may this help u.
You can not have same id's for different controls.So u can have id's staring with same string
You can use ^ here:
$(document).ready(function(){
$("[id^='form_container']").hide();
$("#show_hide_details").click(function(){
$(this).parents().next("tr").toggle();
});
});
jsfiddle
I assume you want to show all of them hidden first. Obviously, you have to replace the id's with class.
$(document).ready(function(){
$(".form_container").hide();
$(".show_hide_details").click(function(){
$(this).parents("tr").next().toggle();
});
});
I have implemented an Alert pop-up using style-sheet and <noscript> if javascript is disabled.
The pop-up has warning message and Ok button.
Ok button will not work until the javascript is disabled in all the browsers.
When javascript enabled and w/o reloading the page
On FF:- Clicking on Ok button page gets Reload
Other Browsers:- Clicking on Ok button nothing happens
I want my Ok button to behave like FF in all the Other Browsers (IE, Opera, Safari, Chrome), how i can achieve this ?
Edited my code is as follows
<!-- [START] Following code is get runed to show pop-up when javascript is disabled -->
<noscript>
<div id="javascript_disabled_fade" class="black_overlay" style="display:block;"></div>
<div id="pagewrap-light-small" style="display:block;">
<div id="javascript_disabled_popup" class="white_content_javascript_disabled" style="margin-left:-185px;margin-top:-143px;width: 371px;height:287px;padding:0px;">
<div style="margin:0px;padding:0px;">
<table align="center" style="text-align:center;width:371px;height:287px; " cellpadding="0" cellspacing="0" border="0" >
<tr>
<td align="center" style="text-align:center;padding-left:2px;height:150px;padding-top:8px;" colspan="2">
<img style="border: 0px none ;" src="/images/logo-small.png"/><br/>
<img style="border:none;" src="/images/account_management.png"/>
</td>
</tr>
<tr>
<td colspan="2" align="center" style="font-weight:bold;font-size:12px;color:#5a5a5a; text-align:center; line-height:18px;" >
The site makes extensive use of JavaScript.<br/>
Please enable <span style="color:red;">JavaScript</span> in your browser.
</td>
</tr>
<tr>
<td valign="top" align="center" style="padding-top:24px;" colspan="2">
</td></tr>
</table>
</div>
</div>
</div>
</noscript>
<!-- [END] Following code is get runed to show pop-up when javascript is disabled -->
This works in my tests in IE8 and Chrome13
<html>
<head>
<noscript>
Your browser do not support javascript or javascript is currently disabled.<br/>
Enable javascript and press button <Reload Page><br/>
<form name="noscript_reload" method="GET">
<input type="submit" value="Reload Page"/>
</form>
</noscript>
</head>
<body>
BODY TEXT
</body>
</html>
I think the only way to get it to "reload" without javascript would be to make your OK button be an anchor tag with an href pointing to the same page.