We Keep Coding

How to create animation alert system with toastr and php mysql

Hi I want to create animation notification system with toastr and PHP MySQL, But I don't understand how can I do that. I already Integrate jQuery Toastr Plugin in my header and footer files I want to create like below picture
This is example Image
I'm new so I can't understand how I can do that. Please help me.
Below are my html and PHP code. Please tell me How I can call success message, warning message and error message.
<?php include_once('inc/header.php');
$database = new Database();
$db = $database->getConnection();
$addmouja = new Mutation($db);
?>
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box">
<h4 class="page-title">নতুন মৌজা</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item">ড্যাশবোর্ড</li>
<li class="breadcrumb-item active">নতুন মৌজা</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-12">
<div class="card font-18">
<div class="card-body">
<?php
if(isset($_POST['add_mouja'])){
$mouja_n = $_POST['mname'];
$mouja_jal = $_POST['mjal'];
if($addmouja->addMouja($mouja_n, $mouja_jal)){
echo '<script type="text/javascript">toastr.success("Have Fun")</script>';
}else{
echo "<div id='toastr-four'></div>";
}
}
?>
<form method="post">
<div class="row">
<div class="col-md-6">
<label for="moujaName" class="col-form-label">মৌজার নাম <span style="color: red">*</span></label>
<input type="text" class="form-control" name="mname" autocomplete="off" required>
</div>
<div class="col-md-6">
<label for="moujaJal" class="col-form-label">জে, এল নং <span style="color: red">*</span></label>
<input type="text" class="form-control" name="mjal" autocomplete="off" required>
</div>
</div>
<p class="text-center">
<button type="submit" name="add_mouja" class="btn btn-success mt-2">Add Mouja</button>
<button type="reset" class="btn btn-danger mt-2">Reset</button>
</p>
</form>
</div>
</div>
</div>
</div>
<?php include_once('inc/footer.php');?> ```

How to delete div and all element inside div? Javascript, html, css

I have a function that clears the entire div and it disappears but still appears in the inspect (html). This is a real problem because we have this input type field on the email and I got this empty data in email. I only want when this value is not chosen to completely remove me from html and inspect. Look at my code and try to catch the error. The most important things in the whole code that you need to pay attention are onchange="checkSelected()" in html and first script tag which manipulate with that. It should simply become a display none but it still stands there.
<div class="modal fade" id="montageModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content" style="display: flex;">
<div class="modal-body">
<form id="schedule_form" class="clearfix" action="index.php?route=api/reifenmontage" method="post">
<div class="container-fluid">
<div class="step_1" >
<h3 class="modal-title">Reifenmontage Termin buchen </h3>
<div class="row termin_row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<label>Pneu-Typ</label>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<select onchange="checkSelected()" class="form-control" name="pneu" id="pneu">
<option value="Motorrad">Motorrad</option>
<option value="Auto">Auto</option>
</select>
</div>
</div>
</div>
<div id="additionalRow" class="row termin_row" >
<div id="reifenmontage-input" class="row termin_row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<label>Mark und model</label>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<select name="marka" class="form-control" id="button-getdata">
</select>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<select name="model" class="form-control" id="result" >
</select>
</div>
</div>
</div>
</div>
<div class="row termin_row">
<div class="col-sm-4 col-xs-12">
<div class="row"><label>2. Terminvorschlag</label></div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="row">
<div class="input-group date" id="date-2" data-termin="1">
<input type='text' class="form-control" name="date[1]" />
<span class="input-group-addon">um</span>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="row">
<div class="input-group time" id="time-2" data-termin="1">
<input type='text' class="form-control" name="time[1]" />
<span class="input-group-addon">Uhr</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="checkbox">
<label>
<input type="checkbox" name="accept" id="accept"> Ich akzeptiere die Teilnahmebedingungen
</label>
</div>
</div>
<div class="row text-center">
<button type="button" class="btn btn-primary btn-lg btn-submit" id="next_step" disabled="disabled">Anfrage senden</button>
</div>
</div>
<div class="step_2">
<h3 class="modal-title">Your contact info</h3>
<div class="">
<div class="form-group clearfix">
<input type="text" name="name" value="<?= $user['name'] ?>" placeholder="Name and Lastname" class="form-control name text" required />
</div>
<div class="form-group clearfix">
<input type="text" name="phone" value="<?= $user['phone'] ?>" placeholder="Phone" class="form-control phone text" required />
</div>
<div class="form-group clearfix">
<input type="email" name="email" value="<?= $user['email'] ?>" placeholder="Email" class="form-control email text" required />
</div>
<div class="text-center">
<button type="submit" id="submit" class="btn btn-default btn-lg btn-submit" >Suchen</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">SCHLIESSEN</button>
</div>
</div>
</div>
</div>
and my script tag
<script type="text/javascript">
let selectItem = document.getElementById('pneu');
let additionalRow = document.getElementById('additionalRow');
function checkSelected() {
if (selectItem.selectedIndex == "1") {
additionalRow.style.display = 'none';
} else {
additionalRow.style.display = 'block';
}
}
</script>
<script type="text/javascript">
$('#button-getdata').on('change', function() {
$.ajax({
url: 'index.php?route=api/reifenmontage/get_marka_data',
type: 'post',
data: $('#reifenmontage-input select'),
dataType: 'json',
beforeSend: function() {
},
success: function(json) {
if (json['success']) {
$("#result").empty();
for (i in json['success']) {
var element = json['success'][i];
var o = new Option(element['model'], element['model']);
$("#result").append(o);
html = "\t<option value=\""+ element['model'] + "\">" + element['model'] + "</option>\n";
$("#result").append(o);
}
// document.getElementById("schedule_form").reset();
}
}
});
});
</script>
<script type="text/javascript">
$.ajax({
url: 'index.php?route=api/reifenmontage/mark',
context: document.body,
success: function(data) {
const selectControl = $('#button-getdata');
selectControl.html(data.map(ExtractData).join(''));
}
});
function ExtractData(item) {
return ` <option value="${item.value}">${item.label}</option>`;
}
</script>

Try variant with detaching/attaching DOM elements
<script type="text/javascript">
let selectItem = document.getElementById('pneu');
//let additionalRow = document.getElementById('additionalRow');
let detached = '';
function checkSelected() {
if (selectItem.selectedIndex == "1") {
detached = $('#reifenmontage-input').detach();
} else {
detached.appendTo('#additionalRow');
}
}
</script>

Passing content from <textarea> to api controller

I'm trying to pass content from a form (in a modal) to an api_controller. But I can't get the text out of my <textarea>... even with a simple alert
//Simple HTML-BOOTSTRAP form
<div class="modal-dialog modal65resp">
<div class="modal-content">
<!-- modal-header -->
<div class="modal-header">
<h4>New File</h4>
</div>
<!-- modal-body -->
<div class="modal-body">
<form id="newfileform" class="form-horizontal">
<!-- filename -->
<div class="form-group">
<label for="filename" class="col-sm-2 control-label">FileName:</label>
<div class="col-sm-10">
<input name="filename" type="text" class="form-control" id="filename" placeholder="FileName">
</div>
</div>
<!-- TxtArea -->
<div class="form-group">
<label for="txtarea1" class="col-sm-2 control-label">Text:</label>
<div class="col-sm-10">
<textarea type="text" name="txtarea1" id="txtarea1"></textarea>
</div>
</div>
<!-- apath -->
<div class="form-group">
<label for="apath" class="col-sm-2 control-label">Absolute Path:</label>
<div class="col-sm-10">
<input name="savepath" type="text" class="form-control" id="savepath" placeholder="Absolute Path" readonly>
</div>
</div>
</form>
</div>
<!-- modal-footer -->
<div class="modal-footer">
<div class="pull-left">
<div id="info"></div>
</div>
<div class="pull-right">
<a class="btn btn-default " data-dismiss="modal">Cancel</a>
<a class="btn btn-success " onclick="SaveFile()">Save File</a>
</div>
</div>
</div>
</div>
And this is the script I'm trying to get working an a textarea, with CKEditor in use.
//script
<script>
CKEDITOR.replace('txtarea1');
</script>
<script>
function SaveFile()
{
var path = $('#savepath').val()
var filename = $('#filename').val()
var content = $('#txtarea1').val()
alert(content);
}
</script>

You can access your CKEDITOR instance using CKEDITOR.instances.txtarea1 and get the HTML using getData:
CKEDITOR.instances.txtarea1.getData();

How to create a contact form using bootstrap and HTML

I'm trying to build a contact form as I play around with building a website, but I'm not sure I'm doing it right. I'm using a bootstrap template and have the contact form at the bottom of the page. I have a model representing my class and have a controller that, from what I've gathered online, should be handling the clicking of the button, but something is clearly wrong. My background is C++ and Java, so this is a different ballgame, so can anyone tell me what I need to do to get it working? Code below. Thank you!
HomeController.cs:
namespace WebPlay.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(ContactInfo ci)
{
try
{
MailMessage mail = new MailMessage();
mail.To.Add(ci.Email);
mail.From = new MailAddress("email#gmail.com");
mail.Subject = "New Request";
string userMessage = "";
userMessage = "<br/>Name :" + ci.FirstName + " " + ci.LastName;
userMessage = userMessage + "<br/>Phone No: " + ci.ContactInfoID;
userMessage = userMessage + "<br/>Message: " + ci.Comments;
mail.Body = userMessage;
mail.IsBodyHtml = true;
SmtpClient smtp = new SmtpClient();
//SMTP Server Address of gmail
smtp.Host = "smtp.gmail.com";
smtp.Port = 587;
smtp.Credentials = new System.Net.NetworkCredential("xxxxxxx", "xxxxxxx");
// Smtp Email ID and Password For authentication
smtp.EnableSsl = true;
smtp.Send(mail);
ViewBag.Message = "Thank you for contacting us.";
}
catch
{
ViewBag.Message = "Fail";
}
return View();
}
}
Index.cshtml:
#{
ViewBag.Title = "Home Page";
}
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand page-scroll" href="#page-top">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<nav class="navbar navbar-dark bg-inverse">
<a class="page-scroll" href="#about">About</a>
<a class="page-scroll" href="#download">Download</a>
<a class="page-scroll" href="#contact">Contact</a>
</nav>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Greetings...</h1>
<p class="intro-text">I'm Jon. This is my site.<br>Ya know what's up.</p>
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2>About Me</h2>
<p>I'm a programmer, crossfitter, and taco lover. The last 2 don't go togther so well.</p>
</div>
</div>
</section>
<!-- Download Section -->
<section id="download" class="content-section text-center">
<div class="download-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h2>Download Grayscale</h2>
<p>You can download Grayscale for free on the preview page at Start Bootstrap.</p>
Visit Download Page
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2>3...2...1...Contact Me</h2>
<p>Feel free to contact me for a quote or to just say hello!</p>
<form class="form-horizontal" role="form" method="post" action="index.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" value="">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" value="">
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">Phone:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" name="email" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" value="">
</div>
</div>
<div class="form-group">
<label for="exampleSelect1">Reason for contacting me:</label>
<select class="form-control" id="exampleSelect1">
<option>Quote on work</option>
<option>Just for fun</option>
<option>I might have a job for you</option>
</select>
</div>
<div class="radio">
<label><input type="radio" name="optradio">I need a web app</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">I need a Windows app</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">I need a phone app</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">I need nothing</label>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" name="message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
<button class="btn btn-danger" type="reset">Reset</button>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
</div>
</div>
</form>
</div>
</div>
</section>
<!-- Map Section -->
<div id="map"></div>
<!-- Footer -->
<footer>
<div class="container text-center">
<p>Copyright © Your Website 2014</p>
</div>
</footer>
ContactInfo class:
namespace PellegriniP3_1.Models
{
public class ContactInfo
{
public string Comments { get; set; }
public int ContactInfoID { get; set; }
public string Email { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public bool IsPhoneApp { get; set; }
public bool IsWebApp { get; set; }
public bool IsWindowsApp { get; set; }
public string TypeOfRequest { get; set; }
}
}

<form class="form-horizontal" role="form" method="post" action="index.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
<?php echo "<p class='text-danger'>$errName</p>";?>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
<?php echo "<p class='text-danger'>$errEmail</p>";?>
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" name="message"><?php echo htmlspecialchars($_POST['message']);?></textarea>
<?php echo "<p class='text-danger'>$errMessage</p>";?>
</div>
</div>
<div class="form-group">
<label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
<?php echo "<p class='text-danger'>$errHuman</p>";?>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<?php echo $result; ?>
</div>
</div>
</form>
Please check this link:-https://bootstrapbay.com/blog/working-bootstrap-contact-form/

Please check demo from following url, its working :
1.https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form

How to set radio button checked initially in AngularJs?

I have created two tabs where the tabs gets navigated by checking radio buttons. One of the two tabs will be active initially but I need to have the corresponding radio button too checked initially.
<div ng-app="myApp">
<div class="account-tab-selector" id="tabs" ng-controller="TabsCtrl">
<ul>
<li class="col-sm-6 text-center" ng-repeat="tab in tabs">
<label for="{{tab.url}}">
<input ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)" type="radio" name="radio" id="{{tab.url}}" ng-model="choice.isSelected" value="true">{{tab.title}}</label>
</li>
</ul>
<div class="clearfix"></div>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<script type="text/ng-template" id="one.tpl.html">
<div class="customer-reg-form" id="new_customer_form">
<div class="sign-up-fb">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>
Sign Up With Facebook</a>
</div>
<div class="reg-form">
<div class="or-separator"><span>OR</span></div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="fname">First Name<span>*</span></label>
<div class="input-group">
<input name="firstname" id="fname">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="lname">Last Name<span>*</span></label>
<div class="input-group">
<input name="lastname" id="lname">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="mnumber">Mobile Number<span>*</span></label>
<div class="input-group">
<input name="mobile-number" id="mnumber">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="dlocation">Default Location<span>*</span></label>
<div class="input-group">
<select name="default-location" class="dropstyle">
<option></option>
<option>Kansas</option>
</select>
</div>
</div>
<div class="col-sm-12 form-group">
<label for="email">Email Address<span>*</span></label>
<div class="input-group">
<input name="email" id="email">
</div>
</div>
<div class="col-sm-12 form-group">
<label for="password">Password<span>*</span></label>
<div class="input-group">
<input name="password" id="password">
</div>
</div>
</div>
<div class="agreement">By clicking "Register" below, you are agreeing to our Terms of Service agreement.</div>
</div>
</div>
</script>
<script type="text/ng-template" id="two.tpl.html">
<div class="customer-reg-form" id="existing_customer_form">
<div class="sign-up-fb">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>
Login With Facebook</a>
</div>
<div class="reg-form">
<div class="or-separator"><span>OR</span></div>
<div class="row">
<div class="col-sm-12">
<label for="mnumber">Email Address<span>*</span></label>
<input id="mnumber">
</div>
<div class="col-sm-12">
<label for="mnumber">Password<span>*</span></label>
<input id="mnumber">
</div>
</div>
<div class="forgot-pwd">Forgot Password?</div>
</div>
</div>
</script>
</div>
var app = angular.module("myApp", []);
app.controller('TabsCtrl', ['$scope', function($scope) {
$scope.tabs = [{
title: 'I am a new customer',
url: 'one.tpl.html',
isSelected: true
}, {
title: 'I have an account',
url: 'two.tpl.html'
}];
$scope.currentTab = 'one.tpl.html';
$scope.onClickTab = function(tab) {
$scope.currentTab = tab.url;
};
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
};
}]);
Jsfiddle here

You have bound your radio button with $scope.choice.isSelected, you can set the value for this in controller or in ng-init it self.
Can you please add below two lines in your controller?
$scope.choice={};
$scope.choice.isSelected = "true";
Or in much better way, you can modify your tag like:
<li class="col-sm-6 text-center" ng-repeat="tab in tabs">
<label for="{{tab.url}}">
<input ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)" type="radio" name="radio" id="{{tab.url}}" ng-model="tab.isRadioChecked" value="true">{{tab.title}}</label>
</li>
And in your controller.
$scope.tabs = [{
title: 'I am a new customer',
url: 'one.tpl.html',
isSelected: true,
isRadioChecked: "true"
}, {
title: 'I have an account',
url: 'two.tpl.html'
}];

You can do this simply by setting the checked attribute for the input. For example:
<input type="radio" checked> This is a radio button