I am creating a responsive sharepoint visual webpart.
everything works fine and looks good but my mobile view is pretty much off.
the controls doesn't shrink to the lowest mobile size..
i tried many times but still i have the same issue..
<fieldset class="form-horizontal">
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Name:
</label>
<div class="controls col-xs-8 col-md-7">
<asp:TextBox MaxLength="50" runat="server" ID="txtTitle" CssClass="form-control">
</asp:TextBox>
</div>
</div>
<div class="clearfix">
</div>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="selectbasic">Ano:
</label>
<div class="controls col-xs-8 col-md-2">
<asp:DropDownList runat="server" ID="ddYear" CssClass="form-control">
</asp:DropDownList>
</div>
</div>
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="selectbasic">Mes:
</label>
<div class="controls col-xs-8 col-md-2">
<asp:DropDownList runat="server" ID="ddMonth" CssClass="form-control">
</asp:DropDownList>
</div>
</div>
<div class="clearfix">
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Tema de Salud:
</label>
<div class="controls col-xs-8 col-md-7">
<asp:DropDownList runat="server" CssClass="form-control" ID="ddHealthTopic">
</asp:DropDownList>
</div>
</div>
<div class="clearfix">
</div>
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Unidad administrativa:(por sus siglas en ingles entre paréntesis)
</label>
<div class="controls col-xs-8 col-md-7">
<asp:DropDownList runat="server" CssClass="form-control" ID="ddOrgUnit">
</asp:DropDownList>
</div>
</div>
</fieldset>
<br />
<div class=" col-xs-10 col-md-10">
<div class="input-group" >
<span class="input-group-btn">
<asp:Button CssClass="btn btn-primary" ToolTip="Buscar" runat="server" ID="btnSubmit" Text="Buscar" OnClick="btnSubmit_Click" />
</span>
</div>
</div>
Your code seems to be fine ....
Try to add (If its no there)
<meta name="viewport" content="width=device-width, initial-scale=1">
head section of your master page
Related
I have created an form for submission and written a controller method to handle it in spring MVC. But the request is not reaching the controller method.Please let me know what mistake i'm making in writing the controller/form method.
Below is my code snippet which is self explanatory.
Controller method:
#RequestMapping(value="/users/login/projectUpdate",method=RequestMethod.POST)
public String updateProjectStatus( User user,Model model,Authentication
authentication,HttpServletRequest request,final RedirectAttributes
redirectAttributes) {
logger.debug("Update Project Status Data()");
String projectname=request.getParameter("projectName");
String projectStatus=request.getParameter("projectStatus");
String projectStatusDate=request.getParameter("projectStatusDate");
userService.updateProject(projectStatus,projectStatusDate,projectname);
return "users/updateProject";
}
JSP form:
<spring:url value="/users/login/projectUpdate" var="updateProjectUrl" />
<form:form method="post" modelAttribute="updateProjectForm"
action="${updateProjectUrl}" id="ProjectForm">
<label class="col-sm-2 control-label">Projects</label>
<div class="col-sm-9">
<form:select path="project" multiple="false" class="form-control" id="project1">
<form:option label="--Select--" value=""/>
<form:options items="${project}" />
</form:select>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Project Description</label>
<div class="col-sm-9">
<form:input path="projectDescription" type="text" class="form-control" id="projectDescription1" placeholder="Project Description" readonly="true"/>
</div>
</div>
<div class="form-group ${status.error ? 'has-error' : ''}">
<label class="col-sm-2 control-label">Project Start Date</label>
<div class="col-sm-9">
<form:input path="projectStartDate" type="text" class="form-control" id="projectStartDate1" placeholder="Project Start Date" readonly="true" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Current Status</label>
<div class="col-sm-9">
<form:input path="projectCurrentStatus" type="text" class="form-control" id="projectCurrentStatus" placeholder="Project Status" readonly="true"/>
</div>
</div>
<div class="form-group ${status.error ? 'has-error' : ''}">
<label class="col-sm-2 control-label">Current Status Date</label>
<div class="col-sm-9">
<form:input path="projectCurrentStatusDate" type="text" class="form-control " id="projectCurrentStatusDate" placeholder="Project Current Status Date" readonly="true"/>
</div>
</div>
<label class="col-sm-2 control-label">New Status</label>
<div class="col-sm-9">
<form:select path="projectStatus" multiple="false" class="form-control" id="projectStatus1" >
<form:option label="--Select--" value=""/>
<form:options items="${projectstatus}" />
</form:select>
</div>
<label class="col-sm-2 control-label">New Status Date</label>
<div class="col-sm-9">
<form:input path="projectStatusDate" type="date" class="form-control " id="projectStatusDate1" placeholder="Project Status Date" data-validation="date" data-validation-format="yyyy-mm-dd" />
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Project Team Members</label>
<div class="col-sm-9">
<form:input path="projectTeam" type="text" class="form-control " id="projectTeam1" placeholder="Project Team members" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-7">
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>
Please try using BindingResult like below :
public String updateProjectStatus( User user,BindingResult bindingResult,Model model,Authentication authentication,HttpServletRequest request,final RedirectAttributes redirectAttributes){
if (bindingResult.hasErrors()) {
//check your errors here
}
}
and make sure all the fields which you are passing from JSP should be present in your User class.
The problem is when I click on submit button on JSP page, Then it will go to the Controller but it did not bind JSP elements to Bean class elements. In the controller, I get the object of bean empty.
stock.jsp will dynamically add in index.jsp page
index.jsp
<!DOCTYPE html>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Metalist Enterprises</title>
<link href="resource/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<link href="resource/vendor/metisMenu/metisMenu.min.css"
rel="stylesheet">
<link href="resource/dist/css/sb-admin-2.css" rel="stylesheet">
<link href="resource/vendor/morrisjs/morris.css" rel="stylesheet">
<link href="resource/vendor/font-awesome/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<script src="resource/vendor/jquery/jquery.min.js"></script>
<script>
function ajaxMethod(referPageName) {
var urlName = '';
if (referPageName == 'newInvoice')
urlName = referPageName;
else if (referPageName == 'inward')
urlName = referPageName;
else if (referPageName == 'outward')
urlName = referPageName;
else if (referPageName == 'search')
urlName = referPageName;
else
urlName = 'stock';
$.ajax({
url : urlName,
success : function(responseText) {
$('#page-wrapper').html(responseText);
}
});
}
</script>
<script>
$(document).on('click', 'input[name="divOptionsRadios"]', function() {
var varInwardStock = document.getElementById('inwardStock');
var varOutwardStock = document.getElementById('outwardStock');
if (varInwardStock.style.display === 'none') {
varInwardStock.style.display = 'block';
varOutwardStock.style.display = 'none';
} else {
varInwardStock.style.display = 'none';
varOutwardStock.style.display = 'block';
}
});
</script>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Metalist Enterprises</a>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div> <!-- /input-group -->
</li>
<li><a href="home"><i class="fa fa-dashboard fa-fw"></i>
Dashboard</a></li>
<li onclick="ajaxMethod('newInvoice')"><a href="#"><i
class="fa fa-table fa-fw"></i> New Invoice</a></li>
<li onclick="ajaxMethod('inward')"><a href="#"><i
class="fa fa-edit fa-fw"></i> Inward</a></li>
<li onclick="ajaxMethod('outward')"><a href="#"><i
class="fa fa-wrench fa-fw"></i> Outward</a></li>
<li onclick="ajaxMethod('search')"><a href="#"><i
class="fa fa-sitemap fa-fw"></i> Search</a></li>
<li onclick="ajaxMethod('stock');"><a href="#"><i
class="fa fa-files fa-fw"></i> Add Stock</a></li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
</nav>
</div>
<script src="resource/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="resource/vendor/metisMenu/metisMenu.min.js"></script>
<script src="resource/vendor/raphael/raphael.min.js"></script>
<script src="resource/vendor/morrisjs/morris.min.js"></script>
<script src="resource/data/morris-data.js"></script>
<script src="resource/dist/js/sb-admin-2.js"></script>
</body>
</html>
stock.jsp
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Stock</h1>
</div>
<div class="col-lg-6">
<div class="radio">
<label> <input type="radio" name="divOptionsRadios"
id="divOptionsRadios1" value="inward" checked='checked'>Inward
</label>
</div>
</div>
<div class="col-lg-6">
<div class="radio">
<label> <input type="radio" name="divOptionsRadios"
id="divOptionsRadios2" value="outward">Outward
</label>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="panel panel-default" id="inwardStock">
<!-- style="display: none;"> -->
<div class="panel-heading">Inward Stock</div>
<div class="panel-body">
<form action="saveStock" method="post">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Invoice</label> <input class="form-control"
name="invoiceNumber" placeholder="Invoice">
</div>
</div>
<div class="col-lg-4">
<div class="form-group input-group">
<label>Date of Invoice</label><input type="text"
name="invoiceDate" class="form-control"
placeholder="Please select Date"> <span
class="input-group-addon">.00</span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>Name Of Company</label> <select class="form-control"
name="companyName">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Material Description</label>
<textarea class="form-control" rows="1"
name="materialDescription" placeholder="Description"></textarea>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label>Quantity</label> <input class="form-control"
path="quantity" placeholder="Quantity">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label>Rate</label> <input class="form-control" name="rate"
placeholder="Rate">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label>Tax</label> <input class="form-control" name="tax"
placeholder="Tax">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label>Amount</label> <input class="form-control" name="amount"
placeholder="Amount">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<button type="submit" class="btn btn-default">Save</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
<div class="col-lg-4"></div>
</div>
</form>
</div>
</div>
<div class="panel panel-default" id="outwardStock"
style="display: none;">
<div class="panel-heading">Outward Stock</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<label>Please select</label>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios1" value="option1" checked>Inward
</label>
</div>
</div>
<div class="col-lg-6">
<div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios2" value="option2">Outward
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<form role="form">
<div class="form-group">
<label>Please select</label>
<div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios3" value="option1" checked>Inward
</label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios4" value="option2">Outward
</label>
</div>
<!-- <div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios5" value="option3">Radio 3
</label>
</div> -->
</div>
<div class="form-group">
<label>Text Input</label> <input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group">
<label>Text Input with Placeholder</label> <input
class="form-control" placeholder="Enter text">
</div>
<div class="form-group">
<label>Static Control</label>
<p class="form-control-static">email#example.com</p>
</div>
<div class="form-group">
<label>File input</label> <input type="file">
</div>
<div class="form-group">
<label>Text area</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<label>Checkboxes</label>
<div class="checkbox">
<label> <input type="checkbox" value="">Checkbox
1
</label>
</div>
<div class="checkbox">
<label> <input type="checkbox" value="">Checkbox
2
</label>
</div>
<div class="checkbox">
<label> <input type="checkbox" value="">Checkbox
3
</label>
</div>
</div>
<div class="form-group">
<label>Inline Checkboxes</label> <label class="checkbox-inline">
<input type="checkbox">1
</label> <label class="checkbox-inline"> <input type="checkbox">2
</label> <label class="checkbox-inline"> <input type="checkbox">3
</label>
</div>
<div class="form-group">
<label>Radio Buttons</label>
<div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios11" value="option1" checked>Radio 1
</label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios12" value="option2">Radio 2
</label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios13" value="option3">Radio 3
</label>
</div>
</div>
<div class="form-group">
<label>Inline Radio Buttons</label> <label class="radio-inline">
<input type="radio" name="optionsRadiosInline"
id="optionsRadiosInline1" value="option1" checked>1
</label> <label class="radio-inline"> <input type="radio"
name="optionsRadiosInline" id="optionsRadiosInline2"
value="option2">2
</label> <label class="radio-inline"> <input type="radio"
name="optionsRadiosInline" id="optionsRadiosInline3"
value="option3">3
</label>
</div>
<div class="form-group">
<label>Selects</label> <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label>Multiple Selects</label> <select multiple
class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit
Button</button>
<button type="reset" class="btn btn-default">Reset
Button</button>
</form>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<h1>Disabled Form States</h1>
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledSelect">Disabled input</label> <input
class="form-control" id="disabledInput" type="text"
placeholder="Disabled input" disabled>
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label> <select
id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label> <input type="checkbox">Disabled
Checkbox
</label>
</div>
<button type="submit" class="btn btn-primary">Disabled
Button</button>
</fieldset>
</form>
<h1>Form Validation States</h1>
<form role="form">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input
with success</label> <input type="text" class="form-control"
id="inputSuccess">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input
with warning</label> <input type="text" class="form-control"
id="inputWarning">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with
error</label> <input type="text" class="form-control" id="inputError">
</div>
</form>
<h1>Input Groups</h1>
<form role="form">
<div class="form-group input-group">
<span class="input-group-addon">#</span> <input type="text"
class="form-control" placeholder="Username">
</div>
<div class="form-group input-group">
<input type="text" class="form-control"> <span
class="input-group-addon">.00</span>
</div>
<div class="form-group input-group">
<span class="input-group-addon"><i class="fa fa-eur"></i>
</span> <input type="text" class="form-control"
placeholder="Font Awesome Icon">
</div>
<div class="form-group input-group">
<span class="input-group-addon">$</span> <input type="text"
class="form-control"> <span class="input-group-addon">.00</span>
</div>
<div class="form-group input-group">
<input type="text" class="form-control"> <span
class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>MetalistEnterprises</groupId>
<artifactId>MetalistEnterprises</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<build>
<sourceDirectory>src</sourceDirectory>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.5.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.0.0</version>
<configuration>
<warSourceDirectory>WebContent</warSourceDirectory>
</configuration>
</plugin>
</plugins>
</build>
<properties>
<spring.version>4.0.3.RELEASE</spring.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
<type>jar</type>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-framework-bom</artifactId>
<version>${spring.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
</dependencies>
</project>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>MetalistEnterprises</display-name>
<servlet>
<servlet-name>mvc-dispatcher</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>mvc-dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
First Controller
#Controller
public class DefaultController {
#Autowired
IStockDetailsService iStockDetailsService;
#RequestMapping(value = "/stock")
public ModelAndView stockMethod(Model model) {
ArrayList<StockBean> stocksList = iStockDetailsService.getAllStocks();
model.addAttribute("stocksList", stocksList);
return new ModelAndView("stock");
}
Second Controller
#Controller
public class StockController {
#Autowired
IStockDetailsService iStockDetailsService;
#RequestMapping(value = "/saveStock")
public ModelAndView saveStock() {
System.out.println("saveStock method called");
iStockDetailsService.saveStock(stockBean);
return new ModelAndView("redirect:/home");
}
}
Bean
public class StockBean {
private Integer idStock;
private String invoiceNumber;
private Date invoiceDate;
private String companyName;
private String materialDescription;
private float rate;
private float amount;
private float tax;
Getter and Setters
}
mvc-dispatcher-servlet.xml
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:jee="http://www.springframework.org/schema/jee"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/jee
http://www.springframework.org/schema/jee/spring-jee-3.0.xsd">
<context:component-scan base-package="metalist.yashdeep.scrap" />
<context:annotation-config />
<mvc:resources mapping="/resource/**" location="/resource/" />
<mvc:annotation-driven />
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix">
<value>/WEB-INF/view/</value>
</property>
<property name="suffix">
<value>.jsp</value>
</property>
</bean>
</beans>
hi i'm trying to get the rate for a product i tried this :
<div class="pro-rate">
<span class="fa fa-star" data-rate="1" ><input type="hidden" name="evaluation" id="1" value="1"></span>
<span class="fa fa-star" data-rate="2" ><input type="hidden" name="evaluation" id="2" value="2"></span>
<span class="fa fa-star" data-rate="3" ><input type="hidden" name="evaluation" id="3" value="3"></span>
<span class="fa fa-star" data-rate="4" ><input type="hidden" name="evaluation" id="4" value="4"></span>
<span class="fa fa-star" data-rate="5" ><input type="hidden" name="evaluation" id="5" value="5"></span>
but it keeps give me only the value of 5 nothing else , how can i get each value as i want not only the last one ?
and here is the full form :
<form class="form-horizontal" action="{{action('onlyController#postIndex')}}" method="POST">
{!! csrf_field() !!}
#foreach($product as $pro)
<input type="hidden" name="product_id" value="{{$pro->id}}" />
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">الاسم </label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" id="inputName" placeholder="الاسم " required>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">الاميل </label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" id="inputEmail" placeholder="الاميل" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">نص التعليق </label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" name="comment" maxlength="1000" required></textarea>
</div>
</div>
<div class="reviews">
<ul>
<li>
<label class="col-sm-2 control-label">التقييم </label>
<span>ردئ</span>
<div class="pro-rate">
<span class="fa fa-star" data-rate="1" ><input type="hidden" name="evaluation[]" id="1" value="1"></span>
<span class="fa fa-star" data-rate="2" ><input type="hidden" name="evaluation[]" id="2" value="2"></span>
<span class="fa fa-star" data-rate="3" ><input type="hidden" name="evaluation[]" id="3" value="3"></span>
<span class="fa fa-star" data-rate="4" ><input type="hidden" name="evaluation[]" id="4" value="4"></span>
<span class="fa fa-star" data-rate="5" ><input type="hidden" name="evaluation[]" id="5" value="5"></span>
</div>
<span>ممتاز</span>
</li>
</ul>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn ">ارسال </button>
</div>
</div>
#endforeach
</form>
how can i do it ?
use 'evaluation[]'
but evaluation will be an array on server
<div class="pro-rate">
<span class="fa fa-star" data-rate="1" ><input type="hidden" name="evaluation[]" id="1" value="1"></span>
<span class="fa fa-star" data-rate="2" ><input type="hidden" name="evaluation[]" id="2" value="2"></span>
<span class="fa fa-star" data-rate="3" ><input type="hidden" name="evaluation[]" id="3" value="3"></span>
<span class="fa fa-star" data-rate="4" ><input type="hidden" name="evaluation[]" id="4" value="4"></span>
<span class="fa fa-star" data-rate="5" ><input type="hidden" name="evaluation[]" id="5" value="5"></span>
$_POST['evaluation'] is going to be an array
$evaluation = $_POST['evaluation'];
foreach($evaluation as $val){
//do something with the values here
}
ok, well all seems to be working for me
<?php
if($_POST)
print_r($_POST['email']);
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
hidden <input type="hidden" name="email[]" value='hjdfkhds' ><br>
hidden: <input type="hidden" name="email[]" value='iufd'><br>
hidden: <input type="hidden" name="email[]" value='78642di'><br>
hidden <input type="hidden" name="email[]" value='uidynsx' ><br>
hidden <input type="hidden" name="email[]" value='qsqaaa'><br>
<input type="submit">
</form>
after I clicked submit. This is what I got
I'm trying to get Angular form validation working in ie8. Here is my code:
<form id="contact-form" name="cform" target="_blank" >
<div class="left">
<div>
<div class="group">
<label for="firstname">First Name <span class="asterisk">*</span></label><br />
<input type="text" name="firstname" id="firstname" data-ng-model="firstname" required />
<span class="error" data-ng-show="cform.input.$error.required">Required!</span>
</div>
<div class="group">
<label for="lastname">Last Name <span class="asterisk">*</span></label><br />
<input type="text" name="lastname" id="lastname" data-ng-model="lastname" required />
<span class="error" data-ng-show="cform.input.$error.required">Required!</span>
</div>
</div>
<div>
<div class="group">
<label for="email">Email Address <span class="asterisk">*</span></label><br />
<input type="email" id="email" name="email" data-ng-model="email" required />
<span class="error" data-ng-show="cform.email.$error.email">Required!</span>
</div>
</div>
<div>
<div class="group">
<label for="phone">Primary Phone Number <span class="asterisk">*</span></label><br />
<input type="text" name="phone" id="phone" data-ng-model="phone" required />
<span class="error" data-ng-show="cform.input.$error.required">Required!</span>
</div>
<div class="group">
<label for="-secondary-phone">Secondary Phone Number</label><br />
<input type="text" name="secondary-phone" id="secondary-phone" />
</div>
</div>
</div>
<div class="right">
<div class="group">
<label for="message">Your Message</label><br />
<textarea id="message"></textarea>
</div><br />
<input type="submit" value="SEND MESSAGE" class="button">
</div>
</form>
This works in Firefox and Chrome, but in IE8 no validation errors are triggered. Anyone know what the issue might be?
Thanks.
UPDATE: This seems to be a problem in all versions of IE. {{cform.input.$error}} and {{cform.input}} don't show output in any browser.
<div class="group">
<label for="firstname">First Name <span class="asterisk">*</span></label><br />
<input type="text" name="firstname" id="firstname" data-ng-model="firstname" ng-required="true" />
<span class="error" data-ng-show="cform.firstname.$error.required && cform.firstname.$dirty">Required!</span>
</div>
Ie 8 does not support html 5 ,Angular is using html 5 , Do the work around to get angular working on IE and then use the pattern because you cant use the html 5 element
Is it possible to have a tree structure with check boxes in JQuery MObile. I did not find any thing in demos.
I wanted something similar this image: Is there any alternative way we can achieve this?
Well it's just a concept but I have a couple working examples:
http://jsfiddle.net/JYn53/2/
http://jsfiddle.net/JYn53/4/
HTML
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed="true">
<h3>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
</h3>
<p>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1aa" id="checkbox-1aa" class="custom" />
<label for="checkbox-1aa">Cheetos</label>
<input type="checkbox" name="checkbox-2aa" id="checkbox-2aa" class="custom" />
<label for="checkbox-2aa">Doritos</label>
<input type="checkbox" name="checkbox-3aa" id="checkbox-3aa" class="custom" />
<label for="checkbox-3aa">Fritos</label>
<input type="checkbox" name="checkbox-4aa" id="checkbox-4aa" class="custom" />
<label for="checkbox-4aa">Sun Chips</label>
</fieldset>
</div>
</p>
</div>
</div>
</div>