I can’t access a form via JavaScript. The Javascript code in the header, between the <head> tags.
An error message tells me that the form does not exist. So I used the onload evenement but it does not solve the problem.
<head>
<script>
window.onload = function() {
document.getElementsByName('form_login').onsubmit = function(){ }
} ;
window.onload = function() {
document.getElementsByName('form_login')[0].onsubmit = function(){ }
} ;
</script>
</head>
<body>
<form action="/login" method="post" name="form_login">
<input type="text" tabindex="1" name="username" id="username" size="25" maxlength="40" value="" />
<input type="password" tabindex="2" id="password" name="password" size="25" maxlength="25" />
<input type="checkbox" name="autologin" id="autologin" tabindex="4" checked="checked" />
<input type="hidden" name="redirect" value="" />
<input type="hidden" name="query" value="" />
<input type="submit" name="login" tabindex="6" value="Connexion" />
</form>
</body>
There's no error. See the fiddle.
Put your script inside a <script> tag like this:
<head>
<script>
//The script
</script>
</head>
Then, inside of <script> & </script>:
onload=function(){
document.getElementsByName('form_login')[0].onsubmit=function(e){
e.preventDefault();//avoid page refreshing to see the following alert
alert("Yeah! I see, it works.")//indicate that it works
}
}
Just add onsubmit="login(this)" to the form element and have this function (login) defined in your javascript code loaded on that page.
function login(form) {
// ... some code here
};
// ... OR ...
loginForm.onsubmit = function() {
// ... some code here
// ... return false is required to prevent form submitting
return false;
};
<form id="loginForm" onsubmit="login(this); return false">
<button>Submit</button>
</form>
Related
I'm not getting form values on submit of two forms with the same class.
When I submit one of the forms,
a) Jquery submit event is called but values are empty
b) the submit event is skipped and I'm taken right to the php file where I enter the info into a database
My Jquery
$(document).ready(function(){
$('body').on('submit', '.newStaff', function(event) {
event.preventDefault();
var firstName= this.firstName.value;
// do other stuff
//complete AJAX call
});
});
My forms
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" />
// use other inputs.....
<input type="submit" value="submit" />
</form>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" />
// use other inputs.....
<input type="submit" value="submit" />
</form>
Am I not binding correctly? Haven't had issues like this before. I've always been able to get unique input values based on the form that was submitted.
my be you can use function eq jquery for this
$(function() {
$('body').on('submit', '.newStaff', function(event) {
event.preventDefault();
var firstName = $('.newStaff input[name="firstName"]').eq(0).val();
alert(firstName);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" value="1 2 3"/>
<input type="submit" value="submit" />
</form>
<br/>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" value="a b c"/>
<input type="submit" value="submit" />
</form>
I want to display "something" on the HTML forms textbox
this value should be a javascript variable
var paramvalue = "something"
document.getElementById("client_id").value = paramvalue
<form action="login.php" method="post">
<input type="hidden" name="clientID" id="client_id" value="" />
<button>Login</button>
</form>
You have to put the script after the HTML, since when it is run, the input field doesn't exist yet, so it will return an error.
<form action="login.php" method="post">
<input type="hidden" name="clientID" id="client_id" value="" />
<button>Login</button>
</form>
<script type="text/javascript">
var paramvalue = "something";
document.getElementById("client_id").value = paramvalue;
</script>
var textbox = document.getElementById('client_id');,
then
textbox.value = paramvalue;
will work.
Your issue is you have type='hidden' where it should be type='text' because hidden will not be visible. You also need to change it to run onload so you replace the value on page load.
<script type="text/javascript">
function init(){
var paramvalue = "something"
document.getElementById("client_id").value = paramvalue
}
body.addEventListener("load", init);
</script>
<form action="login.php" method="post">
<input type="text" name="clientID" id="client_id" value="" />
<button>Login</button>
</form>
Alternatively, you can keep your code, change input type = "text" and just move your script below your HTML code/ Form, negating the need for the JS function and the event listener
The user could also do :
<input type="text" name="clientID" id="client_id" value="" onload="init()" />
I would like to count number of submitted form by user with javascript
and then put the number of submitted form in a value attribute of an input type hidden and then retrieve that value with PHP (with the name attribute of the input hidden)
Here is a simple code I have tried, but it didn't work :
form.html
<form method="post" action="submit.php">
<input type="text" name="name" placeholder="name"/>
<input type="text" name="firstname" placeholder="firstname"/>
<input type="hidden" name="nb_submit" value="" id="nb"/>
<input type="submit" value="OK" onclick="count_nb_submit()"/>
</form>
after the html form ended, I have put the javascript code:
<script type="text/javascript">
var nb=0;
function count_nb_submit()
{
nb ++;
return nb;
document.getElementById('nb').value=nb;
}
</script>
submit.php
<?php
echo $_POST["nb_submit"] ;
?>
In your script you're returning before you've finished your function.
You should only use return when you want to stop the function and return a result. Anything after return will not be read.
This is what your code should look like:
<script type="text/javascript">
var nb=0;
function count_nb_submit() {
nb++;
document.getElementById('nb').value=nb;
return nb;
}
</script>
You are using return before setting the value to field, remove the return hope it will work.The function should be -
function count_nb_submit()
{
// calculate values
document.getElementById('nb').value= //the value you want to assign;
}
JS CODE :
<script type="text/javascript">
var nb = 0;
function count_nb_submit() {
nb++;
var myform = document.getElementById('test');
document.getElementById("nb").value = nb;
myform.submit();
}
</script>
Form CODE :
<form method="post" name="test" action="submit.php" id="test" target="_blank">
<input type="text" name="name" placeholder="name"/>
<input type="text" name="firstname" placeholder="firstname" onblur="count_nb_submit();"/>
<input type="hidden" name="nb_submit" value="0" id="nb"/>
<input type="button" value="OK" onclick="count_nb_submit();" />
</form>
<script type="text/javascript">
var nb = 0;
function count_nb_submit()
{
nb++;
var myform = document.getElementById('test');
document.getElementById("nb").value = nb;
myform.submit();
}
</script>
<form method="post" name="test" action="submit.php" id="test" target="_blank">
<input type="text" name="name" placeholder="name"/>
<input type="text" name="firstname" placeholder="firstname" />
<input type="hidden" name="nb_submit" value="0" id="nb"/>
<input type="button" value="OK" onclick="count_nb_submit();" />
</form>
I'm making a html5 application which require all fields to be filled in before the submit button can be clicked.
What I want to do now is give an alert if a textbox is not filled in, the problem is that my submit button is disabled until all fields are filled in, so I can't really add an alert to that button.
Any idea's on how to solve this?
I want it so that after filling in the final textbox the submit button becomes available without first having to click on it.
Note that the 'required' does not work.
I have the following code:
HTML:
<form id="winForm">
<p>
<input type="text" id="name" name="name" required />
</p>
<p>
<input type="text" id="vorname" name="vorname" required />
</p>
<p>
<input type="text" id="email1" name="email1" required />
<label id="atteken" >#</label>
<input type="text" id="email2" name="email2 " required />
<textarea id="fullemail" name="fullemail"></textarea>
</p>
<p>
<input type="text" id="telefon" name="telefon" onclick="generateFullAdress()" required />
</p>
<p>
<input type="text" id="firma" name="firma" required />
</p>
<p>
<input type="submit" id="submitBtn" onclick="sendTheMail()" value=" ">
</button><div id="loading"><img src="images/loadingBar.gif" id="load"></img></div>
</p>
</form>
Jquery/JS
<script type="text/javascript">
function generateFullAdress() {
document.getElementById('fullemail').value =
document.getElementById('email1').value + '#' +
document.getElementById('email2').value;
}
</script>
<script>
var $input = $('input:text'),
$register = $('#submitBtn');
$register.attr('disabled', true);
$input.keyup(function() {
var trigger = false;
$input.each(function() {
if (!$(this).val()) {
trigger = true;
}
});
if(trigger) {
$register.attr('disabled',true);
}else {
$register.removeAttr('disabled');
}
});
</script>
Help would greatly be appreciated.
Thanks!
If you have a form as such:
<form id="form">
...
</form>
You can use the following jQuery code to do something before the form is submitted:
$(function() {
$('#form').submit(function() {
// DO STUFF
return true; // return false to cancel form action
});
});
OR
perform the samething with the onsubmit event like
<form action="youraction" onsubmit="validatefunction" method="post">
My goal is to send the code inside the ACE Editor to as a variable to the send.php PHP file. I tried this in many different methods but I can't assign the code inside the editor to the form input.
JavaScript
This javascript function should assign a value to an element with the id="code", which is: <input type="hidden" id="code" value="" />.
editor.getSession().getValue(); returns the code that is inside the editor.
<head>
<script>
function getVal() {
document.getElementById('code').value = editor.getSession().getValue();
}
</script>
</head>
HTML
Now, <form onsubmit="getVal();" should execute function getVal() when a user submits the form, so that the code input will have a value when sending the inputs to the send.php file.
<body>
<div>
<form onsubmit="getVal();" method="post" action="send.php">
<label for="Name">From:</label>
<input type="text" name="Name" id="Name" />
<label for="Address">To:</label>
<input type="text" name="Address" id="Address" />
<label for="Subject">Subject:</label>
<input type="text" name="Subject" id="Subject" />
<input type="hidden" id="code" value="" />
<div id="editor"> //ACE Editor
</div>
<input type="submit">
</form>
</div>
This function is the one I needed in order to make this work:
function getVal()
{
var editor = ace.edit("editor");
// this line is necessary
// "editor" is the id of the ACE editor div
var code = editor.getSession().getValue();
document.getElementById('code').value = code;
}
The code is correct, editor.getSession().getValue() is null so it writes nothing!