Suppose a function trigger on Click button
<!DOCTYPE HTML>
<html lang="en">
<!--getElementsByTagName.html-->
<head>
<title>getElementsByTagName.html</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="getElementsByTagName.css"/>
<script type="text/javascript">
//<![CDATA[
function getData(){
inputTag=document.getElementsByTagName("input");
divOutput=document.getElementById("output");
alert(inputTag.length);//length of input Tag
for(i=0;i<inputTag.length-1;i++){
if((inputTag[i].value=="") || (inputTag[i+1].value=="")){
alert("Please Enter Value");
}else{
a=inputTag[i].value;
b=inputTag[i+1].value;
}
}
$("#output").css("display","block");
divOutput.innerHTML="<strong>"+a+"<\/strong>";
divOutput.innerHTML+="<br\/>"+"<strong>"+b+"<\/strong>";
}//end function
//]]>
</script>
</head>
<body>
<form action="">
<fieldset>
<legend>Example getElementsByTagName</legend>
<label>Name</label>
<input type="text" id="txtName"/>
<label for="txtName">Password</label>
<input type="password" id="txtPassword"/>
<button type="button" onclick="getData()">
Submit
</button>
</fieldset>
<div id="output">
</div>
</form>
</body>
</html>
Is this right?? $("#output").css("display","block");
This code not working i.e. after click on submit button it doesn't show the output div?
Add this code:
$( "#output" ).on( "click", function() {
this.css("display", "block");
});
Related
In the given code , I am trying to print the message but after taking input its not printing any message.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
}
</script>
</body>
</html>
Pressing the submit button will refresh the page.
event.preventDefault(); use this keyword.
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
event.preventDefault();
}
</script>
It was working, but after submitting form, all of content disappeared. You need to add event.preventDefault(); to onsubmit attribute of form:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="event.preventDefault(); return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
}
</script>
</body>
</html>
event.preventDefault()
It is working, it's just that when you click that submit button the page reloads. I tried it out, and you can fix it by adding e.preventDefault(); to your function, and put (e) as the arg in the function, like so:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="event.preventDefault(); return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password: "+y;
}
</script>
</body>
</html>
Your code works, but the message will disappear because the form is successfully submitted. If you want it to stay on the screen, just return false from the Ak() function:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
return false;
}
</script>
</body>
</html>
i don't know why this code don't work correctly. I want print "AAAAA" only when i click in the button, but if i launch this and i click in the button, don't change nothing and the string is every time printed. Why don't work?
<html>
<head>
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="ISO-8859-1">
</head>
<body>
<%
if(request.getParameter("buttonName") != null) {
out.println("AAAAAA");
}
%>
<FORM NAME="form1" METHOD="POST">
<INPUT TYPE="HIDDEN" NAME="buttonName">
<INPUT TYPE="BUTTON" VALUE="Button 1" ONCLICK="button1()">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
function button1()
{
document.form1.buttonName.value = "yes";
form1.submit();
}
</SCRIPT>
</body>
</html>
Is this code correct? I want the 'submit' to validate the field (to make sure a value has been entered) and if this is correct (there is a value) then fade and display.
Currently, the form fades even when no value is entered? I feel I'm missing something really simple here!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<link rel='stylesheet' type='text/css' href='styles.css' />
<meta charset="utf-8"-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<div id="sidebarf">
<form id="sidebarform" name="myForm" onsubmit="return validateForm()" method="post">
<input type="text" id="sidebarusername" name="fname" placeholder="Name" required>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
</div>
<script>
$("#sidebarformsubmit").click( function(){
$("#sidebarform").fadeOut("slow", function(){
$("#sidebarf").html("hello " + $("#sidebarusername").val() )
});
});
</script>
</body>
</html>
Judging by your comment on the other answer, you don't care if this actually gets submitted, so you could do the following:
HTML:
<div id="sidebarf">
<form id="sidebarform" name="myForm" method="post">
<input type="text" id="sidebarusername" name="fname" placeholder="Name" />
<input type="submit" id="sidebarformsubmit" value="Submit" />
</form>
JS:
$(document).ready(function() {
$('#sidebarform').on('submit', function() {
if ($('#sidebarusername').val() == '') {
alert('First name must be filled out');
return false;
}
$("#sidebarform").fadeOut("slow", function(){
$("#sidebarf").html("hello " + $("#sidebarusername").val() );
});
return false;
});
});
Working example:
http://jsfiddle.net/3z5x8/
Your validation is bound to the submit event. The click event will always be fullfilled.
Bind your handler to the submit event also
$("#sidebarformsubmit").submit( function(){.....
Unless you are submitting with ajax the form will cause a page refresh also which means your fade and show new html won't work
I've made a simple test case that is suppose to take the value in the textarea and put it in the div with the id "submit-output" without refreshing, but for some reason it doesn't work.
clicking the submit button doesn't seem to call the postMessage() function, and even reloads the page when I have return false in there at the end.
Can someone please tell me why the submit button is using the default behavior?
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Case</title>
</head>
<body>
<div id="submit-output">[No output]</div>
<form id="post-form">
<textarea name="post" rows="2" cols="50"></textarea>
<input type=submit value="Submit" id="submitbutton" onclick="postMessage()">
</form>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function() {
function postMessage(){
$('#post-form').submit(function(){
console.log("submit");
$('submit-output').html($('#post-form').children('.post').val());
console.log("submitted");
elem.children('.post').val("");
return false;
});
}
});
</script>
</body>
</html>
You shouldn't use the "click" event of a submit button, only the "submit" event of the form.
Also, the $('submit-output') command will try to find a TAG with this name, not the ID, you should use $("#submit-output") instead.
Other important thing: you need to use e.preventDefault() to prevent the event posting the form.
Code working:
<div id="submit-output">[No output]</div>
<form id="post-form">
<textarea id="txtInput" name="post" rows="2" cols="50"></textarea>
<input type="submit" value="Submit" id="submitbutton" />
</form>
Javascript:
$(document).ready(function() {
$("#post-form").submit(function(e) {
e.preventDefault();
$("#submit-output").html($("#txtInput").val());
$("#txtInput").val("");
});
});
DEMO FIDDLE
You don't need onclick="postMessage()" in the input tag, remove that and remove the postMessage() function. Also add event.preventDefault(); like this:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Case</title>
</head>
<body>
<div id="submit-output">[No output]</div>
<form id="post-form">
<textarea name="post" rows="2" cols="50"></textarea>
<input type=submit value="Submit" id="submitbutton">
</form>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function() {
$('#post-form').submit(function(event){
event.preventDefault();
console.log("submit");
$('#submit-output').html($('#post-form').children('.post').val());
console.log("submitted");
return false;
});
});
</script>
</body>
</html>
`
Test Case
<div id="submit-output">[No output]</div>
<form id="post-form">
<textarea name="post" rows="2" cols="50"></textarea>
<input type=submit value="Submit" id="submitbutton" >
</form>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function() {
function postMessage(){
console.log("submit");
$('#submit-output').html($('#post-form').children('.post').val());
console.log("submitted");
elem.children('.post').val("");
return false;
}
$('#post-form').submit(postMessage);
});
</script>
</body>
`
Try this
I'm trying to get text from a text input, append it to a URL, and go to that URL, using Javascript. But when I submit, it appears to just reload the page.
http://jsfiddle.net/E3vv6/
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css" />
<script type="text/javascript">
function loadSearchResult(searchToLoad) {
window.location = "https://encrypted.google.com/search?q=" + searchToLoad;
}
</script>
</head>
<body>
<form onsubmit="loadSearchResult(document.getElementById('googleBox').value)" method="post">
<fieldset>
<legend>Search</legend>
<input type="text" id="googleBox">
</fieldset>
</form>
</body>
</html>
You need to use event.preventDefault() in the submit function.
Live Demo (click).
Further, inline js (onsubmit in your html) is bad practice for a lot of reasons. Here are some: https://www.google.com/search?q=Why+is+inline+js+bad%3F
If would be better to get a reference to the form with javascript and attach the event listener.
<form id="myForm">
<input type="submit" value="Submit">
</form>
JavaScript:
var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(e) {
myFunction();
e.preventDefault();
});
function myFunction() {
console.log('submitted!');
}
You need to prevent the default behaviour of the onsubmit.
You could use return false:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css" />
<script type="text/javascript">
function loadSearchResult(searchToLoad) {
window.location = "https://encrypted.google.com/search?q=" + searchToLoad;
return false;
}
</script>
</head>
<body>
<form onsubmit="return loadSearchResult(document.getElementById('googleBox').value)" method="post">
<fieldset>
<legend>Search</legend>
<input type="text" id="googleBox">
</fieldset>
</form>
</body>
</html>