Switch between adding and deleting html based on dropdown box

Switch between adding and deleting html based on dropdown box - javascript

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

Related

I have a business sales page that shows results from a json file. I want to be able to pass the information for one listing on a results page [duplicate]

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.

when creating new users, nothings shows on dashboard

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

Get text of label sibling of checked checked using javascript

I want to be able to check if the input is checked and if it is checked then grab the data associated with that input and display it into another div. here is my code.
var levels = $('input:checked + label').map(function() {
return $(this).text();
}).get();
//alert(levels);
document.getElementById('listprice').innerHTML = levels;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this -->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11">
<span class="errors-area" data-class="sln-alert sln-alert-medium sln-alert--problem">
<div class="sln-alert sln-alert-medium sln-alert--problem" style="display: none" id="availabilityerror">
Not enough time for this service
</div>
</span>
</div>
</div>
</div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>
I would like to collect the data and show it back in a div somewhere else on the page. Any jquery to help achieve this would be great.

$(document).ready(function(){
var checkedItems = $('input[type=checkbox]:checked');
checkedItems.each(function(){
var serviceName = $(this).parents('.sln-service-info').find('.sln-service-name').html();
var servicePrice = $(this).parents('.sln-service-info').find('.sln-service-price').html();
$('#listprice').append('<div>Title - '+serviceName +' Price - ' +servicePrice +'</div>');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" checked name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this-->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>

CSS/HTML Twitter bootstrap fixed columns

I'm trying to get some elements on my webpage to stay where they are when scrolling (fixed), but I can't seem to get it working using position:fixed;.
When I try the design gets pretty broken. Everything moves to the right side, and is getting 100% in width automatically. All elements I want to set fixed also stays on top of each other...
This is how it is supposed to look...
The header (blue bar) and the row below is going to stay fixed where it is. How would I do that using Twitters Bootstrap?
Here is some HTML:
<div class="container">
<div class="row">
<div id="search_wrapper" class="col-md-8 col-md-offset-2 grey">
<div id="search" class="col-md-12">
<div class="threed left"></div>
<div class="threed right"></div>
<div class="logo_small"></div>
<form method="post" class="search">
<div class="form-group">
<button class="form-control-feedback pull-right" type="submit" name="submit_search"><i class="fa fa-search"></i></button>
<input type="text" name="q" placeholder="Søk etter firma, bransje og sted">
</div>
</form>
</div>
</div>
<div class="wrapper col-md-8 col-md-offset-2">
<div id="locals_wrapper" class="col-md-3 grey">
<h3><i class="fa fa-map-marker"></i>Steder</h3>
<hr>
<?php
if (isset($data['location']) && $data['location']) {
foreach ($data['location'] as $c => $ms) {
echo '<div class="county checkbox"><label> <input class="c" type="checkbox" name="business_county" value="'. $c .'">'. $c .' </label><div class="municipalities" data-county="'. $c .'">';
foreach ($ms as $m) {
echo '<div class="checkbox"><label><input type="checkbox" name="business_municipality" data-county="'. $c .'" value="'. $m .'">'. $m .'</label></div>';
} echo '</div></div>';
}
}
?>
</div>
<div id="results_wrapper" class="col-md-9 grey">
<h3><i class="fa fa-bullseye"></i>Resultater</i></h3>
<hr>
<div id="results">
</div>
</div>
</div>
</div>
</div>
I have tried adding position:fixed; to #search, #wrapper.

bootstrap modal contact form issues

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.

Develop Reference

JavaScript is the programming language of the Web.

Switch between adding and deleting html based on dropdown box - javascript

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

Related

I have a business sales page that shows results from a json file. I want to be able to pass the information for one listing on a results page [duplicate]

when creating new users, nothings shows on dashboard

Get text of label sibling of checked checked using javascript

CSS/HTML Twitter bootstrap fixed columns

bootstrap modal contact form issues

Categories

Resources