with some advice from this forum below code is working for me when I type in the textbox and it will direct to a url.
<script src="jquery.min.js"></script>
<script>
function test() {
if(jQuery('#inputtext').val() == 'google'){
// alert('Input can not be left blank');
window.location.href = "https://www.google.com/";
}
if(jQuery('#inputtext').val() == 'yahoo'){
// alert('Input can not be left blank');
window.location.href = "https://www.yahoo.com/";
}
else if(jQuery('#inputtext').val() == ''){
alert('Input can not be left blank');
}else if(jQuery('#inputtext').val() != ['google'||'yahoo']){
alert("INVALID Entry");
}
}
</script>
<form id="main" name="main"><input type="text" name="inputtext" id="inputtext" placeholder="type here"/><input type="button" value="submit" onClick="test();"></form>
Is it possible to add a checkbox, and if checkbox is checked with text input it should direct to another url.
ex: now if I type google it directing google.com, Required if checked box is checked and if typed as google it should direct to gmail.com
form in below
<form id="main" name="main">
<input type="text" name="inputtext" id="inputtext" placeholder="type here"/>
<input type="checkbox" name="inputcheckbox" id="inputcheckbox">Redirect
<input maxlength="10" type="button" value="submit" onClick="test();" ></form>
Kindly advice..
For jQuery 1.6+ : You can use $('#inputcheckbox').prop('checked')) to check whether the checkbox is checked or not.
for jQuery < 1.6 :
$('#inputcheckbox').attr('checked')).
I am using change event to check the condition, so if you want to check your condition on submit click you can copy the code inside it to your submit event/function.
Below is my sample code.
$(function() {
$('#inputtext,#inputcheckbox').change(function() {
if ($('#inputtext').val() == 'google' &&
$('#inputcheckbox').prop('checked')) {
alert('redirecting to google...')
window.location.href = "https://www.google.com/";
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="main" name="main">
<input type="text" name="inputtext" id="inputtext" placeholder="type here" />
<input type="checkbox" name="inputcheckbox" id="inputcheckbox">
<input maxlength="10" type="button" value="submit" onClick="AddPrinter();">
</form>
I'm not sure I understood your problem, but it seems you want to change the redirect URL to www.gmail.com when the user types "google" and checks the checkbox.
You can achieve this the following way:
if($('#inputtext').val() == 'google' && $('#inputcheckbox').isChecked) {
window.location.href = "https://www.gmail.com/";
}
PS: You can use $ instead of jQuery in your code, it has the same effect and keeps the code cleaner.
add checkboxes with different IDs
<input type="checkbox" id="isAgeSelected"/>
then use script
if(document.getElementById('isAgeSelected').checked) {
window.location.href = // Some URL
}
another way is
$('#isAgeSelected').click(function() {
window.location.href = // Some URL
});
<script>
function test() {
if(jQuery('#inputtext').val() == 'google' && jQuery('#inputcheckbox').isChecked){
// alert('Input can not be left blank');
window.location.href = "https://www.google.com/";
}
if(jQuery('#inputtext').val() == 'yahoo' && jQuery('#inputcheckbox').isChecked){
// alert('Input can not be left blank');
window.location.href = "https://www.yahoo.com/";
}
else if(jQuery('#inputtext').val() == ''){
alert('Input can not be left blank');
}else if(jQuery('#inputtext').val() != ['google'||'yahoo']){
alert("INVALID Entry");
}
}
</script>
I hope my answer will help you.
Related
I have a form that has a textarea field for input. I want an alert to pop up if the field is empty on submit.
I copied some code that works fine on an input field; however, it does not work for the textarea (it submits with no alerts whether empty or not).
I read through some other questions posted here and made some modifications.
Now, it alerts when empty, but it also alerts when there is text and does not submit.
I am new to this. I am using asp classic.
Code:
<form method="post" action="reasonProcess.asp" name="formName" onSubmit="return Validate()">
<table >
<tr>
<td>Please enter a reason for the change:<br>
<textarea style="width:675px;height:75px" rows="12" cols="10" name="changereason" > <%=dbchangereason%> </textarea></td>
</tr>
</table><br>
<input type=button value="Approve" onClick="javascript:saveAndSubmit()" class="btn" style="float:none;font-size:.78em;">
</form>
<script>
function saveAndSubmit()
{
// Check for reason entered.
if (!document.formName.changereason.value == '')
{
alert("Enter a reason.");
return false;
}
var queryString = "reasonProcess.asp?Approve=Yes";
document.formName.action=queryString;
document.formName.submit();
// window.close();
}
</script>
This is line of code that works properly with the input text field:
if (!document.formName.changereason.value)
I have also tried:
if (!document.formName.changereason.value.length == 0)
and get the alert without text and with text.
Thanks for any help.
UPDATED
'!' is the logical not operator in JavaScript.
The condition in your code say if the value of changereason textarea is not empty show alert() because of the ! sign that mean not, but what you want is the contrary (if field is empty then show alert), so try just to remove the sign and it will work, do the follow change :
Replace :
if (!document.formName.changereason.value == '')
{
alert("Enter a reason.");
return false;
}
By :
if (document.formName.changereason.value == '') //removing the ! sign in this line
{
alert("Enter a reason.");
return false;
}
See Working fiddle.
If that not work take a look at External simple page with the same code that is not a fiddle and it should work also in your machine, code of external example :
<!DOCTYPE html>
<html>
<head><title></title>head>
<body>
<form method="post" action="reasonProcess.asp" name="formName" onSubmit="return Validate()">
<table >
<tr>
<td>Please enter a reason for the change:<br>
<textarea style="width:675px;height:75px" rows="12" cols="10" name="changereason" > <%=dbchangereason%> </textarea>
</td>
</tr>
</table>
<br>
<input type=button value="Approve" onClick="javascript:saveAndSubmit()" class="btn" style="float:none;font-size:.78em;">
</form>
<script>
function saveAndSubmit()
{
// Check for reason entered.
if (document.formName.changereason.value == '')
{
alert("Enter a reason.");
return false;
}
var queryString = "reasonProcess.asp?Approve=Yes";
document.formName.action=queryString;
document.formName.submit();
// window.close();
}
</script>
</body>
</html>
If that work and not the first example then maybe you have another part of code tha caused a problem and that is not referenced in the question.
Good luck.
change
if (!document.formName.changereason.value == '')
{
alert("Enter a reason.");
return false;
}
to
if (document.formName.changereason.value == '')
{
alert("Enter a reason.");
return false;
}
The ! means "not" - so you were saying if the value is not empty then alert.
In form tag write
<form action="" method="post" enctype="multipart/form-data" onsubmit="return checkform(this);">
This is your input field
<textarea name="reviewValue"></textarea>
Javascript Code:
<script language="JavaScript" type="text/javascript">
function checkform ( form ){
if (form.reviewValue.value == "") {
alert( "Please choice your Rating." );
form.reviewValue.focus();
return false ;
}
return true ;
}
</script>
I know there is a lot answers for that out-there, but from some reason it not working for me.
You can view the code on JSFiddle
There is mistake on the position of the script? with one of the inputs id ?
The problem: after fill the text fields, the button still disabled.
HTML
<form class="form" name="contactform" method="post" action="https://lp.outit.co.il/LA-FACE/send_form_email.php">
<input placeholder="Your Name*" type="text" name="name" maxlength="50">
<input placeholder="Phone *" type="text" name="telephone" maxlength="30">
<input placeholder="Email *" type="email" name="email" maxlength="80">
<input class="send" id="register" type="submit" value="Send" disabled="disabled">
<p>* = Requierd fields</p>
</form>
JQUERY ON HEAD
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() === '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})();
</script>
I posted working fiddle ,Is this what u want ? http://jsfiddle.net/qqwcu/2/
Note its preferred to use: $('#register').prop("disabled", false);
Check this Remove disabled attribute using JQuery?
$(document).ready(function(){
$('form > input').keyup(function() {
var empty1 = false;
$('form > input').each(function() {
if ($(this).val() === '') {
empty1 = true;
}
});
if (empty1) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').prop("disabled", false);
}
});
});
Your fiddle is fine, although ,You havent included jQuery there. Did that solve the problem?
Your code is run, when the DOM is not yet ready.
Sor wrap it with
$(document).ready()
I have a text field and a checkbox on a mobile website that needs to be required before submitting the form. One is a zip code search that needs to be required to go on, and also a check box for a terms and conditions.
Right now i have the textfield validation working...
<script>
function validateForm() {
var x=document.forms["searchform"]["fromAddress"].value;
if (x==null || x=="") {
alert("Oops! You forgot to enter a location.");
return false;
}
}
</script>
but i cant figure out how to add in the checkbox...
below is the code for the form:
<form name="searchform" method="post" action="list.php" onsubmit="return validateForm()">
<input type="hidden" name="search" value="1" />
<input class="txtfield" type="search" id="search" name="fromAddress" onfocus="this.value=''" />
<div class="terms-container">
<div class="terms-checkbox-container">
<input class="acceptterms" type="checkbox" name="agree" value="agree_terms">
</div>
<div class="terms-text-container">
I Agree to the Terms and Conditions
</div>
</div>
<input class="btn-submit" type="submit" id="submit" value="Go!"/>
</form>
any help would be great. Thanks!
I believe you can check the checkbox's checked property:
var checked = document.forms["searchform"]["agree"].checked;
if (!checked) {
alert("Oops! Please check the checkbox!");
return false;
}
You can get the state of the checkbox using checked attribute. So, you can do something like this.
<script>
function validateForm() {
var x=document.forms["searchform"]["fromAddress"].value;
var y=document.forms["searchform"]["agree"].checked;
if (x==null || x=="") {
alert("Oops! You forgot to enter a location.");
return false;
}
if (y === false) {
alert("Oops! You forgot to agree to the terms and Conditions");
return false;
}
}
</script>
Use below code:
var agreeCheckbox = document.forms["searchform"]["agree"];
if(!agreeCheckbox.checked) {
alert('You need to accept terms to submit');
return false;
}
return true;
You can use that
function validateForm()
{
var x=document.forms["searchform"]["fromAddress"].value;
if (x==null || x=="")
{
alert("Oops! You forgot to enter a location.");
return false;
}
var checkbox = document.forms['searchform']['agree'];
if (!checkbox.checked) {
alert('Oops! You must agree with Terms');
return false;
}
return true;
}
http://jsfiddle.net/KkYmX/5/
you can use this answer for form validation in the checkbox
//checkbox
var m=document.getElementById("client");
console.log(m)
if(!m.checked){
document.getElementById("bekar").innerHTML="please agree term & condition ";
document.getElementById("bekar").style="color:red";
return false;
}
else{
document.getElementById("bekar").innerHTML="";
}
<input type="checkbox" class="form-check-input" id="isclient" required>
<label class="form-check-label" for="isclient"> I want you to work on a project with me</label><br><span id="bekar"></span>
JS
$('.add_to_list').live('keydown',function (e){
if(e.keyCode == '13'){
var holder=$(this).attr('hold'),
val=$(this).val();
if(holder == 'mf' ||holder == 'mp'){
var v='#'+holder;
h='<li class="entery deletable"><input type="hidden" name="'+holder+'[]" value="'+val+'">'+val+'</li>';
$(v).append(h);
$(this).val('');
}
e.prevent_default();
return false;
}
$('#save_clinic').submit(function(){return false;});
});
HTML
<form accept-charset="utf-8" method="post" id="save_clinic" action="#">
<p>
<b>Findings</b>
<ol id='mf'></ol>
<input type="text" hold="mf" class="add_to_list" value="" name="">
<!--the input hv no name cause i dont want it to be submitted, this is for adding only-->
</p>
<p>
<b>Medical Procedures:</b>
<ol id=mp></ol>
<input type="text" hold="mp" class="add_to_list" value="" name="">
<!--the input hv no name cause i dont want it to be submitted, this is for adding only-->
</p>
<input type=submit>
</form>
Problem:
I want to prevent submit on keypress ENTER and only allow submit on submit button click,
but my current js prevent submit for both and if I remove
$('#save_clinic').submit(function(){return false;});
from js then the form auto submit when user is trying to populate the form.
Can some one please tell me what is the problem here?
example
The function is called preventDefault (no underscore, capital 'D'), not prevent_default. Give that a try and remove this line:
$('#save_clinic').submit(function(){return false;});
I think this should be outside:
$('.add_to_list').live('keydown',function (e){
if(e.keyCode == '13'){
var holder=$(this).attr('hold'),
val=$(this).val();
if(holder == 'mf' ||holder == 'mp'){
var v='#'+holder;
h='<li class="entery deletable"><input type="hidden" name="'+holder+'[]" value="'+val+'">'+val+'</li>';
$(v).append(h);
$(this).val('');
}
}
e.prevent_default(); // take this out from the if
$('#save_clinic').submit(function(){return false;});
});
$('.add_to_list').live('keydown',function (e){
if(e.keyCode == '13'){
var holder=$(this).attr('hold'),
val=$(this).val();
if(holder == 'mf' ||holder == 'mp' ||holder == 'orders'){
var v='#'+holder;
h='<li class="entery deletable"><input type="hidden" name="'+holder+'[]" value="'+val+'">'+val+'</li>';
$(v).append(h);
$(this).val('');
}
//return false;
e.preventDefault();
AND
http://www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx
both works fine now.. thanks all
I can't understand why my javascript isn't working... Do i need to declare a variable somewhere?
<script type="text/javascript">
function validation(form) {
if(form.first_name.value == '' ) {
alert('Please enter your first name');
form.first_name.focus();
return false;
}
if(form.00N30000006S4uq.value == '') {
alert('Please enter the high end of your budget');
form.company.focus();
return false;
}
return true;
}
</script>
<form action="https://www.salesforce.com/servlet/servlet.WebToLead" method="POST" onsubmit="return validation(this);">
As mentioned by #ReturnTrue, the NAME must begin with a letter. That is why your script is failing.
In your case since the field is auto-generated, if you know the flow of the elements in the form then you can reference the form elements array, like this...
form.elements[2].value
where form.elements[2] is form.00N30000006S4uq. That will do the job.
Example:
function validation(form) {
if(form.elements[0].value == '' ) {
alert('Please enter your first name');
form.first_name.focus();
return false;
}
if(form.elements[2].value == '') {
alert('Please enter the high end of your budget');
form.company.focus();
return false;
}
return true;
}
<form action="" method="POST" onSubmit="return validation(this);">
<input type="text" name="first_name" />
<input type="text" name="company" />
<input type="text" name="00N30000006S4uq" />
<input type="submit" name="submit" />
</form>
Form names need to begin with a letter. "00N30000006S4uq" fails because it begins with a number.
See: http://www.w3.org/TR/html401/types.html#type-cdata