I have problems accessing my form from the JS file, and I don't know how to access it. Here's my code:
$("#my-form").submit(function(e) {
e.preventDefault();
var textInput = $("#my-input").val();
$("#container").html(textInput);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" class="container-fluid"></div>
<script id="view-contact" type="text/html">
<form id="my-form" class="form">
<input id="my-input" type="text">
<input type="submit">
</form>
</script>
Don't put your html inside the <script> tag. Put your JavaScript / JQuery inside the script tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" class="container-fluid"></div>
<form id="my-form" class="form">
<input id="my-input" type="text">
<input type="submit">
</form>
<script>
$("#my-form").submit(function(e) {
e.preventDefault();
var textInput = $("#my-input").val();
$("#container").html(textInput);
});
</script>
Related
When I'm running this code it is not showing me the message which I want to display (i.e: res).Suppose I'm giving an input "$code$".Can anyone just help me out?
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>Enter a sample message</h1>
<form>
<input type="text" name="a" id="a">
<button onclick="parse()">submit</button>
<p id="a"></p>
</form>
<script>
function parse(){
var msg=document.getElementById("a").innerHTML;
var res=msg.replace("$code$","1101");
document.getElementById("a").innerHTML=res;//this is to print res.
}
</script>
</body>
</html>
Two elements can't have the same ID. Further, an input element's value can not be obtained using the innerHTML property. Also, on clicking the submit button, the page will reload since the form get's submitted. To prevent that, call the function parse in an onsubmit on the <form> tag, and return false from the function.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>Enter a sample message</h1>
<form onsubmit="return parse();">
<input type="text" name="a" id="a">
<button type="submit">submit</button>
<p id="b"></p>
</form>
<script>
function parse(){
var msg = document.getElementById("a").value;
document.getElementById("b").innerHTML = msg;
return false;
}
</script>
</body>
</html>
Check this:
<form>
<input type="text" name="a" class="input_field" id="a">
<button type="button" onclick="parse()">submit</button>
<p id="a"></p>
</form>
<script>
function parse(){
var msg=document.getElementById("a").innerHTML;
var form = document.getElementsByTagName("form")[0]
msg = form.getElementsByClassName("input_field")[0].value;//this is to print res.
}
</script>
I added type="button" to the button to prevent the form from reloading the page
form.html
function validate() {
var name = document.Myform.name.value;
document.write(name);
}
<html>
<head>
<script src="validations.js"></script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name" /><br/><br/>
<input type="submit" />
</form>
</body>
</html>
Output: undefined
After typing my name in input box it is showing undefined.
The Problem is on your input. you should change t he name=="name" to name="name". Then change your validate function to us getElementsByName. See the code below:
<html>
<head>
<script>
function validate(){
var name=document.getElementsByName('name')[0].value;
document.write(name);
}
</script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name"><br><br>
<input type="submit" />
</form>
</body>
</html>
dont make use of name attribute it old way of W3C standard, from long time they are suggesting make use of id attribute.
you code needs to be like this
<input type="text" id="txtname"/><br><br>
and javascript like
var name=document.getElementById("txtname").value;
You just have to fix your name=="name". In HTML we use = to assign attribute values/
function validate() {
var name = document.Myform.name.value;
document.write(name);
}
<html>
<head>
<script src="validations.js"></script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name" /><br><br>
<input type="submit" />
</form>
</body>
</html>
the validate function doesn't return anything as would usually be the case for this type of event hander ~ it will instead simply write the name ~ is that the desired result?
<html>
<head>
<title>form validation</title>
<script src="validations.js"></script>
<script>
function validate(e){
e.preventDefault();
var name=e.target.querySelector('input[ name="name" ]').value;
document.write( name );
return true;
}
</script>
</head>
<body>
<form name="Myform" onsubmit="return validate(event)">
Enter name: <input type="text" name="name"/><br><br>
<input type="submit" />
</form>
</body>
</html>
I have three pages new.html, somepage.html, and someotherpage.html
new.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">Some page</div>
<div id="content">show the stuff</div>
When clicking on the somepage.html link, it is displayed in div having id content.
somepage.html
<form id="form" action="someotherpage.html" method="post">
<input type="submit" value="test"/>
</form>
The action of the form goes to a new page, whereas I want it to be in the same div only where the actual form was.
You will have to do something very similar as you the first page, load someotherpage.html in a sibling of your form :
somepage.html :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script>
$('#form').submit(function(e) {
e.preventDefault();
$('#target').load($(this).attr('action'));
});
</script>
<div id="formWrapper">
<form id="form" action="someotherpage.html" method="post">
<input type="submit" value="test"/>
</form>
<div id="target"></div>
</div>
I have two html pages named order.html,check.html and test.js(included in both html files)
When i click on submit button in order.html,amount field value from order.html should get updated/populate into cost field of check.html.
Below is the code i am using but its not working,can someone let me know whats wrong??
order.html
<html>
<head>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<form name="order" action="check.html" method="get">
name:<input type ="text" id="amount" name="amount">
<input type="submit" value="finish" onclick="cost()" >
</form>
</body>
</html>
check.html
<head>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<form name="check" action="confirm.html" method="get">
<input type="text" name="cost" id="cost" readonly="readonly">
</form>
</body>
</html>
test.js
function cost(){
var amount= $("#amount").val();
jQuery.load("check.html",function(){
$("#cost").html(amount);
});
}
Your order.html input type submit should be input type button.
Change your test.js to
function cost(){
var amount= $("#amount").val();
$('body').load("check.html",function(){
$("#cost").val(amount);
});
}
And input type="button"
Try this:
order.html:
<html>
<head>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="main_div">
<form name="order" action="check.html" method="get">
name:<input type="text" id="amount" name="amount"> <input
type="button" value="finish" id="submit_btn">
</form>
</div>
</body>
</html>
Jquery:
$(document).ready(function() {
$('#submit_btn').click(function() {
var amount = $("#amount").val();
$('#main_div').load("check.html", function() {
$('#main_div').find("#cost").val(amount);
});
});
});
i'm trying to send data via javascript through a form, however it's not working. any ideas why?
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form method="get" action="test.php">
<input id="myvar" type="hidden" name="albumid" />
<button type="submit" id="btnsubmit">Submit</button>
</form>
<script type="text/javascript">
$("#btnsubmit").click(function(){
var album = '11';
document.getElementById('myvar').value = album;
});
</script>
test.php
<?php echo $_GET["albumid"]; ?>
You need to stop default action on submit event:
$("#btnsubmit").click(function(e){
e.preventDefault();
var album = '11';
$('#myvar').val(album);
});
There are several issues:
You're missing http: in src when loading jquery library
Since you loading jquery use it $('#myvar').val(album);. See more on val()
That being said try
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form method="get" action="test.php">
<input id="myvar" type="hidden" name="albumid" />
<button type="submit" id="btnsubmit">Submit</button>
</form>
<script type="text/javascript">
$('form').submit(function() {
var album = '11';
$('#myvar').val(album);
});
</script>
Give an id to form and submit the form
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form id="myform" method="get" action="test.php">
<input id="myvar" type="hidden" name="albumid" />
<button type="submit" id="btnsubmit">Submit</button>
</form>
<script type="text/javascript">
$("#btnsubmit").click(function(){
var album = '11';
document.getElementById('myvar').value = album;
document.getElementById('myform').submit();
});
</script>