Develop Reference

How to direct to a different url if check box enable

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.

Error message will show if user is already available in the database

Im validating the textbox whether the values are already available in database or not. in the below code it is working fine also showing alert message(Notification ID Already Available).But If i click ok in the alert box,mouse cursor is going to second textbox.I want Cursor should be in the first textbox itself if i click on the ok button in the alertbox. ANy suggestions.
Please find the code below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function checkValid(){
var flg="Y";
$.getJSON( "dynamic_content_values1.json", function( data ){
var textVal=$("#character_validation").val();
$.each( data, function( key, val ) {
if(textVal===val.notificationID){
flg="N";return false;
}
});
if(flg==="N"){
alert("Notification ID Already Available!");
//$("#character_validation").focus('');
}
else{
alert("Notification ID Available");
}
return false;
});
}
</script>
</head>
<body>
<form method="post">
<input type="text" id="character_validation" onblur="checkValid();" maxlength="10" onkeyup="this.value = this.value.replace(/[^a-zA-Z0-9-]/g, '')">
<br>
<input type="text">
<!-- <input type="submit" name="submit" value="Submit" onclick="checkValid();">-->
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>

You have to use this after alert statment,
setTimeout(function(){$("#character_validation").focus('');}, 1);
I have tried in JAVASCRIPT,
function IsUserExist(txtcontrol) { //txtcontrol means this
if(txtcontrol.value == "2") {
alert("User Exist");
setTimeout(function() {
document.getElementById('txtUserName').focus();
}, 0);
return false;
}
}

textarea data entry check with alert if empty

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>

JQuery UI Dialog Not Showing when using a separate JS File

I'm new to Javascript and JQuery and i want to create a basic social website. I got stuck on the login page though. What i basically want the website to do is when you click Login a dialog will popup and say that your password and username are not correct and two buttons to say sign up and cancel. I understood you can do that using JQuery Dialog UI but im struggling doing it. These are my HTML, Javascript and CSS page.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="css/login.css">
<!-- include the jquery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- include the jquery ui library -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
// show the dialog when submit is clicked and checked
function showDialog(){
/* select the div you want to be a dialog, in our case it is 'basicModal'
you can add parameters such as width, height, title, etc. */
$( "#basicModal" ).dialog({
modal: true,
title: "Are you sure?",
buttons: {
"YES": function() {
window.open('signup.html');
},
"NO": function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
<script src="js/script.js"></script>
</head>
<body>
<section class="loginform">
<form name="login" action="" method="post" onsubmit="return check(login)" accept-charset="utf-8">
<ul>
<li><label for="usermail">Email</label>
<input type="username" name="username" placeholder="username" required></li>
<li><label for="password">Password</label>
<input type="password" name="password" placeholder="password" required></li>
<li>
<input type="submit" value="Login" ></li>
</ul>
</form>
</section>
<!--
-this is the actual dialog, yes, it is included in your html body, it is just hidden
-we did not set the dialog 'title' here, we set it in the js parameter
-->
<div id="basicModal">
You mad? Username and Password are not correct. Please sign up using the button below.
</div>
</body>
</html>
This is my Javascript Page
function check(form) {
/*the following code checkes whether the entered email and password are matching*/
if (form.username.value === "user" && form.password.value === "pass") {
window.open('home.html'); /*opens the target page while Id & password matches*/
} else {
//alert("Password or Username Not Found. Please sign up."); /*displays error message*/
showDialog();
}
}
And my css
ul
{
list-style-type: none;
}
.loginform {
margin: 20% auto;
width:200px;
}
/* dialog div must be hidden */
#basicModal{
display:none;
}

You need to return false from the check() function to prevent the form from submitting:
function check(form) {
/*the following code checkes whether the entered email and password are matching*/
if (form.username.value === "user" && form.password.value === "pass") {
window.open('home.html'); /*opens the target page while Id & password matches*/
} else {
//alert("Password or Username Not Found. Please sign up."); /*displays error message*/
showDialog();
return false;
}
}
You also have a syntax error. There shouldn't be ); at the end of showDialog().
Here's a working fiddle

Form in JSP Page not Submitting

I have a jsp page which has a form embedded and I'm submitting the form via JavaScript.
When the page has say aroung 10-50 items the submit is working fine but if the page has aroud 500 items or more its not submitting.
After I click the submit button the page just stays in the current page and it just keeps loading.
How can I solve this issue.
A sample code is shown below:
<html>
<script type="text/javascript">
function submitChecked() {
var approveStr="";
var approveArr=new Array();
if(document.frmReleaseDetail.checkBoxVer.length != undefined)
{
for(var i=0; i < document.frmReleaseDetail.checkBoxVer.length; i++)
{
if(document.frmReleaseDetail.checkBoxVer[i].checked)
{
approveStr +=document.frmReleaseDetail.checkBoxVer[i].value + ",";
approveArr.push(document.frmReleaseDetail.checkBoxVer[i].value);
}
}
if(approveStr=="")
alert("Please make a selection by clicking atleast one checkbox");
else
{
document.getElementById("passCheckVerVal").value=approveArr;
document.forms["newForm"].submit();
}
} //end of if checking multiple checkboxes
else //if the page has only one checkbox(version)
{
if(document.frmReleaseDetail.checkBoxVer.checked)
{
window.location = "process.jsp?passCheckVer="+document.frmReleaseDetail.checkBoxVer.value+'&u_trackingRequestID=<%=request.getParameter("u_trackingRequestID")%>';
}
else
alert("Please make a selection by clicking atleast one checkbox");
}
}
</script>
<body>
<%
String newTrackingReqId=request.getParameter("u_trackingRequestID");
%>
<form name=frmReleaseDetail>
//jdbc code
//100's checkbox named checkBoxVer
//button to invoke submitChecked javascript function
</form>
<form name=newForm" id="newForm" action="process.jsp" method="post">
<input type="hidden" name="passCheckVer" id="passCheckVerVal"/>
<input type="hidden" name="u_trackingRequestID" id="u_trackingRequestIDVal" value="<%=newTrackingReqId%>"/>
</form>
</body>
</html>

You need to change the form method to POST.
<form name=frmReleaseDetail method="post">
By default the method is GET. More informations here. You have quantity of data limitation lot smaller in GET.
EDIT :
Code suggestion with only one form :
<html>
<script type="text/javascript">
function submitChecked() {
var checked = false;
for(var i=0; i < document.frmReleaseDetail.checkBoxVer.length; i++)
{
if(document.frmReleaseDetail.checkBoxVer[i].checked)
{
checked = true;
break;
}
}
if((document.frmReleaseDetail.checkBoxVer.length != undefined and checked) or (document.frmReleaseDetail.checkBoxVer.checked))
{
document.forms["frmReleaseDetail"].submit();
}
else
{
alert("Please make a selection by clicking atleast one checkbox");
}
</script>
<body>
<%
String newTrackingReqId=request.getParameter("u_trackingRequestID");
%>
<form id="frmReleaseDetail" name="frmReleaseDetail" action="process.jsp" method="post">
<input type="hidden" name="u_trackingRequestID" id="u_trackingRequestIDVal" value="<%=newTrackingReqId%>"/>
//jdbc code
//100's checkbox named checkBoxVer
//button to invoke submitChecked javascript function
</form>
</body>
</html>

For anyone making noob (newbie) mistakes:
1: Type is "submit" NOT "button"
GOOD/CORRECT:----------------------------------------------
<input type="submit" value="some_button_label" />
BAD/INCORRECT:----------------------------------------------
<input type="button" value="some_button_label" />
2: Submit button needs to be nested inside the form.
GOOD/CORRECT:----------------------------------------------
<form action="cookies-personalize-response.jsp">
SEL_YOUR_FAV_PROG_LANG
<select name="fav_lan">
<option>LANG_01</option>
<option>LANG_02</option>
<option>LANG_03</option>
</select>
<input
type ="submit"
value="some_button_label"
/>
</form>
BAD/INCORRECT:------------------------------------------------
<form action="cookies-personalize-response.jsp">
SEL_YOUR_FAV_PROG_LANG
<select name="fav_lan">
<option>LANG_01</option>
<option>LANG_02</option>
<option>LANG_03</option>
<option>LANG_04</option>
</select>
</form>
<input
type ="submit"
value="some_button_label"
/>
3: Referesh page after fix, view source in browser to make sure actually changed.
As silly as the last answer is, it is actually the one that I got stuck on the longest.