I've checked here and here but can't get my form to submit. (noob to Jquery...)
<html>
<head>
<title>Book Notes Application - Subjects</title>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#subject_id').change(function(){
var subject_id = $(this).val();
//alert(subject_id)
//document.forms["choose_subject"].submit();
$('#choose_subject').submit();
//$('form#choose_subject').submit();
//$('form#choose_subject')[0].submit();
//alert(subject_id);
//document.getElementById("choose_subject").submit();
})
})
</script>
</head>
<body>
<!-- CHOOSE SUBJECT -->
<FORM action="/books" id="choose_subject" name="choose_subject" method="POST">
Choose a Subject:
<select name="subject_id" id="subject_id">
<option value="1">a</option>
<option value="2">a2</option>
</select><input type="submit" name="submit" value="Choose Subject"/>
<BR />
</FORM>
<!-- CREATE SUBJECT -->
<FORM action="/subjects" id="create_subject" method="POST">
<BR /><BR />
Create a new Subject
<input type="text" name="subject_name" />
<input type="submit" name="submit" value="Create Subject" />
</FORM>
<body>
</html>
I've tried each of these methods:
1) document.forms["choose_subject"].submit();
2) $('#choose_subject').submit();
3) $('#choose_subject')[0].submit();
4) $('form#choose_subject').submit();
5) $('form#choose_subject')[0].submit();
6) document.getElementById("choose_subject").submit();
The first and last result in a "TypeError: document.forms.choose_subject.submit is not a function.
The second and fourth don't have an error but they also doesn't do anything.
The third and fifth error out with a "TypeError: $(...)[0].submit is not a function"
If I remove the second form these results hold true.
Clicking the submit button works as expected.
Change your the name of your input element:
<input type="submit" name="submit" value="Choose Subject"/>
to something other than "submit". As the .submit() docs state:
Forms and their child elements should not use input names or ids that
conflict with properties of a form, such as submit, length, or method.
Name conflicts can cause confusing failures.
jsFiddle example
Related
I know this is continuously asked anew, and I've checked out different answers and tried different solutions but to no avail.
I just have to build a form that takes as input the cylinder ray and it height and then find the volume when we click a button.After finding it, shuold be cleared all fields with another button .The function to calculate volume it is working fine, but not the function that clear inputs.
Here is the code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript">
function llogarit() {
var rreze = parseInt(document.getElementById("val1").value);
var lartesi = parseInt(document.getElementById("val2").value);
var rez = document.getElementById("llogarit");
rez.value = (Math.PI * Math.pow(rreze, 2) * lartesi);
}
function fshij() {
document.getElementById("val1").value.clear();
document.getElementById("val2").value.clear();
document.getElementById("llogarit").value.clear();
}
</script>
</head>
<body>
<form>
<p>Vendos 2 vlera</p>
<p>rreze
<input type="text" name="rreze" id="val1" value="2" /></p>
<p> lartesi
<input type="text" name="lartesi" id="val2" value="2" /></p>
<p> Vellimi
<input type="text" name="vellimi" id="llogarit" value="" /></p>
<input type="button" onclick="llogarit()" value="llogarit" />
<input type="reset" value="fshij" onclick="fshij()" />
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
You can reset all form controls in one form with reset method.
// <form name="FORM_NAME">
document.forms["FORM_NAME"].reset();
Try the following:
document.getElementById('myInput').value = ''
Try the follow and add a div tag to the code
<div class="yourClass">
<button onclick="cdClear();" class="yourClass">Clear</button>
</div>
Note: In HTM, you can replace the class with id if you have already coded.
<script type="text/javascript">
function cdClear(){var a=document.getElementById("codes");a.value="",a.focus(),</script>
<html>
<body>
<form class="totalpayment">
<input class="paid" type="text" name="numberOne" />
<input class="due" type="text" name="numberTwo" />
<button>Add</button>
</form>
<p class="total"></p>
<script src="jquery.min.js"></script>
<script>
// Sum the value when submitting the form
$(".totalpayment").submit(function(e){
e.preventDefault();
var paid = parseInt($('.paid').val());
var due = parseInt($('.due').val());
$(".total").html(paid + due);
});
</script>
</body>
</html>
I have a form that adds two numbers together. My issue is, it only has one button, the add button. Let's say I wanted to add the handler for a cancel button which will clear the two boxes, how would I implement this?
Just add one more button to reset the form. Read more about Reset button
There is no need to add any handler for resetting the form.
<button type="reset" value="Cancel">Cancel</button>
Sample code:
<html>
<body>
<form class="totalpayment">
<input class="paid" type="text" name="numberOne" />
<input class="due" type="text" name="numberTwo" />
<button>Add</button>
<button type="reset" value="Cancel">Cancel</button>
</form>
<p class="total"></p>
<script src="jquery.min.js"></script>
<script>
// Sum the value when submitting the form
$(".totalpayment").submit(function(e){
e.preventDefault();
var paid = parseInt($('.paid').val());
var due = parseInt($('.due').val());
$(".total").html(paid + due);
});
</script>
</body>
</html>
I have a form that I have two buttons on. One button should take the user to one php script and the other button would take the user two a different php script. However for some reason the buttons aren't doing anything. Here is the code.
<script language="Javascript">
function OnButton1()
{
document.contactform.action = "../scripts/email-info.php"
// document.Form1.target = "_blank"; // Open in a new window
document.contactform.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.contactform.action = "../scripts/email-info2.php"
//document.contactform.target = "_blank"; // Open in a new window
document.contactform.submit(); // Submit the page
return true;
}
</script
Then here is the actual form code:
<form id="contact-form" name="contactform" method="post">
<fieldset>
<div id="holder">
<div id="formLeft">
<div class="txtlabel">Name* </div><div class="input-bg"><input type="text"
name="name" id="name" required></div>
</div>
</div>
<div id="msgbox">
<div class="txtlabel">Tell Us About Your Business Needs</div>
<div class="message-bg">
<textarea name="message" id="message" rows="9" cols="56" required></textarea><input
name="formpage" type="hidden" value="<?=$pagename;?>" />
</div></div><div style="clear:both"></div><br /><br />
<input src="/submitbtn.jpg"
name="submit" value="View Now" class="submit-button" onclick="OnButton1();"/>
<input src="/submitbtn.jpg"
name="submit" value="Download Now" class="submit-button2" onclick="OnButton2();" />
</fieldset>
</form>
I've removed some of the submission fields to make it more easily viewable. But I get nothing when I click either button...Any thoughts??
problem is in input:
<input src="/submitbtn.jpg"
name="submit" value="View Now" class="submit-button" onclick="OnButton1();"/>
When you have a form:
document.contactform.submit
Javascript returns the input with name submit, not the submit function.
You could change the name of the input:
<input src="/submitbtn.jpg"
name="yourName" value="View Now" class="submit-button" onclick="OnButton1();"/>
Also, your inputs are not buttons, check this.
Update
This question mentions HTML5 formaction attribute:
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
I'm surprised no one mentioned formaction. It is a legal attribute (in HTML5) for the input and button tag in submit/image state and can be used to send form data to a different action page. http://mdn.beonex.com/en/HTML/Element/input.html (it is also valid in button too).
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
In case you need to support IE9-, you simply can polyfill this, using webshims.
<script src="webshims/polyfiller.js"></script>
<script>
webshims.polyfill('forms');
</script>
<!-- now it also works with IE8/9 and other legacy browsers -->
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
The reference to your form is
document.forms.contactform
and not
document.contactform
So, for example, the submit button should be:
document.forms.contactform.submit();
// ^^^^^
The same correction should be applied to other references.
I'm trying to use javascript (used within another program) to automate the submission of a form with the appropriate textboxes filled in. Using the simple page below, I can successfully fill out the text box using:
javascript:document.getElementsByName('UserIDValue')[0].value = "12345";
but can't seem to get anything to work that will actually submit the form. None of these attempts at solving it work: (By 'work' I mean have the same effect as if I clicked the Log In button.)
document.forms["MFALogInForm"].submit();
document.getElementsByName("LoginButton")[0].submit();
document.getElementById("MFALogInForm").submit();
document.forms[0].submit();
the code for the page I'm working with is below: The link to it is here: https://ppcplus.121fcu.org/Mobile/Features/Auth/MFA/MFALogin.aspx
<html><body>
<form id="MFALogInForm" name="MFALogInForm" method="post" action="MFALogin.aspx?__ufps=981699">
<input type="hidden" name="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" value="">
<script language=javascript><!--
function __doPostBack(target, argument){
var theform = document.MFALogInForm
theform.__EVENTTARGET.value = target
theform.__EVENTARGUMENT.value = argument
theform.submit()
}
// -->
</script>
<img id="RoofImage" src="/Mobile/Images/Current_HandheldDevice/Universal/1Pixel.gif" alt="Private PC" /><br />
<img id="LogoHeader_LogoImage" src="/Mobile/Images/Current_HandheldDevice/Universal/Logo.gif" /><br />
<font size="+1" color="#006D9B"><b>LOGIN</b></font><br>
<font size="-1"><b>USER ID</b></font><br>
<input name="UserIDValue"/><br>
<input name="LoginButton" type="submit" value="Log In"/><input name="ResetButton" type="submit" value="Reset"/><br>
</form></body></html>
document.forms[0].elements["LoginButton"].click();
worked for me.
This is my HTML/Javascript Code.I am submitting the filled form to a Servlet. There seems to some problem with the form validation. I am not able to figure out why. It is supposed to prompt me to enter a new value if I enter 0 in textbox2 and select Divide from the drop down list box. But it doesn't and the form is submitted without any prompting to the servlet which throws Exception due to division by zero.
<html>
<head>
<title>A simple calculator</title>
<script language="text/javascript">
function validate(b,op)
{
var newval=b;
if(b=="0"&&op=="/")
newval=prompt("Enter a non-zero value for B:",1);
document.CalculatorForm.textbox2.value=newval;
}
</script>
</head>
<body>
<form name="CalculatorForm" method="get" action="http://localhost:8080/hello/CalculatorServlet" onsubmit="validate(this.textbox2.value,this.dropdown.options[this.dropdown.selectedIndex].value);">
A:<input type="text" name="textbox1" id="T1" /><br>
B:<input type="text" name="textbox2" id="T2" /><br>
Operation<br>
<select name="dropdown" id="dd">
<option value="+">Add</option>
<option value="-">Subtract</option>
<option value="*">Multiply</option>
<option value="/">Divide</option>
</select>
<br>
<input type="submit" value="compute"/>
</form>
</body>
</html>
Change the function to:
function validate()
{
var b = document.getElementById('T2').value;
var op = document.getElementById('dd')
var opValue = op.options[op.selectedIndex].value;
if(b=='0' && op=='/')
//do something
else
// submit
}