In my view, I want two buttons to populate three hidden fields of a form and submit it. It's not working, and I can't know why. Any ideas?
I have the following code:
<script language="javascript" type="text/javascript">
function FillAndSubmit(thisid) {
$('input[name=First]').val(thisid);
$('input[name=Second]').val(#Model.ID);
$('input[name=Third]').val(#ViewBag.Something);
document.form.submit();
}
</script>
A have a form with invisible fields:
#using (Html.BeginForm(null, null, FormMethod.Post,
new { name = "form", id = "form" }))
{
#Html.Hidden("First")
#Html.Hidden("Second")
#Html.Hidden("Third")
}
And two buttons:
<button class="Button" id="ButtonA" onclick="javascript:FillAndSubmit(this.id);">
CaptionA
</button>
<button class="Button" id="ButtonB" onclick="javascript:FillAndSubmit(this.id);">
CaptionB
</button>
If I put the buttons inside the scope of the form, it submits but without populating the hidden fields. So, it is just not calling the function. Javascript is working in other pages of the same application.
ADDED:
Generated source:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
function Botao(thisid) {
$('input[name=First]').val(thisid);
$('input[name=Second]').val(41);
$('input[name=Third]').val(10/5/2012 1:58:02 PM);
document.form.submit();
}
</script>
...
Some div's with some text
...
<form action="/Controller/Action/" id="form" method="post" name="form"><input id="First" name="First" type="hidden" value="" /><input data-val="true" data-val-required="The DateTime field is required." id="Second" name="Second" type="hidden" value="10/5/2012 1:58:02 PM" /><input id="Third" name="Third" type="hidden" value="" /></form>
<button class="Button" id="ButtonA" onclick="javascript:Botao(this.id);">
CaptionA
</button>
<button class="myButton" id="ButtonB" onclick="javascript:Botao(this.id);">
CaptionB
</button>
</body>
</html>
This needs quotes:
$('input[name=momentoDaConsulta]').val("10/5/2012 1:58:02 PM");
JQuery's .val(value) accepts either string or array of strings, place quotes around #Model.ID and #ViewBag.Something:
$('input[name=Second]').val("#Model.ID");
$('input[name=Third]').val("#ViewBag.Something");
Related
I am trying to call a function in an external JavaScript file from an HTML-file. The goal is to work with the content of a form there.
I tried so many things and always got the Error "ReferenceError: Can't find variable: X"
The positioning of the jquery javascript file loading
The positioning of the <script src="XXX"> call
Calling the function from the button "onclick" or the form "onsubmit"
Trying to call the javascript file from an embedded script in the HTML
This is what my JavaScript file and my HTML looks like right now:
function submit(e) {
answerText = document.getElementById("text").value;
// Do something with it.
}
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit(e)">Send</button>
</form>
</body>
I also tried
function doSomething() {
// Do something
}
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit(e)">Send</button>
</form>
<script>
function submit(e) {
doSomething();
}
</script>
</body>
In both cases, it returned the same error over and over again: "ReferenceError: Can't find variable: X". In the first example, X being "submit" and in the second "doSomething".
All help is very welcome. I know there are similar headlines here, but non of the solutions did anything for me.
Hey so when I ran the code without the e as a parameter for the submit function in the html it didn't give me the error. I think it may be because the e is the place holder for the text of the submit function in this case. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit()">Send</button>
</form>
<script type="text/javascript">
function submit(e) {
answerText = document.getElementById("text").value;
// Do something with it.
}
</script>
</body>
</html>
i create a very simple website with javascript and html and all i want to do is log input value to the console and my console is printing something and immediately delete it
html:
const alertFunction = () => {
console.log(document.getElementsByClassName("input"))
}
<!DOCTYPE html>
<html>
<head>
<link href="./styles.css" rel="stylesheet" type="text/css">
<script src="./script.js"></script>
<title>Button With Alert</title>
</head>
<body>
<form>
<input placeholder="Please type your name" class="input" type="text">
<br />
<button class="button" onclick="alertFunction()">Alert Your Name</button>
</form>
</body>
</html>
You have few issues in you code:
Since the default type of button is submit, on clicking it from submission is happening. Thus everything disappears. To prevent the form submission you can either use event.preventDefault() inside the event handler function or specify the type="button" in the element.
Document.getElementsByClassName() returns an array-like object of all child elements which have all of the given class names. You have to use proper index to get the specific element. Finally get the value from the input using value property.
const alertFunction = () => {
console.log(document.getElementsByClassName("input")[0].value)
}
<!DOCTYPE html>
<html>
<head>
<link href="./styles.css" rel="stylesheet" type="text/css">
<script src="./script.js"></script>
<title>Button With Alert</title>
</head>
<body>
<form>
<input placeholder="Please type your name" class="input" type="text">
<br />
<button type="button" class="button" onclick="alertFunction()">Alert Your Name</button>
</form>
</body>
</html>
getElementsByClassName returns an NodeList object. Access the element and get value using .value.
Also use input type=button instead of button. Because button click will perform submit event which is not required
Refer- https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
const alertFunction = function() {
console.log(document.getElementsByClassName("input")[0].value)
}
<!DOCTYPE html>
<html>
<body>
<form>
<input placeholder="Please type your name" class="input" type="text">
<br />
<input type="button" class="button" onclick="alertFunction()" value="Alert Your Name">
</form>
</body>
</html>
You need to prevent the default event of form submit
const alertFunction = (event) => {
console.log(document.getElementsByClassName("input")[0].value);
event.preventDefault();
}
<!DOCTYPE html>
<html>
<head>
<link href="./styles.css" rel="stylesheet" type="text/css">
<script src="./script.js"></script>
<title>Button With Alert</title>
</head>
<body>
<form>
<input placeholder="Please type your name" class="input" type="text">
<br />
<button class="button" onclick="alertFunction(event)">Alert Your Name</button>
</form>
</body>
</html>
Below is my part in my html page which is to get a threshold value and to call a function with the value
<form id="distance_input" onSubmit="return false;" >
<p>Enter a threshold</p>
<div class="col-md-8" style="display: inline-block; left:-30px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" id="usr" class="search" onkeydown="search(this)"> </input>
<span class="input-group-addon" style="width: 50px">km</span>
</div>
</div>
<div class="col-md-4" style="padding-left:0px; margin-left:-10px">
<input type="button" class="btn btn-success" value="Submit" id="myButton"> </input>
</div>
</div>
<p> </p>
</form>
<script type="text/javascript">
$('#myButton').click(function(){
var value = $("input[type=text]").val();
console.log(value+ " from the submit button");
set_to_threshold(value);
});
function search(ele) {
if(event.keyCode == 13) {
console.log(ele.value+" from enter button");
set_tothreshold(ele.value);
}
}
</script>
But when I do this I get the graphs do not get refreshed( set_tothreshold function gets new data for graph when the value is passes in the function) and shows that
Uncaught ReferenceError: search is not defined
at HTMLInputElement.onkeydown
when I tried with
<script type="text/javascript">
$('#myButton').click(function(){
var value = $("input[type=text]").val();
console.log(value+ " from the submit button");
set_to_threshold(value);
});
</script>
also when I press submit button no changes happened(even does not prints value in console).But why does the value does not get printed.Any help is appreciated.
$('#myButton').click(function(){
var value = $("input[type=text]").val();
console.log(value);
set_to_threshold(value);
});
function set_to_threshold(val){
console.log('do something here with val ', val);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<input type="text" value="input something"/>
<button id="myButton">click</button>
</body>
</html>
this is what you want . yourfunction call when form submit
<form id="distance_input" onSubmit="yourFunction(); return false;" >
Kindly include jquery in your file. It works fine.
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
Include this at the head section of the html page. And also there u referred function set_to_threshold() which is undefined. So only you are getting the error. Kindly write a function for it. it'll work!
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);
}
I have a JSP page with a form. I want to submit and return the input to the JSP page. I can't get it to work.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ejemplo</title>
<script type="text/JavaScript" src="Scripts/jquery-1.9.1.js"></script>
<script>
function enviarDatos() {
form = document.getElementById("datos");
form.datoIntroducido.value = "holaaaaaa";
form.submit();
<%System.out.println(request.getParameter("datoIntroducido"));%>
}
</script>
</head>
<body>
<h3>Ejemplo</h3>
<form name="datos" id="datos" action="mypage" method="post" enctype="multipart/form-data">
Escribe aquí: </br>
<textarea cols=50 rows=10 id="texto"></textarea><br />
<input type="hidden" name="datoIntroducido" id="datoIntroducido"/>
<input type="submit" value="Enviar datos" class="btn-primary" onclick="enviarDatos();"/>
</form>
</div>
</body>
</html>
It prints "null" when executing the first time but it doesnt write anything when pressing the button