I'm having issues with a bootstrap modal contact form, everything seems to work as planned in all browsers except on iPad/safari, can anyone please shed any light on where I'm going wrong?
When viewing on iPad the modal is offset to the right and moved down
the page, not sitting in the middle where it should be.
When user selects a field in the form the cursor is not in the field
itself, it is located outside of the modal window flashing in the
greyed out background.
When user types in a field the text is not shown within the field
until the next field is selected, then the text appears.
As I said everything is working fine in I.E. and Chrome these issues only occur with safari. Something is breaking my layout when viewed with Apple device.
Page can be viewed at http://odds-uk.co.uk/abbeystone/contact.php
There's quite a lot going on in the page with validation, modals, maps and tabs etc. so I wonder if I have a conflict somewhere I'm fairly new to web programming (year 2 degree student) so please forgive any stupid errors, I do hope someone can help as I'm stumped for ideas at present. Thankyou in advance.
Roy
<!DOCTYPE HTML>
<html>
<head>
<!-- Include Google map API link -->
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDe94CcWCoY8mk1niRhZLBNc5bxst5CZNg"></script>
<!--<meta name="description" http-equiv="Content-Type" content="text/html;">-->
<!-- Website Title & Description for Search Engine purposes -->
<title>Contact Property Management</title>
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">-->
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
<script>
var Maldon = new google.maps.LatLng(51.731897, 0.677035);
function initializeMaldon()
{
var mapProp1 = {
center:Maldon,
zoom:15,
scrollwheel: false,
draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map1=new google.maps.Map(document.getElementById("googleMap1"),mapProp1);
var marker1=new google.maps.Marker({
position:Maldon,
animation:google.maps.Animation.BOUNCE
});
marker1.setMap(map1);
var infowindow1 = new google.maps.InfoWindow({
content:"<img class='logopad' src='images/logo.png' width='140px' alt='Abbeystone Property Management Logo'>",
maxWidth: 140
});
infowindow1.open(map1,marker1);
}
google.maps.event.addDomListener(window, 'load', initializeMaldon);
/*The following map wouldnt show properly within hidden Tab so set a timer on it
www.w3schools.com/js/js_timing.asp
www.stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture*/
var refreshIntervalId;
function showMap() {
document.getElementById('googleMap2').style.display = '';
refreshIntervalId = setInterval(function () { updateMapTimer() }, 10);
}
function updateMapTimer() {
clearInterval(refreshIntervalId);
var Norwich = new google.maps.LatLng(52.627970, 1.298478);
var mapProp2 = {
center:Norwich,
zoom:15,
scrollwheel: false,
draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map2=new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var marker2=new google.maps.Marker({
position:Norwich,
animation:google.maps.Animation.BOUNCE
});
marker2.setMap(map2);
var infowindow2 = new google.maps.InfoWindow({
content:"<img class='logopad' src='images/logo.png' width='140px' alt='Abbeystone Property Management Logo'>",
maxWidth: 140
});
infowindow2.open(map2,marker2);
}
</script>
</head>
<body>
<div class="container fill">
<?php include 'header.php';?>
<div class="carousel slide" id="myCarousel">
<div class='LogoOverlay'>
<div class="">
<div class="LogoImage"><img src="images/homepage/OmbudsmanLogo.png" alt="Ombudsman Service Logo"></div>
<div class="LogoImage"><img src="images/homepage/ARMA-logo.jpg" alt="ARMA Logo"></div>
<div class="LogoImage"><img src="images/homepage/FedOfMastBuildLogo.gif" alt="Fed. of Master Builders Logo"></div>
</div>
</div>
<div class="carousel-inner">
<div class="active item">
<div class="fill" style='background-image: url("images/homepage/home2.jpg");'>
<div class="container">
<div class="row nomargin">
<div class="col-xs-10 col-xs-offset-1 col-md-10 col-md-offset-1 contFrame">
<div class="row " id="ContactDiv">
<ul class="nav nav-tabs " id="myTab">
<li class="active">Head Office</li>
<li>Norwich Branch</li>
</ul>
<div class="tab-content my-tab">
<div class="tab-pane active" id="tab1">
<div class="col-sm-4">
<h3 class="moveDown10">Contact </h3>
<hr />
<p>
</p>
<hr />
<h4><span class="glyphicon glyphicon-earphone"></span> <b>01621 842711</b></h4>
<hr />
<div class="container">
<a href="#myModal" role="button" class="btn btn-info " data-toggle="modal">
<span class="glyphicon glyphicon-envelope"> </span> Send us a message</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Messaging</h4>
</div> <!--end modal-header-->
<div class="modal-body">
<hr>
<form id="messageMaldon" class="form-horizontal"method="POST" action="send_form_email.php">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control required" name="inputName" id="inputName" placeholder="Name" value="" type="text" title="Please enter your Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control required email" name="inputEmail" id="inputEmail" placeholder="Email" value="" type="text" title="Please enter a valid Email address">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputPhone">Phone</label>
<div class="col-lg-10">
<input class="form-control required number" name="inputPhone" id="inputPhone" placeholder="Phone" value="" type="text" title="Please enter your Phone Number using numbers only">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control required" name="inputMessage" id="inputMessage" placeholder="Message" rows="6"></textarea>
<!--<button class="btn btn-success pull-right" type="submit" value="submit">Send!</button>-->
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<button type="submit" value="Submit" class="btn btn-success pull-right" >Send</button>
</div>
</div>
</form>
</div> <!--end modal-body-->
</div> <!--end modal-content-->
</div> <!--end modal-dialog-->
</div><!-- end myModal-->
</div>
</div><!-- end col-sm-4-->
<div class="col-sm-8 map ">
<h4><span class="glyphicon glyphicon-map-marker"></span> Our Location</h4>
<div id="googleMap1"></div>
</div>
</div><!-- end tab-pane -->
<div class="tab-pane" id="tab2">
<div class="col-sm-4">
<h3 class="moveDown10">Contact </h3>
<hr>
<p>
</p>
<hr />
<h4><span class="glyphicon glyphicon-earphone"></span> <b></b></h4>
<hr>
<div class="container">
<a href="#myModal" role="button" class="btn btn-custom " data-toggle="modal">
<span class="glyphicon glyphicon-envelope"> </span> Send us a message</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Messaging</h4>
</div> <!--end modal-header-->
<div class="modal-body">
<hr>
<!-- <form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputName" placeholder="Name" type="text">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" placeholder="Email" type="email">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputPhone">Phone</label>
<div class="col-lg-10">
<input class="form-control" id="inputPhone" placeholder="Phone" type="phone">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control" id="inputMessage" placeholder="Message" rows="6"></textarea>
<button class="btn btn-success pull-right" type="submit">Send!</button>
</div>
</div>
</form>-->
</div> <!--end modal-body-->
</div> <!--end modal-content-->
</div> <!--end modal-dialog-->
</div><!-- end myModal-->
</div>
</div><!-- end col-sm-4-->
<div class="col-sm-8 map ">
<h4><span class="glyphicon glyphicon-map-marker"></span> Our Location</h4>
<div id="googleMap2"></div>
</div>
</div><!-- end tab-pane -->
</div><!-- end tab-content -->
</div><!--end ContactDiv-->
</div>
<!--end col-xs-10 col-xs-offset-1-->
</div><!--end row-->
</div>
</div>
</div>
</div>
</div>
</div>
<?php include 'footer.php';?>
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="includes/js/jquery-2.1.1.min.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="includes/js/jquery-2.1.1.min.js"><\/script>')</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
<!-- jQuery validation -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$('#messageMaldon').validate();
}); // end ready
</script>
</body>
</html>
PHP:
<?php
if(isset($_POST['inputEmail'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "blah#blahblahblah.net";
$email_subject = "Customer Enquiry";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['inputName']) ||
!isset($_POST['inputPhone']) ||
!isset($_POST['inputEmail']) ||
!isset($_POST['inputMessage'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$inputName = $_POST['inputName']; // required
$inputPhone = $_POST['inputPhone']; // required
$inputEmail = $_POST['inputEmail']; // required
$inputMessage = $_POST['inputMessage']; // required
$error_message = "";
$string_exp = "/^[A-Za-z\s.'-]+$/";
if(!preg_match($string_exp,$inputName)) {
$error_message .= 'The Name you entered does not appear to be valid.<br />';
}
$num_exp = "/^[0-9\s.'-]+$/";
if(!preg_match($num_exp,$inputPhone)) {
$error_message .= 'The Number you entered does not appear to be valid.<br />';
}
$email_exp = '/^[A-Za-z0-9._%-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$inputEmail)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
if(strlen($inputMessage) < 2) {
$error_message .= 'The Message you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Message sent via Contact page on Abbeystone Website.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Name: ".clean_string($inputName)."\n";
$email_message .= "Phone: ".clean_string($inputPhone)."\n";
$email_message .= "Email: ".clean_string($inputEmail)."\n";
$email_message .= "Message: ".clean_string($inputMessage)."\n";
// create email headers
$headers = 'From: '.$inputEmail."\r\n".
'Reply-To: '.$inputEmail."\r\n" .
'X-Mailer: PHP/' . phpversion();
#mail($email_to, $email_subject, $email_message, $headers);
//sleep(3);
echo "<meta http-equiv='refresh' content=\"0; url=http://www.abbeystone.net/contact.php\">";
echo "<script>alert('Thankyou your message was sent successfully.'); </script> ";
}
?>
It seems to me to be the positioning within the html markup of the #myModal element that is causing safari to render the modal as if it was a child element (as indeed that is how you have positioned it).
From the Bootstrap documentation:
Modal markup placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
Also the way in which the modal renders in chrome doesn't seem to be ideal either as it renders under the header and footer elements - rather that being on-top of all page elements (but as it is centred this is less noticeable).
To fix the issue reposition the modal div and its contents from after the trigger button to before the </body> close tag:
Broken Markup (current)
<a href="#myModal" role="button" class="btn btn-info " data-toggle="modal">
<span class="glyphicon glyphicon-envelope"> </span> Send us a message
</a>
//reposition as below to fix
<div class="modal fade in" id="myModal" aria-hidden="false" style="display: block; padding-left: 0px;">
//form and stuff...
</div>
Fixed Markup
<div class="modal fade in" id="myModal" aria-hidden="false" style="display: block; padding-left: 0px;">
//form and stuff...
</div>
</body>
Modal markup placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
Related
This question already has answers here:
PHP Pass variable to next page
(9 answers)
Closed 1 year ago.
My index.php page has a display of listings from a json file which looks good. But I am trying to send a result of a single listing from that page to another page (result.php). How do I display the results of that single listing to the new page?
Here is the code for my first page that is attached to the json file:
<?php
$filename = file_get_contents("/ListingCollection.json");
$listings = json_decode($filename);
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://kit.fontawesome.com/ac048d9955.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div style="margin-left:150px; margin-right:150px; margin-bottom:150px;">
<?php foreach ($listings as $listing) { ?>
<span style="visibility:hidden;"><?= $listing->Oid; ?></span>
<div class="row align-items-center border-top">
<div class="col-3" style="padding:10px;">
<?= $listing->AdPhoto; ?>
</div>
<div class="row col-8" style="margin-left:10px;">
<div class="col-8 align-items-center">
<h2 style="color:#00471C; width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" type="button"><?= $listing->AdTitle; ?></h2>
<h3><?= $listing->AdTagLine; ?></h3>
<p><?= $listing->AdTagLine; ?></p>
</div>
<div class="col-4 align-items-start">
<center><h1><?= $listing->ListingPrice; ?></h1><h3>EBITDA: $<?= $listing->EBITDA; ?></h3></center><br><br>
<center><a class="btn btn-primary" href="<?= $listing->WebsiteURL; ?>?<?= $listing->Oid; ?>" role="button">See Listing</a></center>
</div>
</div>
</div>
<?php } ?>
</div>
</body>
</html>
Here is the code to my second page that I want to pull from single listing of index.php file:
<?php
require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');
get_header();
$filename = file_get_contents("/ListingCollection.json");
$listings = json_decode($filename);
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://kit.fontawesome.com/ac048d9955.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div style="margin-left:150px; margin-right:150px; margin-top:50px; margin-bottom:50px;">
<?php foreach ($listings as $listing) { ?>
<!-- Ad Header -->
<div class="row align-items-center" style="margin-bottom:25px;">
<div class="col-12">
<h1><?= $listing->AdTitle; ?></h1>
<h3><?= $listing->County; ?>, <?= $listing->State; ?></h3>
</div>
</div>
<!-- Ad Photo -->
<div class="row" style="margin-bottom:25px;">
<div class="row col-8 align-items-center">
<div class="col-12">
<?= print "Your registration is: ".$regValue."."; ?>
<?= $listing->AdPhoto; ?><br><br>
</div>
<!-- Ad Pricing -->
<div class="col-6">
<h2>ASKING PRICE: $<?= $listing->ListingPrice; ?></h2>
</div>
<div class="col-6">
<h2>CASH FLOW: $<?= $listing->CashFlow; ?></h2>
</div>
<!-- Above button info -->
<div class="col-3">Gross Revenue: </div><div class="col-3">$<?= $listing->GrossRevenue; ?> </div><div class="col-3">Inventory: </div><div class="col-3">$<?= $listing->Inventory; ?></div>
<div class="col-3">EBITDA: </div><div class="col-3">$<?= $listing->EBITDA; ?> </div><div class="col-3">Rent: </div><div class="col-3">$<?= $listing->Rent; ?> </div>
<div class="col-3">FF&E: </div><div class="col-3">$<?= $listing->FFandE; ?> </div><div class="col-3">Established: </div><div class="col-3"><?= $listing->YearEstablished; ?> </div><br><br>
<!-- buttons -->
<div class="col-3">
<a class="btn btn-primary" style="width:100%;" type="button" href="">SAVE</a>
</div>
<div class="col-3">
<a class="btn btn-primary" style="width:100%;" type="button" href="">PRINT</a>
</div>
<div class="col-3">
<a class="btn btn-primary" style="width:100%;" type="button" href="">SHARE</a>
</div>
<div class="col-3">
<a class="btn btn-primary" style="width:100%;" type="button" href="">VALUATION REPORT</a>
</div>
<!-- Ad Description -->
<div class="col-12"><br><br><hr><br>
<h2>DESCRIPTION</h2>
<h2><?= $listing->AdTagLine; ?></h2>
<?= $listing->AdDescription ?><br>
<hr><br>
</div>
<!-- Ad Details -->
<div class="col-3">
<h3>Location:</h3>
</div>
<div class="col-9">
<?= $listing->County ?>
</div>
<div class="col-3">
<h3>Building SF:</h3>
</div>
<div class="col-9">
<?= $listing->TotalSqFt ?>
</div>
<div class="col-3">
<h3>Employees:</h3>
</div>
<div class="col-9">
<?= $listing->EmployeeCount ?>
</div>
<div class="col-3">
<h3>Facilities:</h3>
</div>
<div class="col-9">
<?= $listing->AdFacilityDescription ?>
</div>
<div class="col-3">
<h3>Competition:</h3>
</div>
<div class="col-9">
<?= $listing->AdCompetitiveAnalysis ?>
</div>
<div class="col-3">
<h3>Growth & Expansion:</h3>
</div>
<div class="col-9">
<?= $listing->AdOpportunityForGrowth ?>
</div>
<div class="col-3">
<h3>Support & Training:</h3>
</div>
<div class="col-9">
<?= $listing->AdSupportAndTraining ?>
</div>
<div class="col-3">
<h3>Reason for Selling:</h3>
</div>
<div class="col-9">
<?= $listing->AdReasonForSelling ?>
</div>
<div class="col-3">
<h3>Business Website:</h3>
</div>
<div class="col-9">
<?= $listing->WebsiteURL ?>
</div>
</div>
<div class="col-4 bg-light">
<div class="container">
<!-- CHANGE THE URL HERE -->
<div class="col-12">
<form action="https://app.99inbound.com/e/123" method="POST" target="_blank">
<h1 style="text-align: center;"><br>CONTACT US</h1>
<div class="form-group">
<input name="name" type="text" class="form-control" id="name" placeholder="Full Name" required>
<input name="phone" type="phone" class="form-control" id="phone" placeholder="Phone Number" required>
<input name="email" type="email" class="form-control" id="email" placeholder="Enter Email" required>
</div>
<div class="form-group">
<textarea name="message" class="form-control" id="message" rows="5" placeholder="Enter message" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br><hr>
</div>
<div class="row col-12">
<div class="col-6"><p>Business Listed By:<br>
<?= $listing->SellerFirstName; ?> <?= $listing->SellerLastName; ?></p></div>
<div class="col-6"><p><i class="fas fa-phone-square-alt"></i> <?= $listing->SellerPhone; ?></div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<?php get_footer(); ?>
</body>
</html>
I might make a subtle change to the link to turn the ?id into a key/value pair, like
<center><a class="btn btn-primary" href="<?= $listing->WebsiteURL; ?>?display=<?= $listing->Oid; ?>" role="button">See Listing</a></center>
Then on the second page
<?php
require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');
get_header();
$filename = file_get_contents("/ListingCollection.json");
$display = $_GET['display'];
$listings = json_decode($filename);
$listing=array_filter($listings, function($a) use($display) {
return $a->Oid === $display;
});
$listing = array_values($listing)[0];
// get rid of the loop on this page
// foreach ($listings as $listing) { <-- GONE
?>
<!-- then the rest of your code, using $listing -->
I fixed the problem by doing this to the button:
<?php echo"<a class='btn btn-primary' role='button' href='https://samplesite.com/result.php?" . http_build_query($listing) . "'>See Listing</a>"; ?>
Then echoing the items on the results page.
a user is created in the admin panel, and it shows total stores, total products and so on.
Image1
When i create a new user for login, nothings shows on dashboard panel. no total store, no total products and so on...
Image2
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Small boxes (Stat box) -->
<?php if($is_admin == true): ?>
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-aqua">
<div class="inner">
<h3><?php echo $total_products ?></h3>
<p>Total Products</p>
</div>
<div class="icon">
<i class="ion ion-bag"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3><?php echo $total_paid_orders ?></h3>
<p>Total Paid Orders</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3><?php echo $total_users; ?></h3>
<p>Total Users</p>
</div>
<div class="icon">
<i class="ion ion-android-people"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3><?php echo $total_stores ?></h3>
<p>Total Stores</p>
</div>
<div class="icon">
<i class="ion ion-android-home"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->
<?php endif; ?>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<script type="text/javascript">
$(document).ready(function() {
$("#dashboardMainMenu").addClass('active');
});
</script>
This is the code of the dashboard cpanel...
THIS CODE IS FOR CREATING NEW USER
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Manage
<small>Users</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Users</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-md-12 col-xs-12">
<?php if($this->session->flashdata('success')): ?>
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<?php echo $this->session->flashdata('success'); ?>
</div>
<?php elseif($this->session->flashdata('error')): ?>
<div class="alert alert-error alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<?php echo $this->session->flashdata('error'); ?>
</div>
<?php endif; ?>
<div class="box">
<div class="box-header">
<h3 class="box-title">Add User</h3>
</div>
<form role="form" action="<?php base_url('users/create') ?>" method="post">
<div class="box-body">
<?php echo validation_errors(); ?>
<div class="form-group">
<label for="groups">Groups</label>
<select class="form-control" id="groups" name="groups">
<option value="">Select Groups</option>
<?php foreach ($group_data as $k => $v): ?>
<option value="<?php echo $v['id'] ?>"><?php echo $v['group_name'] ?></option>
<?php endforeach ?>
</select>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Username" autocomplete="off">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" id="password" name="password" placeholder="Password" autocomplete="off">
</div>
<div class="form-group">
<label for="cpassword">Confirm password</label>
<input type="password" class="form-control" id="cpassword" name="cpassword" placeholder="Confirm Password" autocomplete="off">
</div>
<div class="form-group">
<label for="fname">First name</label>
<input type="text" class="form-control" id="fname" name="fname" placeholder="First name" autocomplete="off">
</div>
<div class="form-group">
<label for="lname">Last name</label>
<input type="text" class="form-control" id="lname" name="lname" placeholder="Last name" autocomplete="off">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" autocomplete="off">
</div>
<div class="form-group">
<label for="gender">Gender</label>
<div class="radio">
<label>
<input type="radio" name="gender" id="male" value="1">
Male
</label>
<label>
<input type="radio" name="gender" id="female" value="2">
Female
</label>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="submit" class="btn btn-primary">Save Changes</button>
Back
</div>
</form>
</div>
<!-- /.box -->
</div>
<!-- col-md-12 -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<script type="text/javascript">
$(document).ready(function() {
$("#groups").select2();
$("#mainUserNav").addClass('active');
$("#createUserNav").addClass('active');
});
</script>
Can someone help me and tell me what is the problem?
The solution is to remove the check for <?php if($is_admin == true): ?> and this would display the content you want to see.
To continue from what you said in the comment:
#RotimiBest the code is not mine, and im not to good with php thats why i asked for help... I dont know why is there is_admin
I asked you that question, to understand why it was there. I guess the author of the code was trying to prevent those that are not administrators from viewing the total stores, total products and so on. And if you don't need that then you should remove that check.
Note: There might be cases where you would need to hide certain parts of your application from non-administrators in this case that if statement would be good. To implement this in your database you should have a field called is_admin and you should make it a Boolean meaning true or false which you can set manually and then when a user logs in, you should check for that field when you return the whole fields of that particular user from the user table.
The explanation might not make sense if you don't get grounded in php and mysql, I suggest you take this tutorial. It really covers the basics to a comfortable understanding of the language.
I hope this helps )
#rotimi_best
I would like to automate the process of logging to a webpage everyday.
First I want the process of entering and submitting my credentials automatically working correctly and then I'll see how I can make it run periodically with cron jobs or something like that.
Here is the source code of the page I want to login to : (https://customer.sunvalleytek.com/login)
<html lang="en"><head>
<title>Sunvalley - Your Login | RAVPower, TaoTronics, HooToo, VAVA</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--
<meta http-equiv="Cache-Control" content="no-store"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-KC4S8Q"></script><script type="text/javascript">
var ctxPath = '';
var brand = 'RAVPower';
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/bootstrapValidator.min.css">
<link rel="stylesheet" href="/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="/css/styles.css?v=1.0">
<script src="/js/jquery-1.12.1.min.js"></script>
<script src="/js/bootstrap/bootstrap.min.js"></script>
<script src="/js/bootstrap/bootstrapValidator.js"></script>
<script src="/js/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="/js/util.js"></script>
<script src="/js/jquery.blockUI.js"></script>
<script src="/js/i18n/front-lang-en.js"></script>
<script src="/js/front-base.js"></script>
<script src="/js/common.js"></script>
<link href="/images/favicon.ico" type="image/x-icon" rel="icon">
<link href="/images/favicon.ico" type="image/x-icon" rel="Shortcut Icon"><!--地址栏和标签上显示图标-->
<link href="/images/favicon.ico" type="image/x-icon" rel="Bookmark"><!--收藏夹显示图标-->
<script type="text/javascript">
var pageValidate = {
fields:{
email: {
validators:{
notEmpty: {
message: bootstrapValidatorMsg.required
},
emailAddress: {
message: bootstrapValidatorMsg.email
}
}
},
password: {
validators:{
notEmpty: {
message: bootstrapValidatorMsg.required
}
}
}
}
};
var login = {
forms:[{
id:'loginForm',
submit:true,
url: '/noaccount/login',
validate:pageValidate,
confirmFn:function(rtmsg){
var opt;
if(rtmsg.SUCCESS){
if(rtmsg.backto){
window.location.href = ctxPath + rtmsg.backto;
}else{
window.location.href = ctxPath + "/account/welcome";
}
}else{
$('#boxModalTitle').html(PromptMsg.prompt);
$('#boxModalBody').html(rtmsg.MESSAGE);
opt = function () {
};
$('#boxModal').modal('show');
$('#boxModal').on('hide.bs.modal', opt);
}
}
}]
};
var pageValidateResetPwd = {
fields:{
accountEmail: {
validators:{
/*notEmpty: {
message: bootstrapValidatorMsg.required
},
emailAddress: {
message: bootstrapValidatorMsg.email
}*/
}
}
}
};
var resetPwd = {
forms:[{
id:'resetPwdForm',
submit:true,
url: '/noaccount/password/reset',
validate:pageValidateResetPwd,
confirmFn:function(rtmsg){
var opt;
if(rtmsg.SUCCESS){
$('#forgetPasswordModel').modal('hide');
$('#boxModalTitle').html(PromptMsg.prompt);
opt = function () {
};
$('#boxModalBody').html(rtmsg.MESSAGE);
$('#boxModal').modal('show');
$('#boxModal').on('hide.bs.modal', opt);
}else{
$('#msgTip').text(rtmsg.MESSAGE);
$('#msgTip').show();
}
},
beforeSendFn:function(){
$('#msgTip').text("");
}
}]
};
$().ready(function(){
bootValidate(login.forms);
bootValidate(resetPwd.forms);
});
</script>
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KC4S8Q"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KC4S8Q');</script>
<!-- End Google Tag Manager -->
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 login margin-t1">
<div class="logo">
<img src="/images/login-logo.png" class="img-responsive center-block">
</div>
<form role="form" id="loginForm" method="post" class="form-horizontal bv-form" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<input type="hidden" name="brandId" id="brandId" value="1">
<input type="hidden" name="preUrl" value="null">
<input type="hidden" name="backto" value="">
<h5>Your session has time out, please log in again.</h5>
<!-- email -->
<div class="form-group has-feedback">
<label class="control-label">Email :</label>
<input type="text" id="email" name="email" autocomplete="off" autofocus="autofocus" class="form-control" placeholder="enter your e-mail" data-bv-field="email"><i class="form-control-feedback" data-bv-icon-for="email" style="display: none;"></i>
<small class="help-block" data-bv-validator="notEmpty" data-bv-for="email" data-bv-result="NOT_VALIDATED" style="display: none;">This field is required.</small><small class="help-block" data-bv-validator="emailAddress" data-bv-for="email" data-bv-result="NOT_VALIDATED" style="display: none;">Invalid Email Address</small></div>
<!-- end email -->
<!-- password -->
<div class="form-group has-feedback">
<label class="control-label">Password :</label>
<input type="password" id="password" name="password" autocomplete="off" class="form-control" placeholder="confirm password" data-bv-field="password"><i class="form-control-feedback" data-bv-icon-for="password" style="display: none;"></i>
<a class="pull-right forget" href="#" data-toggle="modal" data-target="#forgetPasswordModel">Forget password</a>
<small class="help-block" data-bv-validator="notEmpty" data-bv-for="password" data-bv-result="NOT_VALIDATED" style="display: none;">This field is required.</small></div>
<!-- end password -->
<!-- sign -->
<div class="form-group text-center">
<button type="submit" class="btn blue-bg" data-toggle="modal">SIGN IN</button>
<a class="btn blue-bg" href="/noaccount/register/init?backto=&utm_source=&utm_medium=&utm_campaign=">Register Now</a>
</div>
<!-- end sign -->
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="forgetPasswordModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Forget your password?</h4>
</div>
<div class="modal-body">
<p class="text-center">Please enter your email address below. Your will receive a link to reset your password.</p>
<form role="form" id="resetPwdForm" method="post" class="form-horizontal bv-form" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<div class="form-group has-feedback">
<span id="msgTip" class="col-md-5 col-md-offset-3 col-sm-6 col-xs-9 red-color"></span>
<span class="col-md-5 col-md-offset-3 col-sm-6 col-xs-9">
<input type="text" class="form-control" id="accountEmail" name="accountEmail" autocomplete="off" placeholder="user#domain.com" data-bv-field="accountEmail"><i class="form-control-feedback bv-no-label" data-bv-icon-for="accountEmail" style="display: none;"></i>
</span>
<span class="col-md-2 col-sm-2 col-xs-3">
<button type="submit" class="btn org-bg">Submit</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END modal -->
<!-- modal box start-->
<div class="profile-modal">
<div class="modal fade" id="boxModal" tabindex="-1" role="dialog" aria-labelledby="boxModalTitle" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
<h4 class="modal-title" id="boxModalTitle"></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h5 id="boxModalBody" style="margin-bottom:30px;"></h5>
</div>
<div class="form-group text-center">
<span class="col-md-4 col-md-offset-4">
<button type="button" class="btn org-bg" data-dismiss="modal">OK</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- modal box end-->
</body></html>
I have tried to automatically enter my credentials with HTML using POST method (https://crunchify.com/automatic-html-login-using-post-method-autologin-a-website-on-double-click/) and also using a different method outlined here (https://help.risevision.com/hc/en-us/community/posts/115019363963-Auto-Login-on-Webpage-using-Javascript) where I replaced the http://www.exemple.com url by https://customer.sunvalleytek.com/login but it doesn't work.
My guess is that the form type is in Javascript whereas the links just above outline how to fill an html type form. However I haven't found anything about auto-filling Javascript type forms.
Any help would be greatly appreciated.
Many thanks.
I have created a form modal using jQuery:
<ul class="loginbar pull-right">
<li class="hoverSelector">
<i class="fa fa-globe"></i>
Help
</li>
<li class="topbar-devider">
</li>
<li id="id1 ">
Register
</li>
<li class="topbar-devider">
</li>
<li>
<a>Login</a>
</li>
</ul>
Form code
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: #f4a742">Register a new account</h4>
</div>
<div class="modal-body">
<div class="container content">
<div class="row">
<div class="col-md-6 ">
<form class="reg-page" id="RegID">
<div class="form-group">
<div class="form-group internal">
<label>First Name</label> <input type="text" name="fname"
class="form-control margin-bottom-20">
</div>
</div>
<div class="form-group">
<div class="form-group internal">
<label>Last Name</label> <input type="text" name="lname"
class="form-control margin-bottom-20">
</div>
</div>
<div class="form-group">
<div class="form-group internal">
<label>Email Address <span class="color-red">*</span></label>
<input type="text" name="email"
class="form-control margin-bottom-20">
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6 checkbox">
<label> <input type="checkbox"> I read <a
href="page_terms.html" class="color-green">Terms and
Conditions</a>
</label>
</div>
<div class="col-lg-6 text-right">
<button class="btn-u" type="submit">Register</button>
</div>
</div>
</form>
</div>
</div>
</div> <!-- end content -->
</div> <!-- end modal-body -->
</div> <!-- end modal-content -->
</div> <!-- end modal-dialog -->
</div> <!-- end modal -->
</div> <!-- end container -->
<script>
$( "#id1" ).click(function() {
$( "#myModal" ).click();
});
</script>
It seems everything is okay for me, initial it was work but suddenly it is giving trouble, so what would be the mistake.
When ever I have click on register it is not pop-up the form, could you please let me know what mistake I have done.
$( "#id1" ).click(function(ev) {
ev.stopImmediatePropagation(); // sometimes click event fires twice in jQuery you can prevent it by this method.
$( "#myModal" ).modal(); // you should use native function of Bootstrap.
});
You dont need to add any jquery or js for that at first place.
So you need to add data-target attribute to target your myModal,
<li id="id1 "> Register</li>
So you markup should look like,
<ul class="loginbar pull-right">
<li class="hoverSelector"><i class="fa fa-globe"></i>
Help</li>
<li class="topbar-devider"></li>
<li id="id1 "> Register</li>
<li class="topbar-devider"></li>
<li><a>Login</a></li>
</ul>
Alternate to your js requirement you could do it on click of a tag,
$('ul.loginbar').on('click', 'li#id1 > a', function(){
$('div#myModal').modal('show');
});
I am trying to building a form that is used for creating other form. I fill out all the information and it creates a json string that is stored in a database. I have my form built and I'm able to add multiple form fields dynamically. However, I'm wanting the fields options to change as I change the field type in a dropdown select box. For instance, if I select the field type "text", only the "required" checkbox will appear, but if I select the "select" type, the "required" checkbox will appear and the "options" textboxes will appear. Each different option is within their own div container. I don't want to just simply hide and show the divs based on the dropdown selection, because I don't want the empty textboxes or checkboxes to post when I submit the form.
I am very new to jQuery. Am I able to use html templates? and how if so? I hope this makes since. I would be happy to explain further.
'
<?php echo validation_errors(); ?>
<?php echo form_open(); ?>
<div class="form-horizontal">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">General</li>
<li role="presentation">Fields</li>
<li role="presentation">After Submit</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="html-container"></div>
<br>
<!-- GENERAL FORM INFO TAB -->
<div role="tabpanel" class="tab-pane active" id="general">
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-5">
<?php echo form_input('name', set_value('name', $form->name), 'class="form-control"'); ?>
</div>
</div>
<div class="form-group">
<label for="slug" class="col-sm-3 control-label">Slug:</label>
<div class="col-sm-5">
<?php echo form_input('slug', set_value('slug', $form->slug), 'class="form-control"'); ?>
</div>
</div>
<div class="form-group">
<label for="send_button_text" class="col-sm-3 control-label">Send Button Text:</label>
<div class="col-sm-5">
<?php echo form_input('send_button_text', set_value('send_button_text', $form->send_button_text), 'class="form-control"'); ?>
</div>
</div>
<div class="form-group">
<label for="save_entries" class="col-sm-3 control-label">Save Entries</label>
<div class="col-sm-5">
<label class="radio-inline">
<?php echo form_radio('save_entries', 'yes', set_value('save_entries', $form->save_entries)); ?> Yes
</label>
<label class="radio-inline">
<?php echo form_radio('save_entries', 'no', set_value('save_entries', $form->save_entries)); ?> No
</label>
</div>
</div>
<div class="form-group">
<label for="is_public" class="col-sm-3 control-label">Public</label>
<div class="col-sm-5">
<label class="radio-inline">
<?php echo form_radio('is_public', 'yes', set_value('is_public', $form->is_public)); ?> Yes
</label>
<label class="radio-inline">
<?php echo form_radio('is_public', 'no', set_value('is_public', $form->is_public)); ?> No
</label>
</div>
</div>
</div> <!-- //..end of 'general' tab panel -->
<!-- INPUT FIELDS TAB -->
<div role="tabpanel" class="tab-pane" id="fields">
<div class="repeat">
<div class="repeat-wrapper">
<div class="repeat-container">
<div class="repeat-template repeat-row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading{{row-count}}">
<h3 class="panel-title pull-left">
<span class="move"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></span>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{row-count}}" aria-expanded="true" aria-controls="collapse{{row-count}}">
Panel title
</a>
</h3>
<?php echo form_button('remove_field_button', '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove', 'class="remove btn btn-link pull-right"'); ?>
<div class="clearfix"></div>
</div>
<div id="collapse{{row-count}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{row-count}}">
<div class="panel-body">
<div class="form-group form-group-sm">
<label for="inputs[{{row-count}}][name]" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-5">
<?php echo form_input('inputs[{{row-count}}][name]', '', 'class="form-control"'); ?>
</div>
</div>
<div class="form-group form-group-sm">
<label for="inputs[{{row-count}}][label]" class="col-sm-2 control-label">Label:</label>
<div class="col-sm-5">
<?php echo form_input('inputs[{{row-count}}][label]', '', 'class="form-control"'); ?>
</div>
</div>
<div class="form-group form-group-sm">
<label for="inputs[{{row-count}}][type]" class="col-sm-2 control-label">Type:</label>
<div class="col-sm-3">
<?php echo form_dropdown('inputs[{{row-count}}][type]', $types, '', 'class="form-control input_type" data-counter="{{row-count}}"'); ?>
</div>
</div>
<div id="input_required_{{row-count}}" class="form-group input-type-show-hide">
<div class="col-sm-offset-2 col-sm-5">
<div class="checkbox">
<label>
<?php echo form_checkbox('inputs[{{row-count}}][required]', 'yes', ''); ?>
<?php echo form_checkbox('inputs[{{row-count}}][required]', 'no', ''); ?> Required
</label>
</div>
</div>
</div>
<div id="input_options_{{row-count}}" class="row input-type-show-hide">
<div class="col-sm-offset-2 col-sm-10">
<table class="table repeat-wrapper">
<thead>
<tr>
<th>Label</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<div class="form-group">
<div class="col-sm-12">
<?php echo form_button('add_option_button', 'Add Option', 'class="add btn btn-link"'); ?>
</div>
</div>
</td>
<td></td>
</tr>
</tfoot>
<tbody class="repeat-container">
<tr class="form-inline repeat-template repeat-row">
<td>
<div class="form-group form-group-sm">
<label for="inputs[{{row-count}}][options][{{row-count}}][label]" class="sr-only">Label</label>
<div class="col-sm-6">
<?php echo form_input('inputs[{{row-count}}][options][{{row-count}}][label]', '', 'class="form-control" placeholder="Label"'); ?>
</div>
</div>
</td>
<td>
<div class="form-group form-group-sm">
<label for="inputs[{{row-count}}][options][{{row-count}}][value]" class="sr-only">Value</label>
<div class="col-sm-6">
<?php echo form_input('inputs[{{row-count}}][options][{{row-count}}][value]', '', 'class="form-control" placeholder="Value"'); ?>
</div>
</div>
</td>
<td>
<span class="remove">Remove</span>
</td>
</tr> <!-- //..end of repeat-template for options -->
</tbody> <!-- //..end of repeat-container for options -->
</table> <!-- //..end of repeat-wrapper for options -->
</div>
</div>
<div class="att_block_{{row-count}}"></div>
</div> <!-- //..end of panel body -->
</div> <!-- //..end of tabpanel -->
</div> <!-- //..end of panel div -->
</div> <!-- //..end of panel group -->
</div> <!-- //..end of repeat-template -->
</div> <!-- //..end of repeat-container -->
<div class="form-group">
<div class="col-sm-12">
<?php echo form_button('add_field_button', 'Add Another', 'class="add btn btn-link"'); ?>
</div>
</div> <!-- //..end of 'add another' form-group -->
</div><!-- //..end of repeat-wrapper -->
</div> <!-- //..end of repeat div -->
</div> <!-- //..end of 'fields' tab panel -->
<!-- AFTER SUBMIT TAB -->
<div role="tabpanel" class="tab-pane" id="after_submit">
<div class="form-group">
<label for="email_recipients" class="col-sm-3 control-label">Email Recipients:</label>
<div class="col-sm-5">
<?php echo form_input('email_recipients', set_value('email_recipients', $form->email_recipients), 'class="form-control"'); ?>
</div>
</div>
<div class="form-group">
<label for="email_cc" class="col-sm-3 control-label">Email CC:</label>
<div class="col-sm-5">
<?php echo form_input('email_cc', set_value('email_cc', $form->email_cc), 'class="form-control"'); ?>
</div>
</div>
<div class="form-group">
<label for="email_bcc" class="col-sm-3 control-label">Email BCC:</label>
<div class="col-sm-5">
<?php echo form_input('email_bcc', set_value('email_bcc', $form->email_bcc), 'class="form-control"'); ?>
</div>
</div>
<div class="form-group">
<label for="email_subject" class="col-sm-3 control-label">Email Subject:</label>
<div class="col-sm-5">
<?php echo form_input('email_subject', set_value('email_subject', $form->email_subject), 'class="form-control"'); ?>
</div>
</div>
<div class="form-group">
<label for="email_message" class="col-sm-3 control-label">Email Message:</label>
<div class="col-sm-6">
<?php echo form_textarea('email_message', set_value('email_message', $form->email_message), 'class="tinymce"'); ?>
</div>
</div>
<div class="form-group">
<label for="after_submit_text" class="col-sm-3 control-label">After Submit Text:</label>
<div class="col-sm-6">
<?php echo form_textarea('after_submit_text', set_value('after_submit_text', $form->after_submit_text), 'class="tinymce"'); ?>
</div>
</div>
<div class="form-group">
<label for="return_url" class="col-sm-3 control-label">Return URL:</label>
<div class="col-sm-5">
<?php echo form_input('return_url', set_value('return_url', $form->return_url), 'class="form-control"'); ?>
</div>
</div>
</div> <!-- //..end of 'after_submit' tab panel -->
</div> <!-- //..end of tab-content -->
<div class="form-group">
<div class="col-sm-offset-3 col-sm-5">
<?php echo form_submit('submit', 'Save', 'class="btn btn-default"'); ?>
</div>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#myTabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
tinymce.init({
selector: ".tinymce",
plugins: "code",
toolbar: "undo redo | bold italic | bullist numlist | code",
menubar: false
});
$('.repeat').each(function() {
$(this).repeatable_fields({
wrapper: '.repeat-wrapper',
container: '.repeat-container',
row: '.repeat-row',
template: '.repeat-template',
row_count_placeholder: '{{row-count}}'
});
});
template = $("#test_html").clone();
template.appendTo(".html-container");
//$( ".html-container" ).append( $( "#test_html" ) );
$("body").on("change", ".input_type", function () {
});
});
</script>'
Use the jQuery hide() method to conceal parts of the DOM which you want to be submitted with the form and use remove() to take them completely out of the DOM, thereyby preventing their submission.
See the jQuery remove method