How to Show and Hide upon button OnClick (CSS or JQuery) - JavaScript Discussion Boards

Thanks for the help. I still can't get it to work. Chrome Javascript console says Uncaught TypeError: Object #<HTMLDocument> has no method 'writeIn'
Can you give hint on the approach you prefer? I'm a newbie on Javascript.

Thanks,

Below is code I have been trying. Everything works except the focus. When the alert box's OK is clicked, focus is not set to the blank text/textarea control that caused the error to happen. According to articles online, this should work but it is not. Any suggestions would be greatly appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
<meta "charset=utf-8" />
<title>Trying It Out</title>
<script type="text/javascript">
    function checkForm()
    {
        var str = ''; //for testing purposes later
        var e = document.getElementById('myForm').elements;
		
       //Insert for statement here//
		for(i=0; i <= e; i++){
			if(e[i].value.length <1){
				alert("The field " + e.[i].name + " is blank");
				var mytext = document.getElementById(e[i].name)
				mytext.focus();
				return false;
				
			}
		}

     }
</script>
</head>

<body>

<form id="myForm" name="myForm" action="showIt.htm">
<p>
Your Name: <br /><br />
<input type="text" name="Your_Name" value="enter your name" />
</p>
<p>
Interesting Fact About You: <br /><br />
<textarea name="Interesting_Fact">something about you</textarea>
</p>
<input type="submit" value="Submit Data" onclick="return checkForm(this.form);" />

</form>
<hr />
<div id="showTheValues"></div>
</body>
</html>

It could be the syntax error, add a semicolon at the end of this line:

JavaScript

var mytext = document.getElementById(e[i].name)

Please note the changes...

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta "charset=utf-8" />
<title>Trying It Out</title>
<script type="text/javascript">
    function checkForm()
    {
        var str = ''; //for testing purposes later
        var e = document.getElementById("myForm").elements;
        for (var i = 0; i < e.length; i++) {
          var val = e[i].value;
            if (val.length == "" ) {
              alert("The Field  " + e[i].name + "  is blank")
              e[i].focus();
              return false;
            }
        }
     }
</script>
</head>
 
<body>
 
<form id="myForm" name="myForm" action="showIt.htm">
<p>
Your Name: 
 

<input id="Your_Name" type="text" name="Your_Name" value="enter your name" />
</p>
<p>
Interesting Fact About You: 
 

<textarea id="Interesting_Fact" name="Interesting_Fact">something about you</textarea>
</p>
<input type="submit" value="Submit Data" onclick="return checkForm()" />
 
</form>
<hr />
<div id="showTheValues"></div>
</body>
</html>

modified 19-Apr-14 16:50pm.

Please use following solution. I have verified and it is working fine for textbox.

JavaScript

function checkForm()
   {
       var str = ''; //for testing purposes later
       var e = document.getElementsByTagName('input');

      //Insert for statement here//
       for(i=0; i <= e.length; i++){
           var type = e[i].getAttribute('type');
           if(type == "text" || type == "textarea"){
               if(e[i].value.length <1){
                   alert("The field " + e[i].name + " is blank");
                   e[i].focus();
                   return false;
               }
           }
       }
    }

Thank you. I works fine.

e.[i].name
what's the f***ing dot between e and [i] for?

XML

Hi,
I have Two text boxes which are hide when it's in a list. After Clicking Edit, I would like to show the text boxes visible.
From the below code when I say the text box "visible" it displays accordingly. But I need to show the text boxes when it's in a edit mode.
Please help me how to visible/show when i click the button.
- show the text boxes after i click the "Edit" button
- hide the text boxes after I click the "save" button.
Thanks for reading and help would be great.
@model IEnumerable<NameList>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
function ShowEdit(par) {
$("#divBDate-" + par).attr("class", "hide");
$("#txtBDate-" + par).attr("class", "visible");
$("#divEDate-" + par).attr("class", "hide");
$("#txtEDate-" + par).attr("class", "visible");
$("#btnEdit-" + par).attr("class", "hide");
$("#btnSave-" + par).attr("class", "visible");
}

function SaveEdit(par) {
$("#divBDate-" + par).attr("class", "visible");
$("#txtBDate-" + par).attr("class", "hide");
$("#divEDate-" + par).attr("class", "visible");
$("#txtEDate-" + par).attr("class", "hide");
$("#btnEdit-" + par).attr("class", "visible");
$("#btnSave-" + par).attr("class", "hide");

var -bDate = $("#txtBDate-" + par).val();
var -dDate = $("#txtEDate-" + par).val();
var url = '@Url.Action("GetUser", "Cust")';
$.post(url, { RoleId: par, userId: -userId, startDate: -startDate },
function (data) {
$("#divResult").html(data);
});
}
</script>



<div id=divResult">
<table class="table">
<tr>
<th>Name</th>
<th>Area</th>
<th>Beginning Date</th>
<th>End Date</th>
</tr>

@foreach (NamesList n in Model)
{
<tr>
<td> @n.Name </td>
<td>@n.Area </td>
<td>
<div id="divBDate-@n.ID" class="visible">@n.BDate</div>
<input id="txtBDate-@n.ID type=" text" class="hide" value=@n.BDate />
</td>
<td>
<div id="divEndDate-@n.ID" class="visible">@n.EndDate</div>
<input id="txtEndDate-@n.ID type=" text" class="hide" value=@n.EndDate />
</td>
<td>
<button id="btnEdit-@n.ID" class="visible" onclick="ShowEdit(@n.ID); return false;">Edit</button>
<button id="btnSave-@n.ID" class="hide" onclick="SaveEdit(@n.ID); return false;">Save</button>
</td>

</tr>
}
</table>
</div>

This is also in QA. Please do not cross post.

How to Show/Hide upon Button OnClick? JavaScript or CSS.[^]

There are only 10 types of people in the world, those who understand binary and those who don't.

I want to call a server side function in javascript function, without AJAX involved. Possible??
Eg:

HTML

onblur=<%# checkname() %>

Any idea guys?

Without AJAX? Why? To call server side you have to go to the server with either a full postback or a partial postback (ajax).

There are only 10 types of people in the world, those who understand binary and those who don't.

no...it's a good idea to use AJAX.

$.ajax({
type: "GET",
url: url,
contentType: "application/json; charset=utf-8",
crossDomain: true,
dataType: "json",
success: function (msg) {
alert(Response.ErrorMessage )
},
error: function (e, status) {
alert(e + " Fail " + status)
}
});

Hi
i have created tree for data from table using javascript . But It will not be show correct output in tree structure. Please give me the correct codes for binding data from database into tree using javascript

There are 1,335,342 different ways to do a tree view. We can help much better if you will post your code and show us where you are stuck.

There are only 10 types of people in the world, those who understand binary and those who don't.

have you written code for the same?

Hi All,
I am trying to load large XML file(222 MB) using javascript for HTML format. It is taking a lot of time.
Can anyone suggest me to make it more efficient?
Any sample is more appreciated.

I am using something like below,

var xmlDoc=null;
if (window.ActiveXObject) //IE 8,9
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument ("","",null);
}
else
{
alert('Your browser cannot handle this script');
}

if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load('Load.xml'); // Large xml file
}

http://www.codeproject.com/Questions/749988/hi-how-to-validate-gridview-databound-textbox-valu

hi-how-to-validate-gridview-databound-textbox-value and duplicate record

Please do not spam the forums like this. Be patient, your question wiull be answered when someone has time and inclination to look at it.

Please do not cross post. This is the section for discussions so it would be more appropriate if you wanted to discuss various ways of validation. However, it looks like you just have a single question and don't need a discussion so Quick Answers is the right place.

There are only 10 types of people in the world, those who understand binary and those who don't.

What is this. is this your question or problem?

Hello guys! This is my 1° thread here. I'm' sorry my english ,but lets go ..i need your help!

I have 2 pages HTML , with javascript login (without database) .
Works with text file where username and password = txt file name ( leo123.txt)

I need get the username (when someone enter username) and pass data to next page.

Example : username : leo (Login.html) >>>>>>> (Main.html) Label Username = Leo
If username in Main.html page <> leo close this page

This is my code LOGIN.HTML

<script>
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false';
}
}
document.onmousedown=click
document.oncontextmenu = new Function("return false;")
</script>

<script type="text/javascript">

</script>

<div>
<script type="text/javascript">


HTML Code:

his.pass.value)">

<table>
<tr>
<td>Login box</td><td></td></tr>
<tr>

<td>Username: </td><td><input type="text" name="user" /></td>
</tr>
<tr>
<td>Password: </td><td><input type="password" name="pass" /></td>
</tr>
<tr>
<td colspan="4" align="left"><input type="submit" value="Login" /><input name="Lembrar" type="button" onclick="window.open('https://Main.html')" value="Lost your username?" /></td>
</tr>
</table>

</form>

AUTH.HTML ( CHECK OUR LOGIN )

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

<script type="text/javascript">

</script>
</head>
<body>
<script type="text/javascript">

</script>
</body>
</html>

</script>

Refer: A Quick Tutorial on JavaScript Variable Passing[^]

Thank you Lokuge for answering my quesiton 'How to create treeview using jstree', it worked for me after I correctd the error in my file, but I am running an error 'Microsoft Jscript runtime error: Object expected' after I moved all code to ASP.NET MVC 3, can you tell me what it means? Can I use a url from oneline, instead of loading javescript libary from my local folder? Thansk again.

Object expected means there is an issue in your code. Perhaps someone is calling a function that does not exist. You would need to narrow it down to the specific line of code that is causing the issue so you can fix it.

There are only 10 types of people in the world, those who understand binary and those who don't.