Creating SharePoint Visual Webpart with Bootstrap - visual-studio

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

Controller function not getting called on form submit

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.

JSP not binding elements of bean in controller

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>

how to use multiple hidden fields with the same name

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

Angular form validation in IE

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

Tree structure with Check boxes in JQuery Mobile

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>

Resources