I am trying to make my site responsive and my media query was working but now it isn't. I made some changes and didn't use version control because I'm an idiot. Now I've taken out all the changes and the old media query isn't working, can anyone see why? I've included my css and the html I'm applying it to.
.contact_form {
margin: auto auto auto 27%;
}
.slides p {
margin: 2%;
text-align: center;
}
.slides h2 {
text-align: center;
font-size: 1.5em;
}
.required {
color: red;
}
.privacy p {
width: 60%;
text-align: center;
margin: auto;
}
#media screen and (max-width: 500px) {
.slides h2 {
text-align: center;
font-size: 1em;
margin: 10% auto auto auto;
}
.slides h1 {
text-align: center;
font-size: 2em;
margin: auto;
}
.contact_form {
margin: 2%;
}
.privacy p {
width: 90%;
text-align: center;
margin: auto;
}
.tablet_content {
display: none;
}
}
Html
<body>
<div class="banner">
<header>
<div id="ytWidget"></div>
<script src="https://translate.yandex.net/website-widget/v1/widget.js?widgetId=ytWidget&pageLang=en&widgetTheme=dark&autoMode=true" type="text/javascript"></script>
<br clear = "all">
<a href="index.html">
<h1>Laura Pohl Web Solutions</h1>
<h2>User Based Web Design</h2>
</a>
</header>
</div>
<div class="topnav" id="myTopnav">
Home
<div class="dropdown">
<button class="dropbtn">About</button>
<div class="dropdown-content">
My Story
Mascots
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Portfolio</button>
<div class="dropdown-content">
Custom Web Design
Wordpress
<!--Wix
Squarespace-->
</div>
</div>
FAQ
Contact
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<main class="site-content">
<div class="gradient">
<br>
<div class="slide">
<div class="main">
<div class="slides">
<h1>Contact Questionnaire</h1>
<h2>If you’d like to work with me, I can’t wait to get started! Your first step is to fill out the custom form below.</h2>
<br>
<br>
</div>
</div>
<div class = "contact_form">
<form name="form4" action="Contact Us.php" method="post">
<input type = "hidden" name ="recipient" value ="1">
<input type = "hidden" name ="subject" value ="Contact Survey">
<input type = "hidden" name ="print_blank_fields" value ="1">
<input type="hidden" name="_pid" value="154040">
<input type="hidden" name="_fid" value="A7QPIZEA">
<table class ="contact_table">
<tbody>
<!--Row 1-->
<tr>
<td class = "questions">Name:<span class="required">*</span></td>
<td colspan = "6"><input name="sender" id="name" type="text" maxlength="30" class ="input_text_box required" title="Please type your name." required></td>
</tr>
<!--Row 2-->
<tr>
<td class = "questions">Email:</td>
<td colspan = "6"><input name="senderEmail" type="text" maxlength="30" class ="input_text_box"></td>
</tr>
<!--Row 3-->
<tr>
<td class = "questions">Phone:</td>
<td colspan = "6"><input name="senderPhone" type="text" id="textfield2" maxlength="30"class ="input_text_box"></td>
</tr>
<!--Row 4-->
<tr>
<td colspan = "7"> </td>
</tr>
<!--Row 5-->
<tr>
<td colspan = "7"> </td>
</tr>
<!--Row 6-->
<tr>
<td class = "questions" rowspan="2">Preferred Method of Contact?</td>
<td><input type="radio" name="preferredContact" value="phone" id="PreferredContact_0"></td>
<td colspan = "2" width = "30%">Phone</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<!--Row 7-->
<tr>
<td><input type="radio" name="preferredContact" value="email" id="PreferredContact_2"></td>
<td colspan = "2">Email</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<!--Row 8-->
<tr>
<td colspan = "7"> </td>
</tr>
<!--Row 9-->
<tr>
<td colspan = "7"> </td>
</tr>
<!--Row 10-->
<tr>
<td class = "questions" rowspan="2">Would you like a response?<span class="required">*</span></td>
<td><input type="radio" name="Response" value="Yes" id="PreferredContact_2"></td>
<td colspan = "2">Yes</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<!--Row 11-->
<tr>
<td><input type="radio" name="Response" value="No" id="PreferredContact_3"></td>
<td>No</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<!--Row 12-->
<tr>
<td colspan = "7"> </td>
</tr>
<!--Row 13-->
<tr>
<td colspan = "7"> </td>
</tr>
<!--Row 14-->
<tr>
<td class = "questions" rowspan="7">What would you like to talk about?<span class="required">*</span></td>
<td><input type="radio" name="topic" value="web_design"></td>
<td colspan = "5">Website Design</td>
</tr>
<!--Row 15-->
<tr>
<td><input type="radio" name="topic" value="re_design"></td>
<td colspan="5">Website Re-Design</td>
</tr>
<!--Row 16-->
<tr>
<td><input type="radio" name="topic" value="consultation"></td>
<td colspan="6">Schedule a Consultation</td>
</tr>
<!--Row 17-->
<tr>
<td><input type="radio" name="topic" value="quote"></td>
<td colspan="6">Request a Quote</td>
</tr>
<!--Row 18-->
<tr>
<td><input type="radio" name="topic" value="suggestions"></td>
<td colspan="6">Suggestions</td>
</tr>
<!--Row 19-->
<tr>
<td><input type="radio" name="topic" value="problems"></td>
<td colspan="6">Site Problems</td>
</tr>
<!--Row 20-->
<tr>
<td><input type="radio" name="topic" value="something_else"></td>
<td colspan="6">Something Else</td>
</tr>
<!--Row 21-->
<tr>
<td colspan = "7"> </td>
</tr>
<!--Row 22-->
<tr>
<td colspan = "7"> </td>
</tr>
<!--Row 23-->
<tr>
<td class = "questions" style="vertical-align:middle;">Message Text: </td>
<td colspan = "6" style="text-align: left">
<textarea rows = "5" name="message" maxlength="800" id="Comments" class ="input_text_box" required></textarea>
</td>
</tr>
<!--Row 24-->
<tr>
<td colspan = "7"> </td>
</tr>
<!--Row 25-->
<tr>
<td colspan = "7"> </td>
</tr>
<!--Row 26-->
<tr>
<td><input name="submit" type="submit" id="submit" title="Submit" value="Submit" style = "float:left"></td>
<td colspan = "5"> </td>
<td><input type="reset" name="reset" id="reset" value="Reset" style = "float:right"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
<br clear = "all">
<br>
<div class="privacy">
<hr style="width: 20%;">
<p>I take your privacy seriously. I will never share any of your
information with anyone outside legal requirements. You will never be spammed or marketed
to by any of my partners.</p>
<hr style="width: 20%;">
</div>
</main>
<div class="big_screen_content">
<footer>
<!--start footer-->
© November 30, 2020 · Laura Pohl · Billerica, MA <!--Copyright signature-->
</footer>
<!--end footer-->
</div>
Related
i have wrote a php file for data entry i am getting error on php
like undefined index my php code is
i want to insert values which are posted by different input types on form
<?php
include("$_SERVER[DOCUMENT_ROOT]/riteshproject/config.php"); ?>
<?php include("auth.php"); //include auth.php file on all secure
pages ?> <?php
$aria=$_POST['area'];
$custname=$_POST['custname'];
$mob1=$_POST['mob1'];
$mob2=$_POST['mob2'];
$flatbunglo=$_POST['flatbungalo'];
$address=$_POST['address'];
$bhk=$_POST['bhk'];
$rent=$_POST['rent'];
$diposit=$_POST['diposit'];
$sqft=$_POST['sqft'];
$floor=$_POST['floor'];
$lift=$_POST['lift'];
echo $addquery="insert into propertymaster (area,custname,mob1,mob2,proptype,address,bhk,rent,diposit,sqft,floor,lift)
values ('$aria','$custname','$mob1','$mob2','$flatbunglo','$address','$bhk','$rent','$diposit','$sqft','$floor','$lift')";
mysql_query($addquery);
?> <!DOCTYPE html> <html lang="en"> <head> <title>Shree Shree Property,kolhapur</title> <meta charset="utf-8"> <meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;} .active { background-color: #00bfff; }
}
</style> </head> <body>
<nav class="navbar navbar-inverse"> <div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li> <li class="current" id="dddd"><a href="../aboutus.php" >About
US</a></li> <li>Contact US</li>
<li>Add Property</li> <li>Luxarious Property</li> <li><a href="#">Property For
Sale</a></li> <li>Other Services</li>
</ul>
<ul class="nav navbar-nav navbar-right"> <li><a href="logout.php"><span class="glyphicon
glyphicon-log-in"></span>Logout</a></li>
</ul>
</div> </div> </nav> <div class="container-fluid text-center"> <div class="row content">
<div class="col-sm-2 sidenav">
<p>Link</p>
<p>Link</p>
<p>Link</p>
</div>
<div class="col-sm-8 text-left"> <html> <body> <div id="wrap2"> <form> <h4>Welcome Mr.<?php echo
$_SESSION['username']; ?>!
<td align="right">
Area:
</td>
<td style="text-align:left" width="100px">
<select name="area" id="area" value="select">
<option value="SELECT" style="display:none">SELECT</option>
<?php
$query="select code,areaname from areamaster";
$query_run=mysql_query($query);
mysql_num_rows($query_run);
while($row=mysql_fetch_assoc($query_run))
{
?>
<option value="<?php echo $row['areaname']?>"><?php echo $row['areaname']?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr class="space1">
<td width='100px' >
</td>
<td align="right">
Customer Name:
</td>
<td>
<input type="text" id="custname" name="custname" size="40">
</td>
</tr>
<tr>
<td width='100px' >
</td>
<td align="right">
Mobile No 1:
</td>
<td>
<input type="text" id="mob1" name="mob1">
</td>
</tr>
<tr>
<td width='100px' >
</td>
<td align="right">
Mobile No 2:
</td>
<td>
<input type="text" id="mob2" name="mob2">
</td>
</tr>
<tr>
<td>
</td>
<td><b>FLAT DETAILS:</b>
</td>
</tr>
<tr>
<td width='100px' >
</td>
<td align="right">
Flat/Bungalo:
</td>
<td>
<select name="flatbungalo" id="flatbungalo" value="select">
<option>Flat</option>
<option>Bungalo</option>
<option>House</option>
</select>
</td> </tr>
<tr>
<td width='100px' >
</td>
<td align="right">
Property Address:
</td>
<td><input type="text" id ="address" name ="address" size="40">
</td> </tr>
<tr>
<td width='100px' >
</td>
<td align="right">
BHK:
</td>
<td>
<select name="bhk" id="bhk" value="select">
<option>1 BHK</option>
<option>2 BHK</option>
<option>3 BHK</option>
<option>4 BHK</option>
</select>
</td> </tr>
<tr>
<td width='100px' >
</td>
<td align="right">
RENT:
</td>
<td><input type="text" id ="rent" name ="rent" size="10">
</td> </tr>
<tr>
<td width='100px' >
</td>
<td align="right">
Diposit:
</td>
<td><input type="text" id ="diposit" name ="diposit" size="10">
</td> </tr>
<tr>
<td width='100px' >
</td>
<td align="right">
SQ Ft:
</td>
<td><input type="text" id ="sqft" name ="sqft" size="10">
</td> </tr>
<tr>
<td width='100px' >
</td>
<td align="right">
Floor:
</td>
<td><input type="text" id ="floor" name ="floor" size="10">
</td> </tr>
<tr>
<td width='100px' >
</td>
<td align="right">
Lift:
</td>
<td>
<select name="lift" id="lift" value="select">
<option>Yes</option>
<option>No</option>
</select>
</td> </tr>
<tr height="20">
</tr>
<tr>
<td>
</td>
<td>
</td> <td align="left"><form method="POST"><input type="Submit" name="Add" id="add" value="Add"></form>
</td> </tr>
</table> </html> </form> </div> </body> </html>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div> </div> </div>
<footer class="container-fluid text-center"> <p>Footer Text</p>
</footer>
</body> </html>
i had echo my query and i got result like insert into propertymaster
(area,custname,mob1,mob2,proptype,address,bhk,rent,diposit,sqft,floor,lift)
values ('','','','','','','','','','','','') basically blank values
are inserting
i want to insert values which are posted by different input types from form
the thing is happening is blank values are assigning to vauables;
for eg i wrote $aria=$_POST['area']; $aria="blank"
please help me to solve this problem
You've got several problems according to the code you posted:
You've got two opening <html> tags and two opening <body> tags.
You've got two opening <form> tags before your submit button, which is invalid HTML, probably leading to your submit button not belonging to the form with all of your inputs, so when you hit the submit button, none of your inputs are sent with it. Forms are not nestable. To fix this error, remove the second opening <form> tag, making it one form.
Before you use any input coming from a user such as GET and POST variables, you should check for their existence, typically with the isset() function such as:
if (isset($_POST['aria'])) { $aria = $_POST['aria']; }
You should NEVER put user input directly into a SQL statement. That is extremely vulnerable to a SQL injection attack. You should use prepared statements and bind your parameters.
For example, instead of using:
$addquery="insert into propertymaster (area,custname) values ('$aria','$custname')";
mysql_query($addquery);
You should instead use:
$stmt = $db->prepare("INSERT INTO propertymaster (area,custname) VALUES (':aria',':custname')";
$stmt->bindParams(':aria', $aria);
$stmt->bindParams(':custname', $custname);
$stmt->execute();
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm having trouble inserting a simple row into a mysql database.
My code is:
<?php
include("$_SERVER[DOCUMENT_ROOT]/riteshproject/config.php");
include('../config.php')
?>
<?php
if(isset($_POST['Add'])) {
$query1="INSERT INTO flatmaster(flat) VALUES ('123')";
mysql_query($query1);
}?>
<input type="Submit" name="Add" id="add" value="Add">
I want to insert the row into the flatmaster table when I click on submit.
my whole code is
<?php
include("$_SERVER[DOCUMENT_ROOT]/riteshproject/config.php");
include('../config.php') ?>
<?php
/*if(isset($_POST['Add'])) {
$aria=$_POST['area'];
$custname=$_POST['custname'];
$mob1=$_POST['mob1'];
$mob2=$_POST['mob2'];
$flatbunglo=$_POST['flatbungalo'];
$address=$_POST['address'];
$bhk=$_POST['bhk'];
$rent=$_POST['rent'];
$diposit=$_POST['diposit'];
$sqft=$_POST['sqft'];
$floor=$_POST['floor'];
$lift=$_POST['lift'];
echo $addquery="insert into propertymaster (area,custname,mob1,mob2,proptype,address,bhk,rent,diposit,sqft,floor,lift)
values ('$aria','$custname','$mob1','$mob2','$flatbunglo','$address','$bhk','$rent','$diposit','$sqft','$floor','$lift')";
mysql_query($addquery);
}*/
if(isset($_POST['Add'])) {
$query1="INSERT INTO flatmaster(flat) VALUES ('123')"; mysql_query($query1);
}
?> <!DOCTYPE html> <html lang="en"> <head> <title>Shree Shree Property,kolhapur</title> <meta charset="utf-8"> <meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;} .active { background-color: #00bfff; }
}
</style> </head> <body>
<nav class="navbar navbar-inverse"> <div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li> <li class="current" id="dddd"><a href="../aboutus.php" >About
US</a></li> <li>Contact US</li>
<li>Add Property</li> <li>Luxarious Property</li> <li><a href="#">Property For
Sale</a></li> <li>Other Services</li>
</ul>
<ul class="nav navbar-nav navbar-right"> <li><a href="logout.php"><span class="glyphicon
glyphicon-log-in"></span>Logout</a></li>
</ul>
</div> </div> </nav> <div class="container-fluid text-center"> <div class="row content">
<div class="col-sm-2 sidenav">
<p>Link</p>
<p>Link</p>
<p>Link</p>
</div>
<div class="col-sm-8 text-left"> <html> <body> <div id="wrap2"> <form> <?php include("auth.php"); //include auth.php file on all
secure pages ?> <h4>Welcome Mr.<?php echo $_SESSION['username'];
?>!</h4> </form> <form> <html>
<body>
<table>
<tr>
<td width='100px' >
</td>
<td align="right">
Area:
</td>
<td style="text-align:left" width="100px">
<select name="area" id="area" value="select">
<option value="SELECT" style="display:none">SELECT</option>
<?php
$query="select code,areaname from areamaster";
$query_run=mysql_query($query);
mysql_num_rows($query_run);
while($row=mysql_fetch_assoc($query_run))
{
?>
<option value="<?php echo $row['code']?>"><?php echo $row['areaname']?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr class="space1">
<td width='100px' >
</td>
<td align="right">
Customer Name:
</td>
<td>
<input type="text" id="custname" name="custname" size="40">
</td>
</tr>
<tr>
<td width='100px' >
</td>
<td align="right">
Mobile No 1:
</td>
<td>
<input type="text" id="mob1" name="mob1">
</td>
</tr>
<tr>
<td width='100px' >
</td>
<td align="right">
Mobile No 2:
</td>
<td>
<input type="text" id="mob2" name="mob2">
</td>
</tr>
<tr>
<td>
</td>
<td><b>FLAT DETAILS:</b>
</td>
</tr>
<tr>
<td width='100px' >
</td>
<td align="right">
Flat/Bungalo:
</td>
<td>
<select name="flatbungalo" id="flatbungalo" value="select">
<option>Flat</option>
<option>Bungalo</option>
<option>House</option>
</select>
</td> </tr>
<tr>
<td width='100px' >
</td>
<td align="right">
Property Address:
</td>
<td><input type="text" id ="address" name ="address" size="40">
</td> </tr>
<tr>
<td width='100px' >
</td>
<td align="right">
BHK:
</td>
<td>
<select name="bhk" id="bhk" value="select">
<option>1 BHK</option>
<option>2 BHK</option>
<option>3 BHK</option>
<option>4 BHK</option>
</select>
</td> </tr>
<tr>
<td width='100px' >
</td>
<td align="right">
RENT:
</td>
<td><input type="text" id ="rent" name ="rent" size="10">
</td> </tr>
<tr>
<td width='100px' >
</td>
<td align="right">
Diposit:
</td>
<td><input type="text" id ="diposit" name ="diposit" size="10">
</td> </tr>
<tr>
<td width='100px' >
</td>
<td align="right">
SQ Ft:
</td>
<td><input type="text" id ="sqft" name ="sqft" size="10">
</td> </tr>
<tr>
<td width='100px' >
</td>
<td align="right">
Floor:
</td>
<td><input type="text" id ="floor" name ="floor" size="10">
</td> </tr>
<tr>
<td width='100px' >
</td>
<td align="right">
Lift:
</td>
<td>
<select name="lift" id="lift" value="select">
<option>Yes</option>
<option>No</option>
</select>
</td> </tr>
<tr height="20">
</tr>
<tr>
<td>
</td>
<td>
</td> <td align="left"><form method="POST"><input type="Submit" name="Add" id="add" value="Add"></form>
</td> </tr>
</table> </html> </form> </div> </body> </html>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div> </div> </div>
<footer class="container-fluid text-center"> <p>Footer Text</p>
</footer>
</body> </html>
You need to wrap your submit button inside a form and use POST to send data:
<?php
if(isset($_POST['Add'])) {
$query1="INSERT INTO flatmaster(flat) VALUES ('123')";
mysql_query($query1);
}
?>
<form method="POST">
<input type="Submit" name="Add" id="add" value="Add">
</form>
Warning! Your code is vulnerable to SQL Injection Attacks! How do I prevent SQL Injection Attacks?
I'm just wondering if you could help me get the value of a table row, then placing it to a model.
Here is my view:
<div class="table_design">
<style>
#tbl_ulist1 tr:hover td{
background-color: yellow;
}
#txt_fn1{
border: none;
background-color: transparent;
}
</style>
<form action="userslist" method="POST">
<input type="submit" id="new_user" name="new_user" value="Add New User"/>
<table id="tbl_ulist1">
<tr>
<!-- <th>Edit/Delete</th>-->
<th>First Name</th>
<th>Last Name</th>
<th>Middle Name</th>
<th>Birth Date</th>
<th>Contact Details</th>
<th>Email Add</th>
<th>User Type</th>
<th>Status</th>
</tr>
<?php foreach ($userslist as $row) { ?>
<tr id="tr1" data-toggle="modal" data-target="#myModal">
<!--<td>Edit</td>-->
<td><input type="text" id="txt_fn1" value="<?php echo $row->FirstName ?>" readonly/></td>
<td><?php echo $row->LastName ?></td>
<td><?php echo $row->MiddleName ?></td>
<td><?php echo $row->Birthdate ?></td>
<td><?php echo $row->ContactDetails ?></td>
<td><?php echo $row->EmailAdd ?></td>
<td><?php echo $row->UserType ?></td>
<td><?php echo $row->Status ?></td>
</tr>
<?php } ?>
</table>
</form>
</div>
and here is my div modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width: 80%; height: 60%; margin-top: 200px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 style="color: black;"></h4>
<div class="modal-body">
<iframe style="width: 100%; height: 60%; border: none;" frameborder="0" src="<?php echo site_url('inventorysys_controller/edit_user'); ?>"></iframe>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
Here is the view of my iframe in my modal:
<div id="content">
<link rel="stylesheet" href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>">
<style>
#tbl_edituser{
color: black;
}
</style>
<form action="edit_user" method="POST" name="frm_edituser" id="frm_edituser">
<fieldset>
<legend>Edit User</legend>
<table id="tbl_edituser">
<tr>
<td>First Name:</td>
<td><input type="text" name="txt_userfirst" id="txt_userfirst" value="<?php //echo $system_users->FirstName ?>"/></td>
<td>Last Name:</td>
<td><input type="text" name="txt_userlast" id="txt_userlast" value="<?php //echo $system_users->LastName ?>"/></td>
<td>Middle Name:</td>
<td><input type="text" name="txt_usermiddle" id="txt_usermiddle" value="<?php //echo $system_users->MiddleName ?>"/></td>
<td><input type="hidden" name="txt_edituserID" id="txt_edituserID" value="<?php //echo $system_users->ID ?>"/></td>
</tr>
<tr>
<td>Birth Date:</td>
<td><input type="date" name="dt_user" id="dt_user" style="width: 100%; height: 80%" value="<?php //echo //$system_users->Birthdate ?>"/></td>
<td>Email Address:</td>
<td><input type="text" name="txt_emailaddress" id="txt_emailaddress" value="<?php// echo $system_users->EmailAdd ?>"/></td>
<td>Contact Details:</td>
<td><input type="text" name="txt_contactdetails" id="txt_contactdetails" value="<?php// echo $system_users->ContactDetails ?>"/></td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" name="txt_editusername" id="txt_editusername" value="<?php// echo $system_users->Username ?>"/></td>
<td>Password:</td>
<td><input type="password" name="txt_editpassword" id="txt_editpassword" value="<?php //echo $system_users->Password ?>"/></td>
<td>User Type:</td>
<td>
<select id="cbo_editusertype" name="cbo_editusertype" style="width: 100%">
<option><?php// echo $system_users->UserType ?></option>
<option>Administrator</option>
<option>User</option>
</select>
</td>
</tr>
<tr>
<td>Status:</td>
<td>
<select id="cbo_edituserstatus" name="cbo_edituserstatus" style="width: 100%">
<option><?php //echo $system_users->Status ?></option>
<option>Active</option>
<option>Inactive</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="button" id="btn_edituserdetails" name="btn_edituserdetails" onclick="validate_editsystemusers();" value="Update"/> <input type="button" id="btn_deleteuserdetails" name="btn_deleteuserdetails" onclick="validate_deletesystemuser();" value="Delete"/></td>
</tr>
</table>
<input type="hidden" name="ninja14" id="ninja14" value=""/>
</fieldset>
</form>
Here is the controller of my modal:
public function edit_user(){
// $data_users['system_users'] = $this->inventory_model->select_systemusers();
// $this->load->view('homeview');
$this->load->view('edituser_view');
// $this->load->view('footer_view');
}
Help me on this one please! I've spend hours thinking about this one.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type='text/javascript'>
$(window).load(function () {
$('.varx').click(function () {
$(".text").toggle(this.checked);
$(".text1").toggle(this.checked);
$(".text2").toggle(this.checked);
$(".text3").toggle(this.checked);
});
});
</script>
<table border='1'>
<?php for ($i=1; $i<=5; $i++){ ?>
<tr>
<td>
<input type='checkbox' class='varx' />
</td>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>ddd</td>
<td>eee</td>
<td>fff</td>
</tr>
<tr>
<td class='text3' colspan='4' style='display:none'></td>
<td class='text3' style='display:none'>aaa</td>
<td class='text2' style='display:none'>bbb</td>
<td class='text1' style='display:none'>ccc</td>
<td class='text' style='display:none'>ddd</td>
<td class='text3' colspan='3' style='display:none'></td>
</tr>
<?php } ?>
</table>
This is running code, actually it is not a for ($i=1; $i<=5; $i++) it is foreach($items as $i). I decided to make it a for loop so that you can test it w/o database. My problem is, when I check one checkbox, all of the rows will expand and that is not right. What I need is when I check one checkbox, only one row only will expand.
Thanks for all of your help.
You only specified a class selector for the toggle commands. So of course it will toggle all the elements of this class.
Try this instead
$('.varx').click(function () {
var $theNextRow = $(this).parents('tr').eq(0).next();
$theNextRow.find(".text").toggle(this.checked);
$theNextRow.find(".text1").toggle(this.checked);
$theNextRow.find(".text2").toggle(this.checked);
$theNextRow.find(".text3").toggle(this.checked);
});
I have done complete solution bin for above issue. please check demo link as below:
Demo: http://codebins.com/bin/4ldqp7q
HTML
<table class="table" cellspacing="0" cellpadding="0">
<tr>
<th>
Choice
</th>
<th>
Col-1
</th>
<th>
Col-2
</th>
<th>
Col-3
</th>
<th>
Col-4
</th>
<th>
Col-5
</th>
<th>
Remove
</th>
</tr>
<tr>
<td>
<input type="checkbox" class="varx"/>
</td>
<td>
data-1
</td>
<td>
data-2
</td>
<td>
data-3
</td>
<td>
data-4
</td>
<td>
data-5
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="varx"/>
</td>
<td>
data-21
</td>
<td>
data-22
</td>
<td>
data-23
</td>
<td>
data-24
</td>
<td>
data-25
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="varx"/>
</td>
<td>
data-31
</td>
<td>
data-32
</td>
<td>
data-33
</td>
<td>
data-34
</td>
<td>
data-35
</td>
<td>
</td>
</tr>
</table>
jQuery
$(function() {
$(".varx").change(expandRow);
});
function expandRow() {
if ($(this).is(":checked")) {
var TrClone = $(this).closest("tr").clone();
$(TrClone).find("td:last").html("<input type='checkbox' class='remove'/>");
$(TrClone).insertAfter($(this).closest("tr"));
$(TrClone).find(".varx").removeAttr("checked");
$(TrClone).find(".varx").bind('change', expandRow);
$(TrClone).find(".remove").bind('change', removeRow);
}
}
function removeRow() {
if ($(this).is(":checked")) {
$(this).closest("tr").remove();
if ($(".table").find(".remove").length <= 0) {
$(".varx").removeAttr("checked");
}
}
}
CSS
.table{
width:70%;
border:1px solid #555;
}
.table th{
background:#dcacaa;
border-bottom:1px solid #555;
}
.table td{
text-align:center;
background:#c3cafd;
}
Demo: http://codebins.com/bin/4ldqp7q
I would like to get the total sum of values having class addition1:::
HTML CODE is
<tr >
<td> </td>
<td> </td>
<td> </td>
<td class="heading">Total Inr</td>
<td align="right" class="heading"><?php if($inr!='')echo co($inr);else echo "0.00";?> </td>
<td> </td>
<td class="heading">ROE</td>
<td class="heading" ><span class="addition1"><?php if($inr!='')echo co($inr);else echo "0.00";?> </span> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="heading">Total Usd</td>
<td align="right" class="heading"><?php if($usd!='')echo co($usd);else echo "0.00";?> </td>
<td> </td>
<td><input name="roe1" id="roe11" type="text" class="heading" value="1" style="width:50px" /></td>
<td class="heading1" style="font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-variant: small-caps; font-weight: bold;">
<span class="addition1">
<?php if($usd!='')echo co($usd);else echo "0.00";?> </span>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="heading">Total Gbp</td>
<td align="right" class="heading"><?php if($gbp!='')echo co($gbp);else echo "0.00";?></td>
<td> </td>
<td><input name="roe1" id="roe12" type="text" class="heading" value="1" style="width:50px" /></td>
<td class="heading2" style="font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-variant: small-caps; font-weight: bold;">
<span class="addition1"><?php if($gbp!='')echo co($gbp);else echo "0.00";?></span>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="heading">Total Eur</td>
<td align="right" class="heading"><?php if($eur!='')echo co($eur); else echo "0.00";?></td>
<td> </td>
<td><input name="roe1" id="roe13" type="text" class="heading" value="1" style="width:50px" /></td>
<td class="heading3" style="font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-variant: small-caps; font-weight: bold;">
<span class="addition1"> <?php if($eur!='')echo co($eur); else echo "0.00";?></span>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="heading">Total Other</td>
<td align="right" class="heading"><?php if($other!='')echo co($other);else echo "0.00";?></td>
<td> </td>
<td><input name="roe1" id="roe14" type="text" class="heading" value="1" style="width:50px" /></td>
<td class="heading4" style="font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-variant: small-caps; font-weight: bold;">
<span class="addition1"><?php if($other!='')echo (co($other));else echo "0.00";?> </span>
</td>
<td> </td>
</tr>
Jquery Code is
$(document).ready(function() {
$('#tables tbody>tr>td>input.heading#roe13').change(function() {
var k = $('#roe13').val();
$('#tables tbody>tr>td.heading3').text(function(i,v) {
v= v.replace(/,/g, ''),
asANumber = +v;
x=Math.round(parseFloat(v*k)*100) / 100;
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
});
});
$('#tables tbody>tr>td>input.heading#roe11').change(function() {
var k = $('#roe11').val();
$('#tables tbody>tr>td.heading1').text(function(i,v) {
v= v.replace(/,/g, ''),
asANumber = +v;
x1=Math.round(parseFloat(v*k)*100) / 100;
return x1.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
});
});
$('#tables tbody>tr>td>input.heading#roe12').change(function() {
var k = $('#roe12').val();
$('#tables tbody>tr>td.heading2').text(function(i,v) {
v= v.replace(/,/g, ''),
asANumber = +v;
x2=Math.round(parseFloat(v*k)*100) / 100;
return x2.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
});
});
$('#tables tbody>tr>td>input.heading#roe14').change(function() {
var k = $('#roe14').val();
$('#tables tbody>tr>td.heading4').text(function(i,v) {
v= v.replace(/,/g, ''),
asANumber = +v;
x3=Math.round(parseFloat(v*k)*100) / 100;
return x3.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
});
});
$('#tables tbody>tr').change(function() {
var sum = 0;
var regex = /\((\d+)\)/g;
$('span.addition1').each(function() {
matches = $(this).text().replace(/,/g, ''); alert(matches);
if( !isNaN( matches ) ){
sum += parseFloat(matches);
}
});
});
});
Class name in td can't be changed . I am trying to get the sum of values having class addition1. On running this code, 1 value is getting skipped, e.g. If I change a value say x1 then result generated due to x1 will be skipped in addition.
Please help me out.
Arrays in jquery are 0-based if you want the first value of matches use matches[0].
Don't put div's directly inside tr's. I'd recommend a span class="addition1" inside each of the td's and only round the floats you wish add.
This way you can parsefloat() first and then perform a NaN check after, stripping out all the regex stuff:
td code:
<td>..(<span class="addition1">1,230.0</span>)..</td>
jquery loop code:
$('span.addition1').each(function() {
var floatVal = parseFloat($(this).text().replace(/,/g,""));
if(!isNaN(floatVal)) {
sum += floatVal;
}
});
Use $(this).text() not .val().
$(this).val() refers to the value of the div.addition1, which does not have a value.
You are trying to nest td's inside a div which is not allowed for. If you cannot edit the TD's to give them a class you will have to use some other way of selecting them, like every eight TD or something similar.
HTML:
<tr >
<td> </td>
<td> </td>
<td> </td>
<td class="heading">Total Inr</td>
<td align="right" class="heading"><?php echo $inr!=''?co($inr):"0.00";?> </td>
<td> </td>
<td class="heading">ROE</td><div class="addition1">
<td class="heading" ><?php echo $inr!=''?co($inr):"0.00";?> </td></div>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="heading">Total Usd</td>
<td align="right" class="heading"><?php echo $usd!=''?co($usd):"0.00";?> </td>
<td> </td>
<td><input name="roe1" id="roe11" type="text" class="heading" value="1" style="width:50px" /></td>
<td class="heading1" style="font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-variant: small-caps; font-weight: bold;">
<?php echo $usd!=''?co($usd):"0.00";?>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="heading">Total Gbp</td>
<td align="right" class="heading"><?php echo $gbp!=''?co($gbp):"0.00";?></td>
<td> </td>
<td><input name="roe1" id="roe12" type="text" class="heading" value="1" style="width:50px" /></td>
<td class="heading2" style="font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-variant: small-caps; font-weight: bold;">
<?php echo $gbp!=''?co($gbp):"0.00";?>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="heading">Total Eur</td>
<td align="right" class="heading"><?php echo $eur!=''?co($eur):"0.00";?></td>
<td> </td>
<td><input name="roe1" id="roe13" type="text" class="heading" value="1" style="width:50px" /></td>
<td class="heading3" style="font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-variant: small-caps; font-weight: bold;">
<?php echo $eur!=''?co($eur):"0.00";?>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="heading">Total Other</td>
<td align="right" class="heading"><?php echo $other!=''?co($other):"0.00";?></td>
<td> </td>
<td><input name="roe1" id="roe14" type="text" class="heading" value="1" style="width:50px" /></td>
<td class="heading4" style="font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-variant: small-caps; font-weight: bold;">
<?php echo $other!=''?co($other):"0.00";?>
</td>
<td> </td>
</tr>
Script:
$('table tr').change(function() {
var sum = 0;
$.each($('tr td input'), function() {
var nextCol = $(this).parent().next("td").text();
if( nextCol && ! isNaN( nextCol ) ){
sum += parseFloat(nextCol, 10);
}
});
alert(sum);
});
Just Addition:
$('table tr').change(function() {
var sum = 0;
$.each($('addition1'), function() {
var nextCol = $(this).text();
if( nextCol && ! isNaN( nextCol ) ){
sum += parseFloat(nextCol, 10);
}
});
alert(sum);
});