Why my simple javascript validation not working. I want to check if the default text is same as default value (Keyword(s)), then submit the form with empty parameter.
<form method="get" id="search_form" action="http://somesampleurl.com" onsubmit="return validation();">
<input name="s_rawwords" value="Keyword(s)" id="search_field" class="search_field" type="text">
<input name="s_freeloc" value="City, State or Zip" id="search_field2" class="search_field" type="text">
<input value="" id="search_button" type="submit">
</form>
<script type="text/javascript">
function validation(){
var search_key = document.getElementById("search_field").value
alert(search_key);
if(search_key =="Keyword(s)"){
alert("step2");
search_key = "";
}
}
</script>
Your function never returns true or false, so it doesn't validate anything. Return false when the inputs are invalid and you don't want the form to be submitted.
See here MSDN documentation
Try this code:
function validation(){
var search_key = document.getElementById("search_field").value;
alert(search_key);
if(search_key =="Keyword(s)"){
alert("step2");
document.getElementById("search_field").value = "";
}
return true;
}
Related
I am creating an application. The HTML file is like the following:
<!DOCTYPE html>
<html>
<body style="background-color: #ccc">
<script type="javascript">
function validateform(){
alert("Hello");
var firstnameErr="";
var valid = true;
var name = document.myform.fname.value;
var types = /^[a-zA-Z]+$/;
if (fname==null || fname=="") {
firstnameErr = "required";
valid = false;
} else if (!fname.value.match(types)) {
firstnameErr = "format error";
valid = false;
}
return valid;
}
</script>
<form name="myform" method="post" onsubmit="return validateform()" action="/Project/ViewList.php">
Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20">
<span class="error">*
<script type="javascript">
document.write(firstnameErr);
</script>
</span>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
When I click on the submit button, it straightaway redirects to "ViewList.php" without seeming to run validatefom(). I added the alert() to check whether the function is executing or not. I want my form to submit only when it meets the validation requirements, not when valid is false.
Besides Typo errors, The main problem that I found is your script is not get executed and your validateform() method is not available. It happened because your script tag type attribute is not correct <script type="javascript">
To make it work you need to change it to this
<script type="text/javascript">
And please change your validation method validateform() as it has too may typo.
What is wrong with the code is that the OP is validating the old-fashioned way with an HTML5 form. Prior to HTML5, you had to use JavaScript for front-end validation; now things are much simpler and easier, too. Of course, the OP would replace the value of the action in the following example with the desired URL.
Note: there were errors in the OP's code, but if you get rid of the JavaScript and code the HTML making sure to add the following to the text input:
required pattern="[a-zA-Z]+"
then the form validates. In other words, you don't have to work so hard when you use HTML5 for form validation :)
<form id="myform" name="myform" method="POST" action="https://www.example.com">
<label for="fname">Firstname</label>: <input name="fname" placeholder="First name" maxlength="20" required pattern="[a-zA-Z]+">
<input type="submit" name="submit" value="Submit">
</form>
For those who prefer to do things the old-fashioned way, see this revision of the OP's code. Note: it uses a minimum of variables, employs short-cuts for less verbosity, and is organized with functions. Also, it is kind to the user's hands, too.
The way you have done you will never be able to use document.write to output anything, use this, working for me:
<!DOCTYPE html>
<script>
function validateform(){
alert("Hello");
var valid = true;
var fname = document.myform.fname.value;
var types = /^[a-zA-Z]+$/;
if (fname==null || fname=="") {
firstnameErr = 'required';
valid = false;
} else if (!fname.match(types)) {
firstnameErr = 'format error';
valid = false;
}
document.getElementById('msg').innerHTML = firstnameErr;
return valid;
}
</script>
<form name="myform" method="post" onsubmit="return validateform()" action="/Project/ViewList.php">
Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20">
<span class="error">* <label id='msg'></label> </span>
<input type="submit" name="submit" value="Submit">
</form>
</body>
It looks you have a series of typo in your code,
try this
<!DOCTYPE html>
<html>
<body style="background-color: #ccc">
<script>
function validateform() {
var firstnameErr = "";
var valid = true;
var name = document.myform.fname.value;
var types = /^[a-zA-Z]+$/;
if (name == null || name == "") {
firstnameErr = "required";
valid = false;
} else if (!name.match(types)) {
firstnameErr = "format error";
valid = false;
}
return valid;
}
</script>
<form name="myform" method="post" onsubmit="return validateform()" action="/Project/ViewList.php">
Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20">
<span class="error">*
<script>
document.write(firstnameErr);
</script>
</span>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Here is my code example
<form action="next2.php" method="post" name="next2" id="next2" onsubmit="return submitForm();">
Below is my function
<script type="text/javascript">
function submitForm()
{
var name = document.getElementById("name").value;
return false;
}
</script>
On press, the form still submit, but if i change
onsubmit="return false;"
then the form won't submit, how do I use the function to return false as i need do some if else validation
<script type="text/javascript">
function submitForm() {
return false;
}
</script>
<form
action="next2.php"
method="post"
name="next2"
id="next2"
onsubmit="return submitForm();"
>
submit is already a function for the form, you should call your JavaScript function something different, for instance submitForm as in the above.
just remove the semicolon in your function and place a alert in your function to make sure whether the function is called first.and then try to add validation
I like to make an invisible button for the actual submit which is only triggered after form validation:
function validate() {
var valid = true;
$.each($('input'), function(){
valid = valid && $(this).val().length > 0;
})
if (valid) {
$('#realSubmit').click();
} else {
alert('Please fill out all fields!');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="next2.php" method="post" name="next2" id="next2" onsubmit="return submit();">
<input type="text" placeholder="Enter Name" />
<input type="password" placeholder="Enter Password" />
<button type="button" onclick="validate()">Submit</button>
<button type="submit" id="realSubmit" style="display:none"></button>
</form>
I have a form in which there is one text field is provided with a submit button.On clicking submit button,it redirects to second php page from first php page.
index.php
<form action="submit.php" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert()" />
</form
<script type="text/javascript">
function convert()
{
alert("hi");
var str ;
str = document.getElementById("search").value;
document.writeln(str.toLowerCase());
}
</script>
On submitting the form,i want the url to become like submit.php?search=text
I want this text to be in lower case,although if text entered is uppercase.
Please guide me how to make this text lower case,I am using the above script for converting it to lower case.But its not converting the text in lower case in URL.
Please guide me on this..
There was a few errors, you were missing the right angle bracket on </form> and you were trying to write the value rather than setting the field value, try this...
<form action="submit.php" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert();" />
</form>
<script type="text/javascript">
function convert() {
alert("hi");
var str;
var srch=document.getElementById("search");
str = srch.value;
srch.value=str.toLowerCase();
}
</script>
You can do this only using javascript with a few extra stuff:
1) Give your <form> an id
<form action="submit.php" method="get" id="form1">
2) Make your <input> type as button. The reason for this is because we want to make sure the convert() function is executed first, and after that we will submit the form.
<input type="button" value="submit" onclick="convert()" />
3) Finally javascript to:
function convert()
{
alert("hi");
var str ;
str = document.getElementById("search");
str.value = (str.value.toLowerCase());
//get the form id and submit it
var form = document.getElementById("form1");
form.submit();
}
Fiddle
You are use form element so you can get any elements inside form element access by name, Here Our form name is form1 and inside this form inputbox name="search" and access this value by this way, document.form1.search.value.toLowerCase();
Check this Demo jsFiddle
JavaScript
function convert() {
alert("hi");
var str = document.form1.search.value.toLowerCase();
document.writeln(str);
//console.log(str);
}
HTML
<form name="form1" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert();" />
</form >
try like this:
alert("hi");
document.getElementById("search").value = document.getElementById("search").value.toLowerCase();
return true;
Fiddle Live
I have a simple form, with one issue.
In explorer, if nothing is inserted, the placeholder is passed as input of the field.
Here is JSbin: http://jsbin.com/EvohEkO/1/
I would like to make a simple comparision, when form is submitted, to check if the value of the field is equal to "First name", and if yes make the value empty ""
Just this i need.
Someone can help me please?
<form onsubmit="return checkform()">
<input name="test" placeholder="placeholdertext" id="test" />
<input type="submit" value="submitbutton"/>
</form>
in js
you should import jquery latest version this is the link: http://code.jquery.com/jquery-1.10.2.min.js
function checkform(){
var fieldvalue = $.trim($('#test').val());
if(!fieldvalue || fieldvalue=="placeholdertext"){
alert('there is no input');
return false;
}else{
alert('enjoy your form!');
return true;
}
}
This is somewhat easier..
$(document).ready(function(){
$("#form").submit(function(){
$('#form input:text, textarea').each(function() {
if($(this).val()==$(this).attr('placeholder'))
$(this).val(" ");
});
});
});
Just put your field value in hidden type input like this :-
<input id="hdnfield" name="hdnfield" value="<Your Field Value>" />
To check the value of a form field use the val() function on the input element
var input_value = jQuery('Input Element Selector').val();
As I looked to your form, the elements do not have any id attribute, I recommend that you add one to each of them, also change the submit input to button the you have more control on the javascript. so your form will look like :
<form id="form" action="form.php" method="post">
<input id="fname" type="text" placeholder="First name" name="fname"><br>
<label for="fname" id="fnamelabel"></label>
<input id="lname"type="text" placeholder="Last name" name="lname"><br>
<textarea id="message" placeholder="Contact us!" cols="30" rows="5" name="message"></textarea><br>
<br>
<input type="button" value="Submit">
</form>
so your jQuery will look like:
jQuery(document).ready(function(){
jQuery('input[type="button"]').click(function(){
var fname = jQuery('#fname').val();
var lname = jQuery('#lname').val();
var message = jQuery('#message').val();
...... Do whatever you need & then change the input values
...... if all validation has passed the use jQuery('#form').submit(); to submit the form otherwise reset the form:
jQuery('#fname').val("");
jQuery('#lname').val("");
jQuery('#message').val("");
});
});
here is a working version:
jsfiddle working link
You can do it like the following!
<form>
<input type="text" id="first_name" name="first_name"/>
<input type="submit" id="submit" value="submit"/>
</form>
<script type="type/javascript"/>
jQuery.noConflict();
(function ($) {
$(function () {
$("#submit").click(function () {
if ($("#first_name").val() == "first name") {
$(this).val("");
}
});
});
})(jQuery);
</script>
I need to send a variable returned from a javascript function with a form.
<form name="RegForm" method="post" action="/validate_accountinfo.php" onsubmit="send()">
</form>
function send()
{
var number = 5;
return number;
}
In the validate_accountinfo.php I want to return the value of the function. How to do this?
Place a hidden field in your form, and set its value in your javascript function.
Hidden field:
<input type="hidden" id="hdnNumber">
JavaScript:
function send(){
var number = 5;
document.getElementById("hdnNumber").value = number;
}
Add an <input hidden id="thevalue" name="thevalue" /> to the form, set its value using javascript and then submit the form.
<form id="RegForm" name="RegForm" method="post" action="/validate_accountinfo.php" onsubmit="send()">
<input hidden id="thevalue" name="thevalue" />
</form>
<script type="text/javascript">
function send()
{
var number = 5;
return number;
}
document.getElementById('thevalue').value = send();
document.getElementById('RegForm').submit();
</script>
Make a <input type="hidden" id="field" /> and update it's value with jQuery.
$("#field").attr({value: YourValue });
Add a hidden input and populate it before sending. Make sure you specify a name= attribute.
<form name="RegForm" method="post" action="/validate_accountinfo.php" onsubmit="send()">
<input type="hidden" name="myvalue"/>
</form>
function send()
{
var number = 5;
// jQuery
$('input[name=myvalue]').val( number )
return true;
}