I'm making a website with a guest and admin side to it. In the admin side there are additional page's in which you can fill in form's which contain text and titles for certain div's in other page's.
I was wondering how can I make it so that when you fill in these forms and press save, the variables will be used in the other page where you can actually see the title and text as html. The text and title have to be visible for everyone that visits the page and have to stay there until there are changes made.
I have code yet, since i don't know how to start, I do have the interfaces, you can see the HTML down here.
Interface Input:
<div class="panel-box">
<div class="titles">
<h4>Voeg vacatures toe</h4>
</div>
<form class="form-theme">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label for="name">Titel vacature</label>
<input type="text" required="required" value="" maxlength="100" class="form-control" name="Name" id="name">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label for="description">Beschrijving</label>
<textarea rows="10" class="form-control" name="description" id="description" required="required" ></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" value="Save" class="btn btn-lg btn-primary">
</div>
</div>
</form>
</div>
Output:
<!-- Content Central -->
<div class="container padding-top">
<div class="row">
<!-- content Column Left -->
<div class="col-md-12">
<!-- Experts -->
<div class="panel-box">
<div class="titles">
<h4> <!-- This is where the title should be --> </h4>
</div>
<div class="row">
<ul class="events-carousel events-no-carousel">
<!-- Item blog post -->
<li class="col-xs-6 col-sm-6 col-md-4">
<div class="info-post">
<h4>Vacature naam</h4>
<p><!-- This is where the text should be -->
<a class="btn btn-primary pull-right" href="{{ path('static_page', {template:'club/vacancy'}) }}">Bekijken</a></p>
</div>
</li>
<!-- End Item blog post -->
</ul>
<!-- End blog post-->
</div>
</div>
<!-- End Experts -->
</div>
</div>
</div>
<!-- End Testimonials -->
<!-- End Section Area - Content Central -->
Generally, you should store your form data in database, and then retrieve it from database to render on the other page.
So the PHP script on the page with form should save your form data, when other script on page where you want to show your data should take it from database.
Related
First of all, a big thanks for considering the question.
This is more of a ui related query, i have a product management page through which a new product can be added to ecommerce site, the issue i am facing is :
After uploading the file (profilepic) input, the label defined for file name is somehow pushing the button used to upload the pic the pic to the right instead of displaying the name on the right side.
The code is in the middle snippet, scrolling all the way to the bottom of the snippet, you should be able to locate it.
I have attached an image of the same.
Kindly help me with this issue, post file upload, i want the label to come on the right side next to the upload button
<!DOCTYPE html>
<html lang="en">
<body class="dashboard-upload">
<!--================================
START DASHBOARD AREA
=================================-->
<section class="dashboard-area">
<div class="dashboard_menu_area">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="dashboard_menu">
<li>
<a href="index.php">
<span class="lnr lnr-home"></span>Sales</a>
</li>
<li>
<a href="">
<span class="lnr lnr-cog"></span>Store</a>
</li>
<li>
<a href="dashboard-setting.html">
<span class="lnr lnr-cog"></span>Landing Page</a>
</li>
<li>
<a href="dashboard-setting.html">
<span class="lnr lnr-cog"></span>Manage Users</a>
</li>
<li>
<a href="dashboard-setting.html">
<span class="lnr lnr-cog"></span>Digital Wallet</a>
</li>
<li class="active">
<a href="">
<span class="lnr lnr-upload"></span>Upload New Item</a>
</li>
<li>
<a href="dashboard-manage-item.html">
<span class="lnr lnr-briefcase"></span>Support Tickets</a>
</li>
</ul>
<!-- end /.dashboard_menu -->
</div>
<!-- end /.col-md-12 -->
</div>
<!-- end /.row -->
</div>
<!-- end /.container -->
</div>
<!-- end /.dashboard_menu_area -->
<div class="dashboard_contents">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="dashboard_title_area">
<div class="pull-left">
<div class="dashboard__title">
<h3>Upload Your Item</h3>
</div>
</div>
</div>
</div>
<!-- end /.col-md-12 -->
</div>
<!-- end /.row -->
<div class="row">
<div class="col-lg-8 col-md-7">
<form action="#">
<div class="upload_modules">
<div class="modules__title">
<h3>Item Name & Description</h3>
</div>
<!-- end /.module_title -->
<div class="modules__content">
<div class="form-group">
<label for="category">Select Category</label>
<div class="select-wrap select-wrap2">
<select name="country" id="category" class="text_field">
<option value="garina">Garina Game Cards</option>
<option value="pubg">Pubg Game Cards</option>
<option value="ps">Play Station</option>
<option value="xbox">Xbox</option>
<option value="netflix">Netflix</option>
<option value="itunes">Itunes</option>
<option value="google">Google Play</option>
</select>
<span class="lnr lnr-chevron-down"></span>
</div>
</div>
<div class="form-group">
<label for="product_name">Product Name
<span>(Max 100 characters)</span>
</label>
<input type="text" id="product_name" class="text_field" placeholder="Enter your product name here...">
</div>
<div class="form-group no-margin">
<p class="label">Short Description</p>
<input type="text" id="product_name" class="text_field" placeholder="Short Description.">
</div>
<div class="form-group no-margin">
<p class="label">Long Description</p>
<input type="text" id="product_name" class="text_field" placeholder="Long Description">
</div>
<!-- end /.modules__content -->
</div>
<!-- end /.upload_modules -->
<div class="upload_modules module--upload">
<div class="modules__title">
<h3>Image</h3>
</div>
<!-- end /.module_title -->
<div class="modules__content">
<div class="form-group">
<div >
<!-- Image is being uploaded here -->
<div class="custom_upload">
<label for="profilepic">
<input type="file" id="profilepic" name="profilepic" class="files">
<span class="btn btn--round btn--sm">Choose File</span>
</label>
<label for="profilepic"></label>
</div>
<!-- end /.custom_upload -->
<div >
<div >
</div>
</div>
<!-- end /.progress_wrapper -->
</div>
<!-- end /.upload_wrapper -->
</div>
<!-- end /.form-group -->
</div>
<!-- end /.upload_modules -->
</div>
<!-- end /.upload_modules -->
<div class="upload_modules">
<div class="modules__title">
<h3>Others Information</h3>
</div>
<!-- end /.module_title -->
<div class="modules__content">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="dimension">Release Date</label>
<input type="text" id="dimension" class="text_field" placeholder="Date first available" value="<?php $day=date("d"); $month=date("m"); $year=date("Y"); $date="$day/$month/$year"; echo $date;?>">
</div>
<div class="form-group">
<label for="dimension">Updated On</label>
<input type="text" id="dimension" class="text_field" placeholder="Last Updated On"value="<?php $day=date("d"); $month=date("m"); $year=date("Y"); $date="$day/$month/$year"; echo $date;?>">
</div>
</div>
<!-- end /.col-md-6 -->
</div>
<!-- end /.row -->
<!-- end /.col-md-6 -->
</div>
<!-- end /.row -->
</div>
<!-- end /.upload_modules -->
</div>
<!-- end /.upload_modules -->
<div class="upload_modules with--addons">
<div class="modules__title">
<h3>Price</h3><br><br>
<label>For Regular Users</label>
<input type="text" id="rlicense" class="text_field" placeholder="00.00">
<br>
<label>For Premium Users</label>
<input type="text" id="rlicense" class="text_field" placeholder="00.00">
</div>
<!-- end /.module_title -->
<!-- end /.modules__content -->
</div>
<!-- end /.upload_modules -->
<!-- submit button -->
<button type="submit" class="btn btn--round btn--fullwidth btn--lg">Add New Item</button>
</form>
</div>
<!-- end /.col-md-8 -->
<div class="col-lg-4 col-md-5">
<aside class="sidebar upload_sidebar">
<div class="sidebar-card">
<div class="card-title">
<h3>Upload Details</h3>
</div>
<div class="card_content">
<div class="card_info">
<h4>Image Upload</h4>
<p>Please use an imahe of only png/jpg/jpeg format so that nothing in the site breakes.</p>
</div>
<div class="card_info">
<h4>Upload Location</h4>
<p>This product will be available in the store post submission without any delays.</p>
</div>
<div class="card_info">
<h4>Getting Error ?</h4>
<p>Make sure all details are filled, clear your browser cache or try in private mode. If the problem continues, this can be a serious issue in the software kindly connect with the developer as soon as possible at adity#xyberneo.com</p>
</div>
</div>
</div>
<!-- end /.col-md-4 -->
</div>
<!-- end /.row -->
</div>
<!-- end /.container -->
</div>
<!-- end /.dashboard_menu_area -->
</section>
<!--================================
END DASHBOARD AREA
=================================-->
<!--//////////////////// JS GOES HERE ////////////////-->
<!-- inject:js -->
<script src="js/vendor/jquery/jquery-1.12.3.js"></script>
<script src="js/vendor/jquery/popper.min.js"></script>
<script src="js/vendor/jquery/uikit.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/chart.bundle.min.js"></script>
<script src="js/vendor/grid.min.js"></script>
<script src="js/vendor/jquery-ui.min.js"></script>
<script src="js/vendor/jquery.barrating.min.js"></script>
<script src="js/vendor/jquery.countdown.min.js"></script>
<script src="js/vendor/jquery.counterup.min.js"></script>
<script src="js/vendor/jquery.easing1.3.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/vendor/slick.min.js"></script>
<script src="js/vendor/tether.min.js"></script>
<script src="js/vendor/trumbowyg.min.js"></script>
<script src="js/vendor/waypoints.min.js"></script>
<script src="js/dashboard.js"></script>
<script src="js/main.js"></script>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyBeySPFGz7DIUTrReCRQT6HYaMM0ia0knA"></script>
<script src="js/map.js"></script>
<!-- endinject -->
<script>
var profilePic = document.getElementById('profilepic'); /* finds the input */
function changeLabelText() {
var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */
var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */
profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */
var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */
if (profilePicValue !== '') {
profilePicLabelText.textContent = profilePicValue; /* changes the label text */
}
}
profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */
</script>
</body>
</html>
Use span tag before input tag
Try this
I have managed to pass an id to a form as a hidden input element and would like to use the same id as a parameter when sending a PATCH request to update a single row in database.
<div class="container">
<!-- update route which requires id of the row u are trying to update and the link-->
<form action="{{route('transactions.update', )}}" method="post">
#csrf
<div class="row ">
<div class="col-sm">
<p>Fullnames</p>
</div>
<div class="col-sm">
<h6 id="names"></h6>
</div>
</div>
<div class="row">
<div class="col-sm">
<p>Account</p>
</div>
<div class="col-sm">
<h6 id="account"></h6>
</div>
</div>
<div class="row">
<div class="col-sm">
<p>Meter</p>
</div>
<div class="col-sm">
<h6 id="meter"></h6>
</div>
</div>
<!-- id passed from a selected value in table-->
<input type="hidden" id="trans_id">
<div class="row justify-content-around">
<button type="submit" class="btn btn-sm m-2 w-75" style="background-color: #335b7d; color: white">Approve</button>
</div>
<div class="row justify-content-around">
Reject
</div>
</form>
</div>
</div>
Thank you
using this code im not near and expert can you help seems like the php is not beig called and the txt is blank
<form method="POST" class="form-grp clearfix grpelem" id="widgetu164" action="app1.php" <!-- none box -->
<div class="fld-grp clearfix grpelem" id="widgetu171" data-required="true" data-type="email"><!-- none box -->
<span class="fld-input NoWrap actAsDiv clearfix grpelem" id="u174-4"><!-- content --><input class="wrapped-input" type="text" spellcheck="false" id="widgetu171_input" name="Email" tabindex="1"/><label class="wrapped-input fld-prompt" id="widgetu171_prompt" for="widgetu171_input"><span class="actAsPara">Username</span></label></span>
</div>
<div class="clearfix grpelem" id="u175-4"><!-- content -->
<p>Actualizando...</p>
</div>
<div class="clearfix grpelem" id="u165-4"><!-- content -->
<p>Correo inválido</p>
</div>
<div class="clearfix grpelem" id="u176-4"><!-- content -->
<p>Actualizado..!!</p>
</div>
<input name="-" type="submit" class="submit-btn NoWrap grpelem" id="u166-17" tabindex="3" value=""/>
<!-- state-based BG images -->
<div class="fld-grp clearfix grpelem" id="widgetu225" data-required="true"><!-- none box -->
<span class="fld-input NoWrap actAsDiv clearfix grpelem" id="u227-4"><!-- content --><input class="wrapped-input" type="password" spellcheck="false" id="widgetu225_input" name="custom_U225" tabindex="2"/><label class="wrapped-input fld-prompt" id="widgetu225_prompt" for="widgetu225_input" href=""><span class="actAsPara">Contraseña</span></label></span>
</div>
Your <form> Tag doesnt close at the end. Missing > an missing </form>
How to write a code which will remember when user click on picture "Vlado.jpg" and continue on form "forma_id"?
I need this information becouse when user submite form i will use this in my php.script in if block.
<html>
<div class="tab-pane fade Osiguranje_id">
<div class="container cont_osiguranje">
<div class="jumbotron jumb_osiguranje">
<a id="Osiguranje_id"><h2>Odaberi zastupnika</h2></a>
</div>
<div class="jumbotron">
<div class = "row">
<div class = "col-md-6 col-sm-6 col-xs-12">
<a data-toggle="pill" href="#forma_id"><img src="Vlado.jpg" class="img-rounded img-responsive" name="vlado"></a>
</div>
</div>
</div>
</div>
</div>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
<div id="forma_id" class="tab-pane fade">
<div class="container cont_forma">
<div class="jumbotron jumb_forma">
<a id="forma_id"><h2>Ispunite formu:</h2></a></br>
<form class="form-horizontal" role="form" action="proba4.php" method="POST">
<div class="form-group">
<label class="control-label col-sm-2" for="ime">Ime:</label>
<div class="col-sm-4"><input type="text" required class="form-control" name="ime" placeholder="Ime"></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4"><input type="submit" name="submit" value="Pošalji"/></div>
</div>
</form>
</div>
</div>
</div>
</html>
You'll most likely want to create a hidden input in your form, and by default it's false, or has some other value (that means didn't click the img - for your situation), when the user clicks the image, use Javascript to change this hidden input value to true (or to a value that means they did click the img - for your situation).
I'm using the following code on my site. You'll notice that there is a checkbox outside the form (Towards the bottom). I need the value of the checkbox called to send_mail.php without creating a second form, and without placing it inside the form element. Is this even possible with PHP? `
<h2>Search for your dream home<br />
and save now!</h2>
<legend>Which Areas are you interested in?</legend>
<div class="areas row-fluid" style="text-align:left !important;">
<div class='span5' style='margin-left:0px !important;'>
<label>
<input type="checkbox" name="arrayValue[]" id="area[0]" value="test" style='margin-top:-5px !important;'> test</label>
</div>
</div>
<input type="button" onclick="jQuery('#myModal').modal('show')" value="CONTINUE" />
</div>
</div>
</div>
<!--banner area end-->
<!--content area 1 start-->
<div id="content1">
<div class="content1_in"> <span>
<h2 style="line-height:40px;font-size:40px;padding-bottom:10px">SOME CONTENT
</span>
<div class="img">
<img src="http://f14.co/realtor/assets/images/phone.png" alt="" />
</div>
</div>
</div>
<!--content area 1 end-->
<!--content area 1 start-->
<div id="content2">
<div class="content2_in"> <span> SOME CONTENT
</span>
<div class="img">
<img src="http://f14.co/realtor/assets/images/ipad-img.png" alt="" />
<div class="key"></div>
</div>
</div>
</div>
<!--content area 1 end-->
<!--content area 3 start-->
<div id="content3">
<div class="content3_in"> <span>
SOME CONTENT
</span>
<div class="img">
<img src="http://f14.co/realtor/assets/images/desktop-img.png" alt="" />
</div>
<div class="free"></div>
</div>
</div>
<!--content area 3 end-->
<div id="footer">
<div class="footer_in">
This Website Is Brought To You By: Test</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal hide fade modal-survey" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel" class="survey_title">What type of home are you looking for?</h3>
</div>
<form method="post" class="form-horizontal" id="final_form" action="send_mail.php">
<input type="hidden" name="template" id="template" value="Buyers" />
<div class="modal-body" >
<div id="lead_info_1">
<div class="input select">
<div class=""></div>...
I would add a hidden input in your form.
Then, just before your post, assign the of the hidden textbox with the value of the checkbox.
(using jQuery)