onSubmit not working when trying to get a result - javascript

Hi i am submitting a questionnaire and trying to get the result using the onSubmit but it is not working
JavaScript
function results_addition(){
var results = total + Details + formElement;
if(results<30){
document.submit_form.choice1.value="Low Risk";
}else{
if(results>50){
document.submit_form.choice1.value="High Risk";
}else{
document.submit_form.choice1.value="Medium Risk";
}
}
}
HTML
<form name="choice1" onSubmit="results_addition()">
<input type="submit" value="Submit">

please try onsubmit instead of onSubmit, then add a closing </form> tag

<html>
<body>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<form name="choice1" onSubmit="results_addition()">
<input type="submit" value="Submit">
</form>
<script>
function results_addition(){
alert("hello")
}
</script>
</body>
</html>
I have tried the same form and it is working I think you have not closed the form properly.

Change
<form name="choice1" onSubmit="results_addition()">
to
<form name="choice1" onSubmit="return results_addition()">
Add the following at the end of the function
return false;

Related

replace the form with a message -not with PHP

I have this code
<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onsubmit" event to a form element.</p>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<form action="/action_page.php" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
alert("the message has been send");
}
</script>
</body>
</html>
I want not to do this alert message.I want to replace the form giving it this message the message has been send
Put the form in a div, and assign the innerHTML of the DIV to replace the form.
Also, you need to return false; in the onsubmit code to prevent the form from submitting to the server.
function myFunction() {
document.getElementById("formdiv").innerHTML = "This form has been submitted";
}
<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onsubmit" event to a form element.</p>
<p>When you submit the form, a function is triggered which displays some text.</p>
<div id="formdiv">
<form action="/action_page.php" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>

Delay javascript demo function

how do I delay the text? I had been using setTimeout() but is doesn't work.
<form name="myForm">
<input type="submit" value="confirm" onclick="submitFunction()"/>
</form>
<script>
function submitFunction(){
document.getElementById("demo").innerHTML = "Hi How are you?";
}
</script>
<div id="demo"></div>
Simply don't use <input type="submit"/> in this case. It will cause a page reload and your intended behavior is never shown. Change the input type to button will not fire the post behavior so your message is shown below:
<form name="myForm">
<input type="button" value="confirm" onclick="submitFunction()"/>
</form>
<script>
function submitFunction(){
document.getElementById("demo").innerHTML = "Hi How are you?";
}
</script>
<div id="demo"></div>

Is it possible to execute simple javascript statments from an input field in a document?

In the example below I've attached a function main to an input field. the function contains instructions to send an alert with a variable message (whatever the user enters into the field).
<form>
<input type="text" onsubmit="main()" />
<input type="submit" />
</form>
<script>
function main (param) {
alert(param)
}
//main();
</script>
It doesn't work, but I believe that's because I've made some noob error that I'm failing to recognize. The result of a functioning version of this code would be the ability to submit "hello world" and produce an alert box stating 'hello world' (without quotes).
But, further than this, I'd like to be able to pass the likes of main("hello world"); or just alert('hello world'); to the input field to produce the same result.
The problem I think I'm running into is that the page is refreshed every time I submit. There are a few questions on here with similar problems where people have suggested the use of onsubmit="main(); return false;", but in fact this does not seem to work.
Looks like you want to eval() the value of the input.
Use with caution, has security impact...
Returning false from a handler stops the regular action so you have no redirect after submitting:
<form onsubmit="main(); return false;">
<input id="eval-input" type="text" />
<input type="submit" />
</form>
<script>
function main () {
eval(document.getElementById('eval-input').value);
}
</script>
Here's how you can detect a form submission:
<form onsubmit="foo()">
<input type="text">
<input type="submit">
</form>
<script>
function foo(){
alert("function called");
}
</script>
I however advise you do this (preference), if you desire to manage the form data through a function:
<form id="myform">
<input type="text">
<input type="submit">
</form>
<script>
document.getElementById("myform").onsubmit=function(event){
alert("function called");
//manage form submission here, such as AJAX and validation
event.preventDefault(); //prevents a normal/double submission
return false; //also prevents normal/double a double submission
};
</script>
EDIT:
use eval() to execute a string as JavaScript.
jQuery way:
You create event listener which will be triggered when user click 'submit'.
<form>
<input type="text" id="text"/>
<input type="submit" />
</form>
<script>
$( "form" ).submit(function( event ) {
event.preventDefault();
alert( $('#text').val() );
});
</script>
To prevent page reloading - you should use event.preventDefault();
Pure JavaScript:
<form>
<input type="text" id="text"/>
<input type="submit" id="submit" />
</form>
<script>
var button = document.getElementById("submit");
var text = document.getElementById("text");
button.addEventListener("click",function(e){
alert(text.value);
},false);
</script>
If I understand what you want to do, you can call the function like this, and writing params[0].value you can access the input value:
function main(params) {
//dosomething;
document.write(params[0].value);
}
<form onsubmit="main(this)">
<input type="text">
<input type="submit">
</form>
Try something like this
onchange="main()"
onmouseenter, onMouseOver, onmouseleave ...
<input type="text" onmouseenter="main()" />

I have 1 form with 2 submit buttons

I am trying to set-up a form that has 2 buttons, accept and deny. It doesn't seem to be working. Any thoughts on what I should fix?
<form name="iform" method="post" onsubmit="" onreset="" enctype="multipart/form-data" action="formapprovedeny" class="iform">
Form content here.
<input type="button" onclick="submitForm('html_form_approve.php')" class="submit_button" value="Approved" name="Approved" />
<input type="button" class="submit_button" onclick="submitForm('html_form_deny.php')" value="Denied" name="Denied" />
</form>
Here is the script part.
<script>
function submitForm(action)
{
document.getElementById('formapprovedeny').action = action;
document.getElementById('formapprovedeny').submit();
}
</script>
Your Javscript is trying to submit a form with an id of formapprovedeny but your form does not have an id. Try adding id="formapprovedeny" to your form
It should id="formapprovedeny" not action="formapprovedeny"
<form name="iform" method="post" onsubmit="" onreset="" enctype="multipart/form-data" id="formapprovedeny" class="iform">
You have a problem with your naming.
You try to get the form by it's id, but it is not set. It's name is.
You should use either getElementByName or give your form an id.
The type of button must be 'submit' and the value whatever you want, look this:
<input type="submit" class="submit_button" value="Approved" name="Approved" />
<input type="submit" class="submit_button" value="Denied" name="Denied" />
What do you want to achieve using the 2 buttons? What do you expect?
http://jsfiddle.net/xaW5P/
<script>
function submitForm(action)
{
alert('hello submitForm '+action);
document.getElementById('formapprovedeny').action = action;
document.getElementById('formapprovedeny').submit();
}
</script>
if I use your code (added an alert) this seems to work...whatever it should be doing ;)

disable a form submit button until a textarea has been populated?

can someone please help because i have tried various javascripts to get my form submit button to stay disabled until a user enters text into the textarea but nothings working.
i want the submit button to be disabled until a user enters some text. any suggestions please?
<form action="includes/welcomebio.php" method="post" id="form12" class="form12">
<textarea id="bio" textarea name="bio" data-id="bio" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales." onKeyUp="checkWordCount();" data-required="true"><?php echo htmlspecialchars($profile['bio']); ?></textarea>
<input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit"/>
</form>
<script type="text/javascript">
function disable()
{
if(document.textarea.bio.value=="")
{
document.textarea.submit.disabled=true;
}
else
{
document.textarea.submit.disabled=false;
}
}
</script>
There are many things wrong with your code:
Try not to use inline javascript
your textarea onKeyUp calls a function that does not exist
you are trying to set the disabled state of the wrong element (you actually have invalid javascript)
you have some invalid html too
This is what you want:
HTML
<form action="includes/welcomebio.php" method="post" id="form12" class="form12">
<textarea id="bio" name="bio" data-id="bio" data-required="true" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales.">
<?php echo htmlspecialchars($profile['bio']); ?>
</textarea>
<input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit" />
</form>
JAVASCRIPT
window.onload = function () {
document.getElementById("bio").onkeyup = checkWordCount;
checkWordCount();
};
function checkWordCount() {
if (document.getElementById("bio").value == "") {
document.getElementById("submit").disabled = true;
} else {
document.getElementById("submit").disabled = false;
}
}
Here is a working example
You are trying to disable the textarea instead of the submit button. Your code isn't valid JavaScript.
Keep the submit button disabled initially and enable it only when the textarea has something in it. Also, since you're using a placeholder for the textarea, your textarea would never be empty, so a check for
document.getElementById("bio").value = ""
would always return false unless the user changes it.
try this
<body onload="disable()">
<form action="includes/welcomebio.php" method="post" id="form12" class="form12">
<textarea id="bio" textarea name="bio" data-id="bio" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales." onKeyUp="disable();checkWordCount();" data-required="true"></textarea>
<input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit"/>
</form>
</body>
<script type="text/javascript">
function disable()
{
if(document.getElementById("bio").value=="")
{
document.getElementById("submit").disabled=true;
}
else
{
document.getElementById("submit").disabled=false;
}
}
</script>

Categories

Resources