my code below deletes the text from my textarea that is inserted by a user after clicking the submit button but what i want is i want the text to be in my textarea after submit.
<form action="/search" name="myform" id="formid" method="post" >
<div class="input-group" >
<!--
<textarea name="input" id="textArea" />
<button type="submit" onclick="return fill()" >Search</button>
</button>
</div>
</form>
<script type="text/javascript">
function fill()
{
var x = document.getElementById('textArea').value;
document.getElementById('demo').innerHTML=x;
}
</script>
Simply try to add onSubmit="return false;" at the form tag
<form action="/search" onSubmit="return false;" name="myform" id="formid" method="post" >
Related
I want to submit my form to a PHP file called regier.php after validating it using JavaScript. The HTML form is given below:
HTML FORM:
<form onsubmit="return validateForm()" action="register.php" method="post" class="sign-up-form">
<div class="input-field">
<input type="text" placeholder="Nome" name="username" id="username" onkeyup="validateName()"
<span id="name-error"></span>
</div>
<div class="input-field">
<input name="password" type="password" placeholder="Password" id="password" onkeyup="validatePassw()" />
<span id="passw-error"></span>
</div>
<input onclick="return validateForm()" type="submit" class="btn" value="Registrati">
JAVASCRIPT VALIDATION:
The following is the JavaScript validation code:
function validateForm() {
if (!validateName()) {
validateName()
}
if (!validateEmail()) {
validateEmail()
}
if (!validatePassw()) {
validatePassw()
}
}```
Set the action attribute to a file/code to validate the form:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
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 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>
I currently have a code, that is loaded dynamicly, so I can not tweak it much.
But now I want to trigger the submit when clicking the entire <form>.
How can I achive that?
My current code:
<form action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<input type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
Okay man, i will answer this, but on the next time you need to post your javascript code.
This is your markup:
<!-- add a id here -->
<form id="form" action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<!-- add a id here -->
<input id="submit" type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
With your markup set now is time for the JS:
<script type="text/javascript">
//call a anonymous function
$(document).ready(function(){
//Event On click of the form
$('#form').click(function(){
$('#submit').trigger('click');
})
})
</script>
Obs: submit the form on click in his body dont makes sense to me, please explain this.
Edit:
You can learn basic JS and JQuery on www.codecademy.com
I need to submit form by button which is out of scope of the form by JavaSript.
<form>
<input name="data" type="text">
<input type="submit" name="send" id="send-button" style="display: none">
</form>
<button onclick="$('#send-button').click() || .submit()"></button>
The button #send-button is visible and I need to send whole form to server. It means I receive $data and $send (both).
Now I am getting just the $data.
Any idea?
You can do with javascript form method
<button onclick="document.forms[0].submit()"></button>
if you have multiple forms in the document then set id to the form
<form id="form1">
<input name="data" type="text">
<input type="submit" name="send" id="send-button" style="display: none">
</form>
<button onclick="document.getElementById("form1").submit()"></button>
Give the form a name:
<form name="myform">
Submit
</form>
Submit form function:
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>
Invoke submission:
document.forms["myform"].submit();
you should add value attribute on submit button like that
<input type="submit" name="send" value="xyz" id="send-button" style="display: none">
i think you will received both values