click function is not working on button - javascript

i am trying to make a list and submit button and the user enters the list size and then after clicking on a button the form is submitted (list size is sent to the servlet ) and an alert should appear .. but the alert is not working .. here is my code
<body>
<form action="ServerSide" method="post">
Enter list Size:<input type="text" name="listsize">
<input type="submit" value="Submit" id="btn">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
alert("anything");
});
});
</script>
</body>

You can try this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Also read this document DOCS

First of all make sure you are including/referencing JQuery Libray before you use JQuery. it should work.
Secondly you can use this
<body>
<form action="ServerSide" method="post" id="myform">
Enter list Size:<input type="text" name="listsize">
<input type="button" value="Submit" id="btn">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").on('click',(function(){
alert("anything");
}));
});
</script>
</body>
I also notice that you had used input type submit it will submit form instead of calling click function. you should change type to button
if you want to do something on form submission you have to use onsubmit event
<body>
<form action="ServerSide" method="post" id="myform">
Enter list Size:<input type="text" name="listsize">
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit(function(){
alert("anything");
});
});
</script>
</body>
For this you don't need to add click listener on the submit button. once you submit form it will show you alert.

Related

Form submit function not working

This is my basic html page.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body >
<form id="#forgotform">
<input type="email" id="email" placeholder="Enter your email" required="required" />
<input type="submit" value="submit" />
</form>
</body>
<script>
$(document).ready(function(){
$('#forgotform').on('submit', function() {
alert('You submitted the form!');
});
});
</script>
</html>
I am trying to do something on submit form #forgotform, but it is not even triggering an alert on submitting the form. Please help me out.
replace <form id="#forgotform"> this with <form id="forgotform">.May be this will work.
Remove the '#' from the <form id="#forgotform">. There is no need to put '#' while adding id to an element in HTML.
You can also try this
$("#form-id").submit(function(){
alert("Submitted");
});
Your HTML Form
<form id="form-id">..</form>

Replace div after form submit

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#p").replaceWith($("#p1"));
});
});
</script>
</head>
<body>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<form action="" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
</body>
</html>
This code works fine until I put form action.. When I keep that submit in a form, this code does not work. How can i replace that div after form submit. Thanks.
You can try this one. Hope it helps!
$(document).ready(function(){
$("#submit").click(function(event){
$("#p").replaceWith($("#p1").text());
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<form action="" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
you need text method for that .
you were removing entire element before . you need to remove only text value
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#p").replaceWith($("#p1").text());
});
});
</script>
</head>
<body>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<input type="submit" id="submit" name="submit" value="Search"/>
</body>
</html>
Specify what to replace it with:
$(this).replaceWith("<div><p>Replacement</p></div>");
Form submission needs to be done using AJAX then only you can achieve this which you want to do.
Otherwise the form will submit and page will refresh which will result to re initialization of script.
As Pooojaaqaa and Rayon mention the when the action attribute is set on the form tag, the form is submitted and the page is reloaded (even if action="#"). To catch this action you need to catch the form's submit event, not the button's click event. In the submit event handler you need to call preventDefault() on the event object passed into the handling function like below.
<form id="frmSearch" action="#" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
$("#frmSearch").submit(function(ev){
ev.preventDefault();
$("#p").replaceWith($("#p1").text());
});

Creating Dynamic Textbox , but code not working

I have just started learning java script.I am trying to make Dynamic text box but the my code is not working . Can someone help me in rectifying my mistake??
<html>
<head>
</head>
<body>
<script language="javascript">
function add(){
var text=document.createElement('input');
var add=document.getElementById("Myform");
text.setAttribute("type","text");
text.setAttribute("name","BookName");
add.appendChild(text);
}
</script>
<form action="new1.php" id="Myform">
<input type="submit" value="Submit" id="submit" onclick="javascript:add();"/> <br/>
</form>
</body>
</html>
The text box disappears before I can do anything with it.
Change the input type as button or other wise it will submit the form.You want the submit button means you have to add one more button for dynamic action.
<input type="button" value="Submit" id="submit" onclick="javascript:add();"/>
You need stop submit like this:
function add(){
var text=document.createElement('input');
var add=document.getElementById("Myform");
text.setAttribute("type","text");
text.setAttribute("name","BookName");
add.appendChild(text);
}
<form action="new1.php" id="Myform" onsubmit="event.preventDefault();">
<input type="submit" value="Submit" id="submit" onclick="javascript:add();"/> <br/>
</form>
Try this plunker
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form action="new1.php" id="Myform">
<input type="button" value="Submit" id="submit" onclick="add();"/> <br/>
</form>
</body>
</html>
JS
function add(){
var text=document.createElement('input');
var add=document.getElementById("Myform");
text.setAttribute("type","text");
text.setAttribute("name","BookName");
add.appendChild(text);
}

onsubmit return false does not work, form still submits?

This is the code
<html>
<head>
<script>
function test() {
return false;
}
</script>
</head>
<body>
<form method="post" action="../test.php">
<input type="submit" onsubmit="return test()">
</form>
</body>
</html>
how is the form still submitting, it makes no sense to me??
You need to stop form submission, when user submits it by clicking the submit button in the form.
Change onsubmit of the submit button to onclick
<input type = "submit" onsubmit= "return test()">
Should be
<input type="submit" onclick="return test()">
<!-- ^^^^^^^^^^^^^^^^^^^^^^^ -->
If you want to use onsubmit, you can use it on form element.
<form method="post" action="../test.php" onsubmit="return test()">
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^ -->
<input type="submit" />
</form>
<html>
<head>
<script>
function test(e) {
e.preventDefault();
return false;
}
</script>
</head>
<body>
<form method="post" action="../test.php" onsubmit="return test(event);">
<input type="submit">
</form>
</body>

How to pass value to previous html page

I have a HTML page with a textbox. On clicking the textbox, a pop-up shows up and upon clicking the OK button the pop-up has to close and the textbox in the first html page has to be filled with value given in the second HTML.
I tried something like this,
one.html
<form name="form1" >
<input type="text" name="source" onclick="window.open('second.html')" />
</form>
second.html
<input type="button" onclick="{document.form1.source.value='hello';window.close()}" />
in your first.html
<form name="form1" >
<input type="text" id="txt1" name="source" onclick="window.open('second.html')" />
</form>
<script type="text/javascript" >
function setvalue(args)
{
document.getElementByid('txt1').value=args;
}
</script>
second.html
<input type="button" onclick="settoparent()" />
<script type="javascript">
function settoparent()
{
if(window.opener.setvalue!=undefined)
{
setvalue("textboxvaluefromHTML2");
}
window.close()
}
</script>
You have to use
window.opener.$("#yourtextfieldid").val(value);
to achieve this
In Your vanila JS
window.opener.document.yourelementID.fieldname.value="Any value";

Categories