I have 3 submit forms in tabs.after submitting the form it displays the message registration successfully. But it goes to home page so only after clicking the particular tab I can see the message. I want to make the tab to stay in the current tab after submitting the form.
<div class="tabs">
<form id="target">
<ul class="tab-links">
<li ><a href="#tab1" id="tabs-A" >Incident Report</a></li>
<li>Death Report</li>
<li><a href="#tab3" id="tabs-C" >Negative Case Data</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab ">
<p>
<?php
include("Report1.php");
?>
</p>
</div>
<div id="tab2" class="tab">
<p>
<?php
include("Report2.php");
?>
</p>
</div>
<div id="tab3" class="tab">
<p>
<?php
include("Report3.php");
?>
</p>
</div>
</div>
</form>
</div>
this is my jquery:
<script>
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
</script>
this is my Report1.php.
<?php
include_once 'dataAccessControl.php';
$DataAccessController = new DataAccessController();
if (isset($_POST['report1']))
{
$daydropdown111=$_POST['daydropdown111'];
$monthdropdown111=$_POST['monthdropdown111'];
$yeardropdown111=$_POST['yeardropdown111'];
$dreport_place=$_POST['dreport_place'];
$dreport_address=$_POST['dreport_address'];
$dreport_additional=$_POST['dreport_additional'];
}
else
{
$daydropdown111="";
$monthdropdown111="";
$yeardropdown111="";
$dreport_place ="";
$dreport_address="";
$dreport_additional="";
}
if (isset($_POST['report1']))
{
$death = $DataAccessController->death_reports($_POST['daydropdown111'],$_POST['monthdropdown111'],$_POST['yeardropdown111'],$_POST['dreport_place'], $_POST['dreport_address'], $_POST['dreport_additional']);
if ($death) {
echo"<p><font color=red size='5pt' > Your Report has been Registered</font></p>";
//header("Refresh:3;url='deathReport.php'");
}
}
?>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Death Report</title>
<script type="text/javascript">
var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
function populatedropdown(dayfield, monthfield, yearfield)
{
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<=31; i++)
dayfield.options[i-1]=new Option(i, i)
dayfield.options[today.getDate()-1]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=1999
for (var y=0; y<45; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
</script>
</head>
<body >
<div id="color" >
<table>
<h1 align="center"><p>Death Report</h1>
<form action="" method="POST">
<tr><td>Date </td><td>
<select name="daydropdown111" id="daydropdown111"></select>
<select name="monthdropdown111" id="monthdropdown111"></select>
<select name="yeardropdown111" id="yeardropdown111"></select>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
populatedropdown("daydropdown111", "monthdropdown111", "yeardropdown111")
</script>
</td></tr>
<tr><td></br> Place of </td><td></br><select name="dreport_place"id="wgtmsr">
<option value="hospital" >Hospital</option><option value="residence">Residence</option><option value="others">Others</option></select></td></tr>
<tr><td>Address </td><td></br><textarea name="dreport_address" rows="5" cols="32" id="loc" value=""> </textarea></td></tr>
<tr><td>Additional Cases if any</td><td></br> <textarea name="dreport_additional" rows="5" cols="32" id="loc" value=""> </textarea></td></tr></label></td></tr>
<tr><td></td><td><input type="submit" name="report1" value="Save" id="btnsize" /></td></tr>
</form>
</table></br>
</div>
</body>
</html>
Related
I am new to angular. And I am creating a practice project. I am following This tutorial.
Everything is working fine except when I try to put data annotations in my View Model the $resource.save method no more works. Without data annotations, it works fine.
Here is my code:
Home.html:
<!DOCTYPE html>
<html ng-app="movieModule">
<head>
<meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1">
<title>Movie Sample</title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/angular-resource.min.js"></script>
<script src="../Scripts/angular-route.min.js"></script>
<script src="../Scripts/jquery-2.1.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../Scripts/movie-module.js"></script>
<script src="../Scripts/Category/category-controller.js"></script>
<script type="text/javascript">
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
});
</script>
</head>
<body>
<div class="container">
<div class="container-fluid">
<div class="well">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li role="presentation">Movies</li>
<li role="presentation">Categories</li>
<li role="presentation">Artists</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div ng-view="">
</div>
</div>
</div>
</body>
</html>
Categories.html:
<div>
<a href="create-category.html" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</a>
</div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Categories</div>
<!-- Table -->
<table class="table">
<tr>
<th>ID
</th>
<th>Name
</th>
<th>Description
</th>
</tr>
<tr data-ng-repeat="category in categories">
<td>{{ category.id }}
</td>
<td>{{ category.name }}
</td>
<td>{{ category.description }}
</td>
</tr>
</table>
</div>
create-category.html
<div class="row">
<div class="col-md-12">
<h3>Create Category
</h3>
</div>
</div>
<!--<div class="row">-->
<div class="col-md-12">
<div class="form-group">
<label for="id">Id:</label>
<input type="text" ng-model="category.Id" class="form-control">
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" ng-model="category.Name" class="form-control">
</div>
<div class="form-group">
<label for="description">Description:</label>
<input type="text" ng-model="category.Description" class="form-control">
</div>
<button type="submit" class="btn btn-primary" ng-click="save(category)">Create Category</button>
</div>
movieModule.js
var movieModule = angular.module('movieModule', ['ngRoute', 'ngResource']);
movieModule.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/templates/categories.html', { templateUrl: '/templates/categories.html', controller: 'categoryController' }).
when('/templates/create-category.html', { templateUrl: '/templates/create-category.html', controller: 'categoryController' });
$locationProvider.html5Mode(true);
});
category-controller.js
movieModule.controller('categoryController', function ($scope, $resource, $location) {
$scope.categories = $resource('/api/Category').query();
$scope.save = function (category) {
$scope.errors = [];
$resource('/api/Category').save(category).$promise.then(
function () { $location.url('templates/categories.html'); },
function (response) {
$scope.errors = response.data;
});
}
});
CategoryVM.cs
public class CategoryVM
{
[Required(ErrorMessage="Is is required.")]
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
}
The problem is [Required(ErrorMessage="Is is required.")]. Everything works fine without [Required(ErrorMessage="Is is required.")]but the moment I put [Required(ErrorMessage="Is is required.")] it starts giving error:
Here is the snapshot of the error:
Try not to put the [Required] attribute on the Id.
It should work if you put data annotations on your other properties.
[Required] to a value type (int) will cause a 500 error
(string is not a value type)
I am try to when click on Form submit button it navigates to new page with same window dynamically but it is not loading the details but it navigates to that page.I am sending my code also please help me.
Html page
<head>
<title>sample</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
{{> header}}
{{> body}}
{{> footer}}
</div>
<div class="row-fluid">
{{render-Router}}
</div>
</body>
<template name="header">
<header>
<div class="header">
<img src="./logo.png" style="height:100px;width:200px;"/>
</div>
</header>
</template>
<template name="body">
<div class="bgbody">
<div align="center">
<form id="login-form" action="/admindetails">
<table>
<p class="admin">Admin Login</p>
<tr>
<td><p for="username">Admin Name</p></td>
<td><input type="text" id="username" name="username" placeholder="UserName"></td>
</tr>
<tr>
<td><p for="password">Password</p></td>
<td><input type="password" id="pwd" name="password" placeholder="password"></td>
</tr>
<td></td><td><input class="btn btn-success" type="submit" value="Log In"></td>
<td><input class="btn btn-capsule" type="button" value="New User"></td>
</table>
</form>
</div>
</div>
</template>
<template name="footer">
<div class="footer">
<div style="padding:20px;">
<div class="footerlinks"><p>AboutUs</p></div>
<div class="footerlinks">|</div>
<div class="footerlinks"><p>ContactUs</p></div>
<div class="copyright"><p>Copyright#Healt_Care</p></div>
</div>
</div>
</template>
Client code:
if (Meteor.isClient) {
Meteor.Router.add({
'/admindetails':'admindetails'
})
Template.body.events
({
'submit #login-form' : function (e,t)
{
/* template data, if any, is available in 'this'*/
if (typeof console !== 'undefined')
console.log("You pressed the button");
e.preventDefault();
/*retrieve the input field values*/
var email = t.find('#username').value
, password = t.find('#pwd').value;
console.log(email);
Meteor.loginWithPassword(email, password, function (err)
{
if (err)
{
console.log(err);
alert(err.reason);
Session.set("loginError", true);
}
else
{
console.log(" Login Success ");
Meteor.Router.to("/admindetails");
}
});
}
});
}
You manage the submit event yourself, so there's no need to set up the action parameter of the form. Setting that parameter causes browser to load target page on submit. Simply remove the parameter and things should work as intended.
I've implemented a Photoshop design into HTML using Bootstrap (my first time with bootstrap). That is a single page website and have 4 sections (actually pages). Every section have multiple pages which I've have showed in Tab Panel using Bootstrap's tabbable class. It's working fine, I want a sliding effect for every tab to display it's content. Means, if a section contains 3 tabs and I click on the 2nd tab, the next tab's content appear as sliding effect. Is there only class name to add?
Thanks.
I think this is about it
<div class="container">
<div class="row">
<div id="tab-container" class="span6 offset1">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Options</li>
<li class="disabled">Information</li>
<li class="disabled">Payment</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="options">
<div class="well">
<form id="frmtype1" action="" name="frmtype1" method="post">
<fieldset>
<legend>Registration Options</legend>
<label for="Reg_type1" class="radio">
<input type="radio" name="Reg_type" id="Reg_type1" value="1"/>
Registering myself with credit card or bank account
</label>
<br>
<label for="Reg_type2" class="radio">
<input type="radio" name="Reg_type" id="Reg_type2" value="2"/>
Registering multiple people using credit card or bank account
</label>
<br>
<label for="Reg_type3" class="radio">
<input type="radio" name="Reg_type" id="Reg_type3" value="3"/>
Registering using a purchase order
</label>
</fieldset>
<button class="btn-demo btn" data-activate="#information">Continue</button>
<span class="help-inline" style="display:none;">Please choose an option</span>
</form>
</div><!--/.well -->
</div>
<div class="tab-pane" id="information">
<div class="well">
<form name="everything" id="frmtype2" action="" method="post"><p>Some content to give this pane a little bit of bulk</p>
<button class="btn-demo btn" data-activate="#payment" type="submit">Continue</button>
</form>
</div><!--/.well -->
</div>
<div class="tab-pane" id="payment">
<div class="well">
<p>Some content for the 3rd pane.</p>
</div><!-- .well -->
</div>
</div>
</div><!-- /.row -->
</div><!-- /#tab-container --> </div><!-- /.container -->
JAVASCRIPT
var selector;
var selectorID;
activateTab('#myTab a:first');
function activateTab(selectorID)
{
$(selectorID).tab('show')
.closest('.disabled').removeClass('disabled');
}
function deactivateTab(selector)
{
$(selector).off('click.twbstab')
.closest('li').addClass('disabled');
}
$('.btn-demo').on('click',function() {
selector = '#myTab a[href="'+$(this).data('activate')+'"]';
selectorID = $(selector).attr('href');
});
var val1 = $('#frmtype1').validate(
{
errorPlacement: function(error, element) {},
// prevent the standard error message from showing, rather you use the inline-text
rules: {
'Reg_type': {
required: true
}
}
});
// validate 1st form
$('#frmtype1').submit(function(e)
{
// validate the first page
if(val1.form()) {
$('.help-inline').hide();
activateTab(selector);
} else {
$('.help-inline').show();
}
return false;
});
// validate 2nd form
$('#frmtype2').submit(function(e)
{
// validate the second page
activateTab(selector);
return false;
});
// if 2nd or 3rd tab is clicked, validate as if the form was submitted
$('#myTab li:eq(1) a, #myTab li:eq(2) a').click(function(e)
{
selectorID = $(this).attr('href');
// validate the first page
if(val1.form()) {
$('.help-inline').hide();
activateTab(this);
$(selectorID).tab('show');
} else {
$('.help-inline').show();
}
return false;
});
// re-position all tab-panes, except the active pane, so that they are prepared for the slide effect
$(".tab-pane").css("position", "relative");
$(".tab-pane").not(".active").animate({
left: "1000px"
});
// perform slide effect
$('a[data-toggle="tab"]').on('show', function (e) {
lastPane = $(e.relatedTarget).attr('href');
$(lastPane).animate({left: "1000px"}, 300)
currPane = $(e.target).attr('href');
$(currPane).animate({left: "0px"}, 300);
});
JSFidle DEMO
i wrote a html code. here i created a form inside which some rows are to be display and a table. Everything is fine but the table does not display in the browser. can you please help me. thanks in advance.
the code is:
<form>
<div id="formWrap">
<h1 align="center" style="color:#0000FF" >B.E. Degree Course Registration</h1>
<div id="form">
<div class="row">
<div class="label0" style="color:#FF0000; font-style:italic; margin-left:20px; font-size:18px">Personel details:</div>
</div> <!-- end of 0th row -->
<div class="row">
<div class="label">Name</div>
<div class="input">
<input type="text" id="fullname" required="required" class="detail" name="fullname" />
</div>
<div class="label">Sex</div>
<div class="inputradio">
<input type="radio" id="radio" required="required" class="detailradio" name="sex" />
<span class="style7">Male</span>
<input type="radio" id="sex" required="required" class="detailradio" name="sex" />
<span class="style7">Female </span></div>
</div> <!-- end of first row -->
<div class="label3">ECA</div>
<div class="inputeca">
<select name="eca">
<option id="eca" required="required" class="ecadetail" value="eca1">NSS</option>
<option id="eca" required="required" class="ecadetail" value="eca2">NCC</option>
<option id="eca" required="required" class="ecadetail" value="eca3">Cultural</option>
</select>
</div>
<div class="label3">Year</div>
<div class="inputyear">
<script language="JavaScript"> <!-- start JS code hide
// loop to create the list
var year = 2012
document.write("<select name='years'>");
for (var i=1; i <=200; i++)
{
year++;
document.write("<option>" + year + "</option>");
}
// end JS code hide -->
</script>
<p></p>
</div>
</div> <!-- end of row -->
<table width="600" border="2">
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col5</td>
<td>col6</td>
</tr>
</table>
<div class="row">
<div class="submit" style="margin-left:708px">
<input type="submit" id="submit" name="submit" value="Proceed"/>
</div>
</div>
</div>
</div>
</form>
Change:
<script language="JavaScript"> <!-- start JS code hide
// loop to create the list
var year = 2012
document.write("<select name='years'>");
for (var i=1; i <=200; i++)
{
year++;
document.write("<option>" + year + "</option>");
}
// end JS code hide -->
</script>
To
<select name="years">
<script language="JavaScript">
// loop to create the list
var year = 2012
for (var i=1; i <=200; i++)
{
year++;
document.write("<option>" + year + "</option>");
}
// end JS code hide -->
</script>
</select>
You don't need to start the select tag with JS, and you forgot to close the tag so the table wouldn't show (as well as other stuff, probably).
Your script is just not closing the select element so the table was inside the select.
<script language="JavaScript"> <!-- start JS code hide
// loop to create the list
var year = 2012
document.write("<select name='years'>");
for (var i=1; i <=200; i++)
{
year++;
document.write("<option>" + year + "</option>");
}
document.write("</select>")
// end JS code hide -->
That should do the trick.
You forgot to close the select tag
<script language="JavaScript"> <!-- start JS code hide
// loop to create the list
var year = 2012
document.write("<select name='years'>");
for (var i=1; i <=200; i++)
{
year++;
document.write("<option>" + year + "</option>");
}
document.write("</select>");
// end JS code hide -->
</script>
Check here http://jsfiddle.net/ZHdqK/
I am trying retrieve an element "Nature News Standard Article in Nature News & Comment" which is part of below HMTL code.
I have following WebDriver code in selenium:
if ("Polopoly CM".equals(driver.getTitle())) {
System.out.println("----> Title of page <----");
driver.findElement(By.xpath("//*[starts-with(#id,'nav_') and #class='p_textOutput']"));
System.out.println("----> Xpath Selected <----");
driver.findElement(By.xpath("//*[starts-with(#id,'nav_') and #class='p_textOutput']")).click();
System.out.println("----> Xpath Clicked <----");
}
Problem is: i am unable to retrive the required element through Xpath/CSS from HTML
HTML:
<document>
<html xmlns:polopoly="http://www.polopoly.com/polopoly/cm/app/gui" xmlns="http://www.w3.org/1999/xhtml" style="cursor: default;">
<head>
<body id="nav_3" class="navFrameBody" onbeforeunload="busyCursor();" onload="onLoad(); idleCursor();">
<script type="text/javascript"> <!-- Jasmine.createFrame('nav'); //--> </script>
<form id="mainform" name="mainform" method="post" action="CM">
<input type="hidden" value="2852906396" name="owid"/>**
<input type="hidden" value="1332852912984" name="ofid"/>
<input type="hidden" value="nav" name="ofn"/>
<input type="hidden" value="true" name="ofs"/>
<input id="nav_1" type="hidden" value="0" name="nav_1"/>
<input id="nav_2" type="hidden" value="0" name="nav_2"/>
<div id="nav_13_placeHolder" class="ajax_placeHolder">
<fieldset id="nav_14" class="field"/>
<div id="nav_4" class="p-group quickCreator expanded">
<div id="nav_4_state">
<input id="nav_15" type="hidden" value="expanded" name="nav_15"/>
</div>
<div class="toggleIcon clearfix"/>
<script lang="javascript">$(document).ready(function() {p_makeExpandable('nav_4', 'nav_15')});</script>
<fieldset id="nav_16" class="contentCreator field topContentCreator">
<div class="quickCreator contentCreator container">
<div class="quickCreator header clearfix">
<h2> Create New </h2>
<a id="nav_17" class="customize" href="javascript:actionEventData({$contentId:"18.232.1319560059", $action:"edit", $target:"work", $opentab:"menu/quickCreatorLayout"})">Customize</a>
</div>
<div class="list">
<div class="quickCreator link">
<input type="hidden" value="" name="nav_18"/>
<a id="nav_18" href="javascript:submitForm(document.mainform, document.mainform.nav_18, "x")">
<img id="nav_19" class="centered" alt="" src="images/icons/transparentIcon.png"/>
<span id="nav_20" class="p_textOutput">Nature News Standard Article in Nature News & Comment</span>
</a>
</div>
</div>
</div>
</fieldset>
</div>
<div id="nav_5" class="p-group contentTree expanded">
<div id="nav_5_state">
<input id="nav_21" type="hidden" value="expanded" name="nav_21"/>
</div>
<div class="toggleIcon clearfix"/>
<script lang="javascript">$(document).ready(function() {p_makeExpandable('nav_5', 'nav_21')});</script>
<div class="field contentTree">
<div id="nav_6_placeHolder" class="ajax_placeHolder">
<div class="header">
<span class="label">Content Tree</span>
<button id="nav_9" type="button" value="Refresh tree" name="nav_9">
<img id="nav_22" class="centered" alt="" src="images/icons/refresh.png"/>
<span id="nav_23" class="p_textOutput"> Refresh tree</span>
<script type="text/javascript"> <!-- jQuery(document).ready(function() { addOnClickEvent("nav_9",null, "nav_9_placeHolder", null, new IndicatorLifecycleHook('p.std_ajaxIndicator', true, 0.8, "createImageTop('images/ajax/busy_indicator_big_green.gif')")); }); //--> </script>
</button>
</div>
<div class="tree">
<div id="nav_8_placeHolder" class="ajax_placeHolder">
<script type="text/javascript"> jQuery.require(["script/polopoly-ui.js"]); </script>
<input id="nav_8" type="hidden" value="" name="nav_8"/>
<script type="text/javascript"> jQuery.require(["script/polopoly-ui.js"]); </script>
<ul id="nav_8_tree" class="tree">
</div>
</div>
</div>
</div>
</div>
<fieldset id="nav_24" class="field clipboard">
<input id="nav_25" type="hidden" value="" name="nav_25"/>
</fieldset>
</form>
<script type="text/javascript"> <!-- jQuery(document).ready(function() { if(window.parent.SeleniumPageLoadCountnav==null) { window.parent.SeleniumPageLoadCountnav=1; window.parent.SeleniumPageLoadCountnavOld=0; } else { window.parent.SeleniumPageLoadCountnav+=1; } }); //--> </script>
</body>
</html>
</document>
I see two elements which can be selected by your xpath locator. Try to find both of them.
List<WebElement> elements = webDriver.findElements(By.xpath("your_xpath"));
for (Element element : elements) {
element.click();
}
Your HTML code is:
Nature News Standard Article in Nature News & Comment
So, You can use id or xpath to retrieve the element text as follows:
Using id:
String s = driver.findElement(By.id("nav_20")).getText();
System.out.println(s);
Using xpath:
String s1 = driver.findElement(By.xpath("//span[#id='nav_20']")).getText();
System.out.println(s1);
css=a[href*='javascript:submitForm'] > span.p_textOutput
Try the above CSS Selector. I am sure it will work out.
Please Let me know is it working or NOT.