I need a quick help. I stuck on a problem with my jquery datepicker...
My code to insert the datepicker looks like:
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$(".datepicker").datepicker();
});
</script>
Now i want to pop up the datepicker with the following code:
<form action="indexdev.php?s" method="GET">
<table class="table">
<tbody>
<tr>
<td class="col-sm-3">date: <input type="hidden" name="test" value="">
<input type="text" name="s"
class="datepicker hasDatepicker" value="" id="dp"></td>
<td class="col-sm-3"><input type="submit"></td>
<td class="col-sm-3"></td>
</tr>
</tbody>
</table>
</form>
Hopefully you guys can help me... :D Cheers!
Fixed.
My best regards.
Cleaned up a bit of code for the snipet and organized the structure of your cdn imports.
To solve: remove the value and unused css classes of the input.
Added id aproach.
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<table class="table">
<tbody>
<tr>
<td class="col-sm-3">date:
<input type="text" id="dp"></td>
<td class="col-sm-3"><input type="submit"></td>
</tr>
<tr>
<td class="col-sm-3">another date:
<input type="text" class="datepicker"></td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$("#dp").datepicker();
$(".datepicker").datepicker();
});
</script>
Related
Im using a form to be able to use the input of the user to save some information.
In this case it's instructions for a receipt. However I would like to have an unlimited number of fields for that (as you can see in the image it has 3 fields).
I would like to have an option at the bottom, like a button where it would create a new input field. I've searched in bootstrap documentation and I don't find anything related to that, they always use a fixed number of input fields...
Any suggestion?
This is the code I'm using to generate the fields (10 at the moment):
<div class="col-md-4">
<h2>Instructions</h2>
<div class="form-group">
<table style="width:75%">
<tr>
<th><label asp-for="Instructions[0].Designation" class="control-label"></label></th>
</tr>
#for (int i = 0; i < 10; i++)
{
<tr>
<td><input asp-for="Instructions[i].Designation" class="form-control" placeholder="Step #(i+1) " /></td>
</tr>
<span asp-validation-for="Instructions[i].Designation" class="text-danger"></span>
}
</table>
</div>
The following code is a fully functional example on how you can achive what you are asking for:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Instructions</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="col-md-4">
<h2>Instructions</h2>
<div class="form-group">
<table id="instructionsTable" style="width:75%">
<tr>
<th><label asp-for="Instructions[0].Designation" class="control-label"></label></th>
</tr>
<tr>
<td><input asp-for="Instructions[i].Designation" class="form-control" placeholder="Step #(i+1)" /></td>
</tr>
<span asp-validation-for="Instructions[i].Designation" class="text-danger"></span>
</table>
</div>
<input id="addInputBtn" type="button" value="+" />
<script>
$(document).ready(function(){
$("#addInputBtn").click(function(){
var newInput = "<tr><td><input asp-for='Instructions[i].Designation' class='form-control' placeholder='' /></td></tr>";
$("#instructionsTable").append(newInput);
})
});
</script>
</body>
</html>
I am trying to create a simple login page for a server:
<html>
<head>
<title>Login Page</title>
</head>
<body>
<form name="loginForm" method="post" action="login.php">
<table>
<tr>
<td colspan=2><center><font size=4><b>HTML Login Page</b></font>
</center></td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" size=25 name="userid"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="Password" size=25 name="pwd"></td>
</tr>
<tr>
<td ><input type="Reset"></td>
<td><input type="submit" onclick="return check(this.form); load();"
value="Login">
</td>
</tr>
</table>
</form>
<script language="javascript">
function check(form)
{
if(form.userid.value == "n" && form.pwd.value == "n")
{
return true;
}
else
{
alert("Error Password or Username")
return false;
}
</script>
</body>
</html>
The HTML above is how i would like the page to look, however i want to add another function that when the login button is pressed i would like the page to take me to a different page like google for example.
Is there anyway I can do this?
Through Html you can do something like:
<form action="http://google.com">
<input type="submit" value="Go to Google">
</form>
I have been debugging the following html code and it has a weird behavior.
Everytime, when I load the page in IE, the browser seems doesn't pickup the width attribute initially. However, it is working fine after a refresh. This page works on all browser but IE. Could you please give me some tips what's going on here?
Thank you very much
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<title>Money_market</title>
</head>
<body lang="3DEN-US" style="3D'tab-interval:.5in'">
<div id="IDMS_container">
<div style="text-align:right;" id="logout">User: <b></b> Logout</div>
<div class="tabs">
<ul>
<li>Cusip Entry Lookup</li>
<li>Corp/Gov.<br>Bond Lookup</li>
<li>Muni Bond<br>Lookup</li>
<li class="selected">Money Market<br>Lookup</li>
<li>Help</li>
<div class="clear"></div>
</ul>
</div>
<br>
<div id="symbol">
<h1>Money Market Lookup:</h1>
<table>
<tbody><tr>
<form method="GET"></form>
<td class="valign">Issuer:</td>
<td class="valign"><input type="text" value="" id="form" size="9" name="desc"></td>
<td class="valign">Coupon:</td>
<td style="width:100px;" class="valign"><input type="text" value="" id="form" size="4" name="coupon"></td>
<input type="hidden" value="money" name="s_pageid">
<td class="valign"><input type="submit" value="Lookup" id="button" name="button"></td>
</tr>
</tbody></table>
<!--span class="date_form">(Enter Date: MM/DD/YYYY)</span-->
</div>
<div id="quote">
<table>
<tbody><tr>
<th>Issue Name</th>
<th>Coupon</th>
<th>Maturity Date</th>
<th>Bid Evaluation</th>
<th>Bid Evaluation Date</th>
</tr>
</tbody></table>
</div>
<link type="text/css" rel="stylesheet" media="screen" href="http://www.federated.test.idmanagedsolutions.com/css/IDMS_styles.css"> </div>
</body></html>
In a HTML form I am using JavaScript Form validation to avoid empty fields. This is the code for the form:
<form method="post" name="form1" onsubmit="return validateForm()" action="<?php echo $editFormAction; ?>">
<table align="center">
<tr valign="baseline">
<td nowrap align="right">Nickname:</td>
<td>
<input type="text" name="nickname" value="" size="32">
</td>
</tr>
<tr valign="baseline">
<td nowrap align="right">Email:</td>
<td><input type="text" name="email" value="" size="32"></td>
</tr>
<tr valign="baseline">
<td nowrap align="right">Password:</td>
<td><input type="text" name="password" value="" size="32"></td>
</tr>
<tr valign="baseline">
<td nowrap align="right"> </td>
<td><input type="submit" value="Insert record"></td>
</tr>
</table>
<input type="hidden" name="estado" value="0">
<input type="hidden" name="MM_insert" value="form1">
</form>
And this is the JavaScript function:
<script>
function validateForm()
{
var x=document.forms["form1"]["nickname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
As expected, if the user clicks on the submit button and the field 'nickname' is empty, the Alert Dialog is shown, but after closing it, the form is submitted. I am using Dreamweaver as editor and JQuery Mobile in my web, may be this is the problem.
Any help is welcome.
Working example: http://jsfiddle.net/Gajotres/vds2U/50/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<form method="post" id="form1" name="form1" action="" data-ajax="false">
<table align="center">
<tr valign="baseline">
<td nowrap align="right">Nickname:</td>
<td>
<input type="text" name="nickname" value="" size="32"/>
</td>
</tr>
<tr valign="baseline">
<td nowrap align="right">Email:</td>
<td><input type="text" name="email" value="" size="32"/></td>
</tr>
<tr valign="baseline">
<td nowrap align="right">Password:</td>
<td><input type="text" name="password" value="" size="32"/></td>
</tr>
<tr valign="baseline">
<td nowrap align="right"> </td>
<td><input type="submit" value="Insert record"/></td>
</tr>
</table>
<input type="hidden" name="estado" value="0"/>
<input type="hidden" name="MM_insert" value="form1"/>
</form>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
JavaScript:
$(document).on('submit', '#form1', function(){
var x=document.forms["form1"]["nickname"].value;
if (x==null || x=="") {
alert("First name must be filled out");
return false;
} else {
return true;
}
});
Changes:
jQuery Mobile has its own way of form handling, you need to disable it if you want to have classic form handling. It is done via attribute data-ajax="false".
Never use inline javascript with jQuery Mobile, I mean NEVER.
For me this is working fine :
<script>
function validateForm()
{
var x=document.forms["form1"]["nickname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}else{
return true;
}
}
</script>
Just added a else statement. It's working fine for me.
I think your code should work. But If not you can make some changes as
Change 1 Remove Submit event from tag
<form method="post" name="form1" action="<?php echo $editFormAction; ?>">
Change 2.
Change submit button to default button and validate event here
<input type="button" onclick="javascript:validateForm();" value="Insert record">
Change 3.
Now change in javascript Add code form sub
<script>
function validateForm()
{
var x=document.forms["form1"]["nickname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
}else{
document.forms["form1"].submit();
}
}
</script>
This is my code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<html>
<script type="text/javascript" src="http://widgets.amung.us/tab.js"></script><script type="text/javascript">WAU_tab('itd362bk84w5', '')</script>
</html><title>EngineersHub Results Portal-It's OU & JNTU Here-Powered by Sparcsis</title>
<head background="hmm.png" id="header">
<center><img src="hmm.png" width="920" height="180"></img></center>
<link rel="stylesheet" href="ress1.css" media="screen" type="text/css" />
<style type="text/css">
.alignCenter{text-align: center;}
.alignLeft{text-align: left;}
.alignRight{text-align: right;}
.alignTopLeft{text-align: left; vertical-align: top;}
.alignBottomLeft{text-align: left; vertical-align: bottom;}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
});//]]>
</script>
</head>
<body>
<body background="hmm.png">
</td></tr></td></br>
<center><table id='mytable' cellspacing='0' border=3 align=center>
<form id="form" action="" method="post" name="result" style="align:center;">
<tr><td><p align="center"><font size="3"><b>JNTUH - B.Tech IV Year II Semester (R07) Advance Supplementary Results - July 2012</b></font></p></td></tr>
<tr><td><p align="center"><b>Last Date for RC/RV : 8th August 2012</b></p></td></tr>
<td><p align="center">Hall Ticket No :</b> <input type="text" name="id" id="id" maxlength="10" autofocus="autofocus" "></p></td>
<tr> <td align="center" colspan="3">
<script type="text/javascript">
(function (d) {
d.getElementById('form').onsubmit = function () {
d.getElementById('submit').style.display = 'block';
d.getElementById('loading2').style.display = 'block';
};
}(document));
</script>
<div id="loading2" style="display:none;"><img src="loading.gif" width="50" height="50" alt="" /></br><font color="black">Processing...All the Best</font> </div>
<input type="submit" id="submit" class='btnExample' value="Click here to get your Result"> </td></tr>
</form></br>
</table></center>
<script>
$("#id").keyup(function(){
if($(this).val().length == 10)
$('#form :submit').click();
})
</script>
</body>
</html>
In this form user will enter 10 numbers or characters then he clicks on submit to get the result,
But i want to make user to get result when he enter the 10th character or number with out clicking on submit
Please help me
AFTER EDITING
This is my Entire code... if i remove table it is working but with this code it is not working please help me
Sounds like a job for jQuery. With it is as simple as this:
$(document).ready(function() {
$("#id").keyup(function() {
if ($(this).val().length >= 10) {
$("#form").submit();
}
});
};
Of course you might want to fire an ajax request instead of submitting,
but that's up to you ...
I think that the use of JavaScript (with jQuery) will solve this one. If you attach a Javascript key press event handler to the tag and use this to count the number of characters entered. When the count reaches 10 then you can submit the form again using JavaScript.
Good luck with this.
write a callback on keyup on input, check if value has length 10, submit the form..
<form id="form" action="#" method="post" name="result" style="align:center;">
<td>
<p align="center">Hall Ticket No :</p>
<input type="text" name="id" id="input_field" maxlength="10" autofocus="autofocus" />
</td>
<td>
<input type="submit" id="submit" class='btnExample' value="Click here to get your Result">
</td>
</form>
<script>
$("#input_field").keyup(function(){
if($(this).val().length == 10)
$('#form :submit').click();
})
</script>
Working Example