I am new to javascript, I was creating a form and taking the value from the text box but to cross-check it whether the value is fetched, I used alert inside my js code. it is not showing any alert box while running the code.
I tried to use it without form tag it was working fine.
<html>
<body>
<h2>JavaScript Alert</h2>
<form name="myForm" action="thanks.html" method="get">
UserName:<br/><input type="text" name="user"><br/><br/>
Email:<br/><input type="text" name="pass" id="email"><br/><br/>
Message:<br/><textarea name="msg" rows="5"></textarea><br/><br/>
<input type="submit" name="submit" value="Submit Form" onsubmit="validate()">
</form>
<script>
function validate(){
var email= document.getElementById("email").value;
alert(email);
}
</script>
</body>
</html>
can you please tell me what I am doing wrong
input element doesn't have onSubmit event but form does.
That's all you need to change:
<form name="myForm" action="thanks.html" method="get" onsubmit="validate()">
Demo:
function validate() {
var email = document.getElementById("email").value;
alert(email);
}
<h2>JavaScript Alert</h2>
<form name="myForm" action="thanks.html" method="get" onsubmit="validate()">
UserName:<br/><input type="text" name="user"><br/><br/> Email:
<br/><input type="text" name="pass" id="email"><br/><br/> Message:
<br/><textarea name="msg" rows="5"></textarea><br/><br/>
<input type="submit" name="submit" value="Submit Form">
</form>
Change the inout type from "submit" to "button" and then submit your form from validate function using $("#form_id").submit()
Also you can try adding e.preventDefault() in validate function.
input has no onSubmit event but form has
function validate(){
var email= document.getElementById("email").value;
alert(email);
}
<html>
<body>
<h2>JavaScript Alert</h2>
<form name="myForm" action="thanks.html" method="get" onsubmit="validate()">
UserName:<br/><input type="text" name="user"><br/><br/>
Email:<br/><input type="text" name="pass" id="email"><br/><br/>
Message:<br/><textarea name="msg" rows="5"></textarea><br/><br/>
<input type="submit" name="submit" value="Submit Form" >
</form>
\
</body>
</html>
You can use onsubmit="validate()" function in form tag instead input type submit.
<html>
<body>
<h2>JavaScript Alert</h2>
<form name="myForm" action="thanks.html" method="get" onsubmit="validate()">
UserName:<br/><input type="text" name="user"><br/><br/>
Email:<br/><input type="text" name="pass" id="email"><br/><br/>
Message:<br/><textarea name="msg" rows="5"></textarea><br/><br/>
<input type="submit" name="submit" value="Submit Form">
</form>
<script>
function validate() {
var email= document.getElementById( "email" ).value;
alert( email );
}
</script>
</body>
</html>
Related
I have 2 forms with the same ids.
I want when you type a key in the text area with id=ingevuldNotitie then javascript will submit the form. Is there a way to do this and so how?
<div id="response">
<div id="child_response">
<form action="test.php" method="post" id="notitieForm" onsubmit="return notitieOpslaan();">
<input type="text" id="clientNotitieDatum" value="2022-10-17" name="clientNotitieDatum" hidden="">
<textarea rows="4" cols="50" id="ingevuldNotitie" name="ingevuldNotitie"></textarea>
<input type="submit" name="clientNotitie" value="Notitie opslaan">
</form>
<form action="test.php" method="post" id="notitieForm" onsubmit="return notitieOpslaan();">
<input type="text" id="clientNotitieDatum" value="2022-10-18" name="clientNotitieDatum" hidden="">
<textarea rows="4" cols="50" id="ingevuldNotitie" name="ingevuldNotitie"></textarea>
<input type="submit" name="clientNotitie" value="Notitie opslaan">
</form>
</div>
</div>
<script>
// I tried this
$("#response").bind("keyup", function () {
$(this).closest('[name=clientNotitieDatum]').submit();
});
// And I tried this
$("text[name='ingevuldNotitie']").bind("keyup", function () {
$(this).closest('form').submit();
});
</script>
Because the elements are dynamically added via ajax, you should use $(document).on('keyup', "textarea[name='ingevuldNotitie']", function() {.
Alo, in your forms onsubmit, add an argument to the function:
onsubmit="return notitieOpslaan(this);"
And use that argument to get the form's data, such as clientNotitieDatum.
See working demo below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="response">
<div id="child_response">
<form action="test.php" method="post" id="notitieForm" onsubmit="return notitieOpslaan(this);">
<input type="text" id="clientNotitieDatum" value="2022-10-17" name="clientNotitieDatum" hidden="">
<textarea rows="4" cols="50" id="ingevuldNotitie" name="ingevuldNotitie"></textarea>
<input type="submit" name="clientNotitie" value="Notitie opslaan">
</form>
<form action="test.php" method="post" id="notitieForm" onsubmit="return notitieOpslaan(this);">
<input type="text" id="clientNotitieDatum" value="2022-10-18" name="clientNotitieDatum" hidden="">
<textarea rows="4" cols="50" id="ingevuldNotitie" name="ingevuldNotitie"></textarea>
<input type="submit" name="clientNotitie" value="Notitie opslaan">
</form>
</div>
</div>
<script>
$(document).on('keyup', "textarea[name='ingevuldNotitie']", function() {
$(this).closest('form').submit();
});
function notitieOpslaan(theForm) {
var clientNotitieDatum = theForm['clientNotitieDatum'].value;
console.log('form would have been submitted', clientNotitieDatum);
return false;
}
</script>
I have form where I need to redirect to a new url, and add the value from the input to the new URL
<form action="https://test.test.com/" method="GET">
<fieldset>
<legend>bftl</legend>
<input type="text" name="trackTrace" id="trackTrace" placeholder="Add your Track & Trace">
<label for="month">Track & Trace</label>
<input type="submit" class="submit" value="Submit">
</fieldset>
</form>
After you have enter the Track & Trace number and pressed the submit button
you shall be redirected to "https://test.test.com/#/TRACK&TRACENUMBER" in a new tab
You need js code like this:
<form action="https://test.test.com/" method="GET" onSubmit="return submitForm()">
<fieldset>
<legend>bftl</legend>
<input type="text" name="trackTrace" id="trackTrace" placeholder="Add your Track & Trace">
<label for="month">Track & Trace</label>
<input type="submit" class="submit" value="Submit">
</fieldset>
</form>
<script>
function submitForm() {
location.href="https://test.test.com/#/TRACK&"+document.getElementById("trackTrace").value;
return false;
}
</script>
this is my code.jsp file and I've written javascript in it to enable/disable textbox name=uinp when toggling checkbox name=input but it is not working!
<html>
<body>
<form action="compile.jsp" method="get">
Custom Input: <input type="checkbox" name="input" onchange="toggle('input','uinp')"><br><br>
<textarea rows="5" cols="15" name="uinp" style="display: none"></textarea><br><br>
<br><input type="submit" value="Submit">
<input type="reset" value="Cancel">
</form>
<script>
function toggle(chk,txt)
{
if(document.getElementById(chk).checked)
document.getElementById(txt).style.display='';
else
document.getElementById(txt).style.display='none';
}
</script>
</body>
</html>
Please anyone help me with this!
You need to set id for textarea otherwise getElementById() returns null, since there is no element with that id. Also you can pass this context to refer the checkbox.
<form action="compile.jsp" method="get">
Custom Input:
<input type="checkbox" name="input" onchange="toggle(this,'uinp')">
<br>
<br>
<textarea rows="5" cols="15" id="uinp" style="display: none"></textarea>
<br>
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Cancel">
</form>
<script>
function toggle(ele, txt) {
if (ele.checked)
document.getElementById(txt).style.display = '';
else
document.getElementById(txt).style.display = 'none';
}
</script>
I'm new to JavaScript and I want to log in to a webpage. This code will take me to the web page but won't sign in. I know it knows the values of username/password because if I do alert(loginForm.elements["username"].value) it displays "someUsername".
I'm not sure how to get these values to be entered into the boxes and hit submit. Any advice helps, thanks!
<script>
function login() {
document.loginForm.action = "http://websiteToLoginTo.com";
document.loginForm.submit();
}
</script>
<body onLoad="login()">
<form name="loginForm" method="post">
<input type="hidden" name="username" value="someUsername">
<input type="hidden" name="password" value="somePassword">
</form>
</body>
The website I'm trying to connect to has this:
<form action="/Authn/UserPassword" method="post" name="loginForm">
<input id="username" name="t_username">
<input id="password" name="t_password">
<input type="submit" name="login" value="Login" class="submit">
</form>
I am trying to send someone an email through a form on my website. I want to include a part of my webpage into the email.
To do this I use a hidden field, which I try to fill using a piece of javascript. However due to my lack of knowledge the code doesn't seem to be triggered.
<form action="Emailverstuurd.php" method="POST">
<input id="ExcelForm" type="hidden" name="ExcelForm"/>
<input name="email">
<textarea name="body" rows="10" cols="60"> </textarea>
<script type="text/javascript">
$("#send").submit(function() {
$("#ExcelForm").val($("#myExcelDiv").html());
}
</script>
<input type="submit" name="send" id="send" value="Send Your Message"/>
</p>
</form>
How can I get my javascript code to run?
You can do it like this:
<form action="Emailverstuurd.php" method="POST" onsubmit="submitUpdate()">
<input id="ExcelForm" type="hidden" name="ExcelForm"/>
<input name="email">
<textarea name="body" rows="10" cols="60"> </textarea>
<script type="text/javascript">
function submitUpdate()
{
$("#ExcelForm").val($("#myExcelDiv").html());
}
</script>
<input type="submit" name="send" id="send" value="Send Your Message"/>
</p>
</form>
Just add an onsubmit handler to your form field give it a function and just put you value update in that function...I don't see #myExcelDiv I'm assuming that is defined somewhere else in your code?