Hi all i have login form design in html 5 and depending on login details enterd it shoud redirect to respective page. i am checking login details in javascript and redirecting page using javascript but its not working at all. page is not getting redirect.
<form id="html5form" method="post">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="tbl_form">
<tbody>
<tr>
<td>
<label>Username: <span>*</span></label>
</td>
<td>
<input type="text" name="txtLoginNm" id="txtLoginNm" class="field" required="required" placeholder="Enter Username" onkeydown="fnAdmPassword(e);"/>
</td>
</tr>
<tr>
<td>
<label>Password: <span>*</span></label>
</td>
<td>
<input type="password" name="txtPwd" id="txtPwd" maxlength="20" class="field" required="required" Placeholder="Enter Password" onkeydown="fnAdmPassword(e);"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" title="Login" value="Login" name="Login" class="buttom" onclick="javascript:return fnlogin();" />
</td>
</tr>
</tbody>
</table>
</form>
//// and the javascript function is as follows
function fnlogin()
{
if ((document.getElementById("txtLoginNm").value == "") && (document.getElementById("txtPwd").value == ""))
{
alert("Please enter Username & Password!");
}
else if ((document.getElementById("txtLoginNm").value == "user155") && (document.getElementById("txtPwd").value == "user155"))
{
window.location.href = "comp-admin/u_dashboard.shtm";
}
else if ((document.getElementById("txtLoginNm").value == "superadmin") && (document.getElementById("txtPwd").value == "superadmin")) {
window.location.href = "s-admin/edit-profile.shtm";
}
else (alert("Invalid username or password!"))
}
please tell me why page is not getting redirect
This is why it is not redirecting
<input type="submit" title="Login" value="Login" name="Login" class="buttom" onclick="javascript:return fnlogin();" />
You have to make 2 changes here
Change button type from submit to just button, because then submit functionality is taking precedence and you have no action url defined
Remove javascript: from your call. (As also suggested by Jan Hančič in comments)
So try this
<input type="button" title="Login" value="Login" name="Login" class="buttom" onclick="return fnlogin();" />
Related
I have a table which show product's files. A file can have a note added. If a note was added, it is displayed in a row. If not, text area field with submit button is displayed instead.
Short story, it all works, except for the first row without a note. After typing a note and clicking submit button nothing happens.
HTML:
<div id="files-list" style="display: none">
<table class="table">
<thead>
<tr>
<th>File</th>
<th>Date</th>
<th>Notes</th>
<th></th>
</tr>
</thead>
<tbody>
<c:if test="${fn:length(bean.product.files)>0}">
<c:forEach items="${bean.product.files}" var="na">
<tr>
<td>${na.name}</td>
<td><fmt:formatDate value="${na.created}" pattern="yyyy-MM-dd HH:mm" /></td>
<td>
<c:if test="${empty na.note}">
<form:form id="${na.id}" method="POST" modelAttribute="bean" action="${pageContext.request.contextPath}/app/updateFile.ajax?id=${bean.product.id}&fileId=${na.id}" style="display: inline">
<form:textarea path="prodFiles" rows="1" cols="50" />
<input type="hidden" name="version" value="${bean.product.version}">
<input type="submit" id="submitButton" value="Save it!" />
</form:form>
</c:if>
<c:if test="${not empty na.note}">
<div style="max-width: 400px">${na.note}</div>
</c:if>
</td>
<td><button type="button" class="btn btn-xs btn-danger" onclick="$().mkdelformTable('${pageContext.request.contextPath}/app/deleteFile.ajax?id=${bean.product.id}&fileId=${na.id}', this)">Delete it!</button></td>
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
</div>
Possible hints:
When I open the table (it's a pop-up) console shows multiple [DOM] Found X elements with non-unique id errors
Checking elements in dev's tools I noticed that the first row doesn't include the form part. Possibly connected with the multiple-same-ids problem. Example:
<td>
<textarea id="prodFiles" name="prodFiles" rows="1" cols="50"></textarea>
<input type="hidden" name="version" value="181">
<input type="submit" id="submitButton" value="Save it!">
</td>
VS
<td>
<form id="65" style="display: inline" action="/oferty/app/updateFile.ajax?id=12701&fileId=65" method="POST">
<textarea id="prodFiles" name="prodFiles" rows="1" cols="50"></textarea>
<input type="hidden" name="version" value="181">
<input type="submit" id="submitButton" value="Save it!">
</form>
</td>
Edit: Also, new files can be added so hard-coding different names/ids can't be done, if suggested.
As I found out, there was some legacy code. I managed to get rid of 'multiple same ids' etc. errors by adding a note in an additional pop-up - on a previos page, instead of an input, I included a button to the new pop-up.
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 am loading an Ajax form with Smarty and jQuery.
It should load this:
{foreach $topFEED as $article}
<tr>
<td><form action='postbox.php' method='POST'></td>
<td><img class="favicon_prev" src="http://www.google.com/s2/favicons?domain={$article.img_link}"> <input type="text" name="link" style="width: 300px;" value="{$article.link}" READONLY/></td>
{if $loggedin}<td><input type='submit' id="abo" name="submit" value='Abonnieren' /></td>
<input type='hidden' name="action" value='add_feed' READONLY />{/if}
<td></form></td>
</tr>
{/foreach}
Ajax Code:
$.ajax({
type: 'GET',
url: "article.php?method=top_feeds",
dataType: 'html',
})
.done(function(html) {
$("#ajax_top_feeds").replaceWith(html);
});
Result:
<tr>
<td><form action="postbox.php" method="POST"></form></td>
<td><img class="favicon_prev" src="http://www.google.com/s2/favicons?domain=http://www.n-tv.de"> <input type="text" name="link" style="width: 300px;" value="http://www.n-tv.de/rss" readonly=""></td>
<td><input type="submit" id="abo" name="submit" value="Abonnieren"></td>
<input type="hidden" name="action" value="add_feed" readonly=""> <td></td>
</tr>
Your HTML is invalid, the browser is simply correcting it for you. form elements can't cross multiple table cells like that.
You can wrap a form around your entire table:
<form>
<table>
<!--- etc. --->
</table>
</form>
Or you can place a form inside of a table cell:
<table>
<tr>
<td>
<form>
<!--- etc. --->
</form>
</td>
</tr>
</table>
But you can't begin a form in one cell and end it in another. The hierarchy of HTML markup isn't structured that way. Tags must be closed before parent tags are closed.
I have radio buttons for each row of my table. On clicking radio button and clicking on submit button selected values must appear in the dialogue box.
My code is:
<form action="" method="POST">
<table border="1" id="escalationTable" >
<thead>
<tr>
<td style="width: 20px;"></td>
<td><h3>Date<h3></td>
<td><h3>Status<h3></td>
<td><h3>Ward<h3></td>
<td><h3>Source Address<h3></td>
<td><h3>Escalated by MPW on<h3></td>
<td><h3>Action to be taken<h3></td>
</tr>
</thead>
<tbody>
<?php for($i=$start;$i<$end;$i++)
{
$address=$ARRAY[$i]['source_address'];
$add=str_replace('"',"'",$address);
$wardd=$ARRAY[$i]['ward_name'];
$typo=$ARRAY[$i]['type_desc'];
$action=$ARRAY[$i]['action_required'];
$Reptime = date('d-m-Y',strtotime($ARRAY[$i]['source_repTime']));
$category=$ARRAY[$i]['scat_desc'];
$subtype_s=$ARRAY[$i]['subtype_desc'];
$credai_s=$ARRAY[$i]['source_credai'];
$floor=$ARRAY[$i]['source_floorNo'];
$breed_s=$ARRAY[$i]['source_breedingSite'];
$recc_s=$ARRAY[$i]['source_recurrence'];
$closedate = date('d-m-Y',strtotime($ARRAY[$i]['action_closeDate']));
$statuss=$ARRAY[$i]['escl_status'];
$source_id=$ARRAY[$i]['source_id'];
$escl_id=$ARRAY[$i]['escl_id'];
$comma="(!#!)";
$tot1=$add.$comma.$wardd.$comma.$typo.$comma.$action.$comma.$Reptime.$comma.$category.$comma;
$tot2=$subtype_s.$comma.$credai_s.$comma.$floor.$comma.$breed_s.$comma.$recc_s.$comma.$closedate.$comma.$statuss.$comma.$source_id.$comma.$escl_id;
$total=$tot1.$tot2;
?><tr>
<td><input type="radio" name="ID[]" value="<?php echo $total; ?>" <?php echo $_POST['ID'][0]==$total ? 'checked':'';?> required /></td>
<?php
$dmydate = date('d-m-Y',strtotime($ARRAY[$i]['escl_date']));
echo'<td>'.$dmydate.'</td>';
echo'<td>'.$ARRAY[$i]['escl_status'].'</td>';
echo'<td>'.$ARRAY[$i]['ward_name'].'</td>';
echo'<td>'.$ARRAY[$i]['source_address'].'</td>';
echo'<td>'.$ARRAY[$i]['source_escMPW_Date'].'</td>';
echo'<td>'.$ARRAY[$i]['action_required'].'</td>';
?>
</tr>
<?php }?>
</tbody>
</table>
<div id="RecordNo">
<?php echo"<p id='messages'>$records:$match</p>";?>
</div>
<table id="escButtons">
<tr>
<td>
<input type="submit" name="details" value="Details" id="btndetails" />
</td>
</tr>
</table>
<?php
if(isset($_POST['details']))
{
$n=$_POST['ID'];
$a=implode("</br>",$n);
echo"</br>";
list($add, $ward,$typo,$action,$Reptime,$category,$subtype_s,$credai_s,$floor,$breed_s,$recc_s,$closedate) = explode("(!#!)", $a);
$address=str_replace("'",'"',$add);
if($breed_s=='1')
{$breed_s="Yes";}
else{$breed_s="No";}
if($recc_s=='1')
{$recc_s="Yes";}
else{$recc_s="No";}
?><div id="element_to_pop_up">
<a class="b-close">x<a/>
<table id="RowDetails">
<tr>
<td>
<ul><?php echo"<b>Source reported date:</b>$Reptime</br>";?></ul>
<ul><?php echo"<b>Source Address:</b>$address</br>";?></ul>
<ul><?php echo"<b>Source Category:</b>$category</br>";?></ul>
<ul><?php echo"<b>Source Type:</b>$typo</br>";?></ul>
<ul><?php echo"<b>Source Subtype:</b>$subtype_s</br>";?></ul>
<ul><?php echo"<b>Source CREDAI:</b>$credai_s</br>";?></ul>
<ul><?php echo"<b>Source Floor No :</b>$floor</br>";?></ul>
<ul><?php echo"<b>Breeding site:</b>$breed_s</br>";?></ul>
<ul><?php echo"<b>Recurrence:</b>$recc_s</br>";?></ul>
<ul><?php echo"<b>Source Action Required:</b>$action</br>";?></ul>
<ul><?php echo"<b>Suggested Closure Date:</b>$closedate</br>";?></ul>
</td>
</tr>
</table></div><?php
}
I need my control flow as Click radio->click details button->Pop up with radio button details message. Please help me !
First you dont have any form submit action means you dint submit the form anywhere is the reason you dint get any value from post.If you dont want to reload page you can use jquery to set the value of popup.
Fiddle
Second to place required field in radio button just put required in only one radio button.Source
Do this
<form id="myform">
<p>
Untraced :<input type="radio" name="inc_untraced" value="No" required />No
<input type="radio" name="inc_untraced" value="Yes" />Yes
</p>
<input type="submit" name="details" value="Details" id="my-button" />
</form>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close">x<a/>
U have clicked on <?php $_POST['inc_untraced'];?>
</div>
Fiddle
(function($) {
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
if($('input:radio:checked')){
var v = $('input:radio:checked').val();
if(v!=undefined){
$('.radioVal').text(v)
}else{
alert('please select radio button')
return false;
};
}
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
<p>
Untraced :<input type="radio" name="inc_untraced" value="No" required />No
<input type="radio" name="inc_untraced" value="Yes" required />Yes
</p>
<input type="submit" name="details" value="Details" id="my-button" />
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close">x<a/>
U have clicked on <span class="radioVal"> </span> <?php $_POST['inc_untraced'];?>
</div>
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>