return js value in HTML - javascript

First tentative steps into client side. I'm having trouble finishing the following. My question is how do I return the value of a function in a HTML statement ...
<script language="Javascript">
function checkjava()
{
return 1
}
</script>
</head>
<body>
<form action="enabled_catch.php" method="get" name="your_form">
<input type="HIDDEN" name="answer" value="RETURN checkjava() HERE")>
<input type="submit" value="click me">
</form>
</body>
I'd appreciate your help
Thanks in advance
G

<head>
<script language="Javascript">
function checkjava() {
return 1
}
</script>
</head>
<body>
<form action="enabled_catch.php"
method="get"
name="your_form"
onsubmit="this.answer.value=checkjava();">
<input type="hidden" name="answer">
<input type="submit" value="click me">
</form>
</body>
No need for the id attribute.

<form action="enabled_catch.php" method="get" name="your_form" >
<input type="HIDDEN" name="answer" value="RETURN checkjava() HERE")>
<input type="submit" onclick="document.getElementById('answer').value=checkjava();" value="click me">

You would do something like that:
<script language="Javascript">
function checkjava()
{
return 1
}
</script>
</head>
<body>
<form action="enabled_catch.php" method="get" name="your_form" onsubmit="document.getElementById('answer').value=checkjava();">
<input type="HIDDEN" id="answer" >
<input type="submit" value="click me">
</form>
</body>
Basically on form submit you would set the value of the answer input to the result of the function call.
EDIT: placed onsubmit on the wrong element before (embarrassing).

I would have an id on the answer tag and then do it in the form onsubmit event.
Something like:
<form onsubmit="document.getElementById("answerId").value = checkJava()" action="enabled_catch.php" method="get" name="your_form">
<input type="HIDDEN" name="answer" id="answerId" value="RETURN checkjava() HERE")>
<input type="submit" value="click me">
</form>

Browser-side scripting is event driven. Unless an event is triggered, nothing happens.
You could listen to the click event on your submit button, and then manipulate the value of your hidden field:
<input type="hidden" id="answer" name="answer" value="")>
<input type="submit" value="click me"
onclick="document.getElementById('answer').value = checkjava();">
Note how we had to give an id to the hidden field, in order to be able to reference it with getElementById().
Also note that JavaScript is case sensitive: checkjava() and checkJava() are not the same.

<script>
document.your_form.answer.value = checkjava();
</script>
Unless you want to use a fancy JS library. =)

Related

Form Id can't recognise addEventListener

How do I solve the error cannot read property of 'addEventListener' of null ? when I add this code,document.getElementById("myForm").addEventListener("submit", SaveBookmark) in my JS file
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="button" id="submitBtn">Submit</button>
</form>
First please notice that you're calling DOM is loaded or duplicated formID.
This code is working fine. please change <button type="button"> to be <button type="submit" .../>
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", SaveBookmark);
function SaveBookmark() {
alert('success');
}
</script>
I'm by no means an expert but to avoid that error your JS should look like this
const myForm = document.getElementById("myForm");
if (myForm) {
myForm.addEventListener("submit", SaveBookmark)
}
This ensures that your form element exists before you add the event listener
Should work easily:
document.getElementById('myForm').addEventListener('submit', function() {
alert("yes!")
})
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
It does not work because you have a
<button type="button" id="submitBtn">Submit</button>
instead of:
<button type="submit" id="submitBtn">Submit</button>
and you're trying to reach submit event.
Anyway, i recommend you not to add event listeners due to resource wasting. Use it when it's the only option.
I let you another way to reach the same with default click eventlistener:
<form id="myForm">
<input type="text" id="siteName" size="75%" placeholder="Twitter"><tr>
<input type="text" placeholder="Website URL" size="75%" id="siteName"><br>
<button type="submit" id="submitBtn" onclick="saveBookmark()">Submit</button>
</form>
<script type="text/javascript">
function saveBookmark(){
alert ("Bookmark saved");
}
</script>
You'll click on submit button anyway so, use onclick event instead of creating an eventlistener. It works simplest and waste much less resources...
And remember to add action attribute to the form, trying to re-program defined behaviour will only make your software heavy and heavy on codelines and timeloads. Thats why know the language its important.
Hope it help!

Posting a javascript variable to PHP.

I have a javascript function to count the number of clicks. I wish to post the variable storing the count to PHP. I'm unsure why when I submit the form, the count is not echoed out. Below is the HTML file.
<html>
<head>
<title> js php </title>
<script>
var cnt=0;
function CountFun(){
cnt=parseInt(cnt)+parseInt(1);
var divData=document.getElementById("showCount");
divData.innerHTML="Number of Downloads: ("+cnt +")";//this part has been edited
}
</script>
</head>
<body>
<div id="showCount"></div>
<form action "submitClicks.php"id="form">
<input type="hidden" name="numberOfClicks" />
<input type="button" id="btnClick" value="Click me" onclick="CountFun()"/>
<input type="submit" value="Submit Clicks" />
</form>
</body>
</html>
Then this is my submit clicks page:
<?php
$number_of_clicks = $_POST["cnt"];
echo $number_of_clicks;
?>
Does this implementation look correct to you as when I click submit clicks, nothing happens. I'm expecting the number of clicks to be echoed.
<form action "submitClicks.php"id="form">
Should be:
<form action="submitClicks.php" id="form" method="post">
And shouldn't you have something like:
In HTML:
<input id="count" type="hidden" name="cnt" value="">
In your Javascript CountFun function:
document.getElementById('count').value = cnt;
Try this code:
<html>
<head>
<title> js php </title>
<script>
var cnt=0;
function CountFun(){
cnt=parseInt(cnt)+parseInt(1);
var divData=document.getElementById("showCount");
divData.value=cnt;//this part has been edited
document.getElementById("JustShow").innerHTML= cnt;
}
</script>
</head>
<body>
<div id="JustShow"></div>
<form action="submitClicks.php" id="form" method="post">
<input type="hidden" id="showCount" name="cnt" value="0" />
<input type="button" id="btnClick" value="Click me" onclick="CountFun()"/>
<input type="submit" value="Submit Clicks" />
</form>
</body>
</html>

Why does this code not add another field when clicking on the `add another field` input button?

Why does the following code not add another text input field when clicking on the add another field input button?
<html>
<head>
<script>
function add_field()
{
var elem = document.createElement("input");
elem.setAttribute('type','text');
elem.setAttribute('name','user');
document.body.insertBefore(elem, document.getElementById('su'));
}
</script>
</head>
<body>
<form name="input" method="get">
Put input here:<br>
<input type="text" name="user">
<input type="button" onclick="add_field()" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
</body>
</html>
According to the MDN reference page, you need to call parent.insertBefore(newElem, referenceElem). In your example, I suppose that <form> is the parent, not <body>. Changing the last line of your function to this:
var target = document.getElementById('su');
target.parentNode.insertBefore(elem, target);
will make it work.
jQuery solution here
<form name="input" method="get">
Put input here:<br>
<input id='ap' type="text" name="user">
<input id="addField" type="button" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
JavaScript
$('#addField').click(function(e)
{
$('<input type="text" />').insertBefore('#su')
});​​

Get the value from input using JavaScript

I have a form with an input textbox and a button. When I click on a button I want to go to a different page depending on the value of the input textbox. For example:
<form name="frm1" id="frm1" action="page.php">
<input type="text" name="txt_name" id="txt_name" value="simple text" />
<input type="button" Onclick="redirect_to('page2.php/?id=8&input=this.txt_name.value')" value="Save" />
</form>
How can I get this value? Can this be done without using a function?
Well I would recommend a function for following reasons:
Cleaner code.
Better way if you have multiple buttons.
Less code.
Better manageability.
Add this to your buttons
onclick="redirect('mytextbox.value');";
Add this to your markup inside <head>(just few lines of code):
<script type="text/javascript">
function redirect(value){
window.location="page.php/?id=8&input="+value.ToString();
}
</script>
Why wouldn't you just do this?
<form name="frm1" id="frm1" action="page2.php">
<input type="hidden" value="8" name="id" />
<input type="text" name="txt_name" id="txt_name" value="simple text" />
<input type="submit" value="Save" />
</form>
if you have something like :
<form>
<input type="text" name="formelem" />
<input type="button" />
</form>
you can put to the button :
onclick="redirect_to('page.php/?id=8&input='+this.form.formelem.value)"
you are on the button, so "this" will be the button and you need to get the form from which you can get the input
another way ( if you don't need a form for another purpose ) would be to just put :
<input type="text" id="formelem" />
<input type="button" onclick="redirect_to('page.php/?id=8&input='+document.getElementById('formelem').value)" />
onclick="window.location.href = 'page.php/?id=8&input=' +this.value.toString()"

Validate input form with Javascript

Is there something I'm doing wrong that stops the form validating? I can't seem to get it to validate when the checkbox is not clicked.
Your help will be appreciated.
<html>
<head>
<script type="text/javascript">
function validateTerms(){
valid = true;
if ( document.application-form.terms.checked == false ){
alert ( "Please accept the terms" );
valid = false;
}
return valid;
}
</script>
</head>
<body>
<form id="application-form" name="application-form" method="post" action=""><br />
<p><input type="checkbox" name="terms" value="terms" /><b> I have read the Terms *</b>. </p>
<input type="submit" value="Submit Application" onsubmit="return validateTerms()">
<input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
</form>
</body>
</html>
Input button doesn't have onsubmit event, use onclick instead. There were also other problems such as bad selection etc. , which are solved. See below
See a working demo here http://jsfiddle.net/ZHfX7/
<html>
<head>
</head>
<body>
<form id="application-form" name="application-form" method="post" action=""><br />
<p><input type="checkbox" id="terms" name="terms" value="terms" /><b> I have read the Terms *</b>. </p>
<input type="submit" value="Submit Application" onclick="return validateTerms()">
<input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
</form>
</body>
<script type="text/javascript">
function validateTerms(){
valid = true;
if ( !document.getElementById('terms').checked){
alert ( "Please accept the terms" );
valid = false;
}
return valid;
}
</script>
</html>
The onsubmit should be part of the <form> tag, not <input>.
<form id="application-form" name="application-form" method="post" action="" onsubmit="return validateTerms();">
You cannot use application-form inline in your document.application-form.terms. as its not a legal js identifier due to the hyphen.
Either give the checkbox an ID;
<input type="checkbox" name="terms" value="terms" id="terms" />
then reference it with
if (document.getElementById("terms").checked = ....
or use [] notation;
document.forms['application-form'].terms ...
application-form is not a valid name
onsubmit is not valid on input, moved to form
try -
<html>
<head>
<script type="text/javascript">
function validateTerms(){
if (document.application.terms.checked){
alert ( "Please accept the terms" );
return false;
}
return true;
}
</script>
</head>
<body>
<form id="application" name="application" method="post" action="" onsubmit="return validateTerms()"><br />
<p><input type="checkbox" name="terms" value="terms" /><b> I have read the Terms *</b>. </p>
<input type="submit" value="Submit Application" >
<input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
</form>
</body>
</html>

Categories