Develop Reference

Why tinymce looks ugly if I put it inside <div class="row"></div>?

I have a problem with TinyMCE, it looks like in the picture:
enter image description here
my HTML is:
<form action="#" method="post" id="create-product">
<div class="row">
<div class="col-4">
<label for="#product-name">Product name</label>
</div>
<div class="col-8">
<input type="text" name="product-name" class="form-control" id="product-name" placeholder="Product name" required>
</div>
<div class="col-4">
<label for="#product-category">Product category</label>
</div>
<div class="col-8">
<select name="product-category" class="selectpicker form-control" id="product-category" required>
<option value="null">--none--</option>
</select>
</div>
<div class="col-4">
<label for="#product-description">Product description</label>
</div>
<div class="col-8">
<textarea name="product-description" id="product-description"></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-success create-product-btn w-25 m-auto"><i class="far fa-save"></i>Save</button>
</div>
</div>
</form>
But if I remove tag, it will fix the issue whitout knowing the reason.
I'm Using Tinymce 4.7.13 and bootstrap 4,
Thanks.

It was this style who caused the problem:
.col-4 ,.col-8{
display:flex;
align-item:center
}

How to start automatic download of pdf on after form submission

I am new into PHP and Html , I have a form where I am able to post details using third party service.I want to make this form submission in such a way that after submission this should start pdf download automatically.It should perform 2 actions on same button click. I have gone through many solutions but I am not able to make this work. Here is my form
<div class="modal-body">
<div class="media-container-column" data-form-type="formoid">
<div data-form-alert="" hidden="" class="align-center" > Thanks for filling out the form use this link to Download </div>
<form class="mbr-form" action="https://mobirise.com/ " method="post" data-form-title="Mobirise Form"><input type="hidden" name="email" data-form-email="true" value="bUMCs/mtytHWYRo/XjN7tA1PqfT+NB00KjPTWZfuYXvKQmJxQUOr1gzeKJUJwLqxqXI/Euh3h4TzMmnq0FW5UjTC1AjsnumlJFTc7U5521K+f6PwqF4lRJdVha0cCPLW" data-form-field="Email">
<div data-for="name">
<div class="form-group">
<input type="text" class="form-control px-3" name="name" data-form-field="Name" placeholder="Name" required="" id="name-header15-c">
</div>
</div>
<div data-for="email">
<div class="form-group">
<input type="email" class="form-control px-3" name="email" data-form-field="Email" placeholder="Email" required="" id="email-header15-c">
</div>
</div>
<div data-for="phone">
<div class="form-group">
<input type="tel" class="form-control px-3" name="phone" data-form-field="Phone" placeholder="Phone" id="phone-header15-c">
</div>
</div>
<span class="input-group-btn"><button onClick="header.php" type="submit" class="btn btn-secondary btn-form display-4">Download</button></span>
</form>
</div>
</div>
This form submission is working fine, how can I start downloading pdf after this, any sample code in javascript or php would be helpful.Thanks

You need to add an id="SampleForm" in your form.
<div class="modal-body">
<div class="media-container-column" data-form-type="formoid">
<div data-form-alert="" hidden="" class="align-center" > Thanks for filling out the form use this link to Download </div>
<form id="SampleForm" class="mbr-form" action="https://mobirise.com/ " method="post" data-form-title="Mobirise Form"><input type="hidden" name="email" data-form-email="true" value="bUMCs/mtytHWYRo/XjN7tA1PqfT+NB00KjPTWZfuYXvKQmJxQUOr1gzeKJUJwLqxqXI/Euh3h4TzMmnq0FW5UjTC1AjsnumlJFTc7U5521K+f6PwqF4lRJdVha0cCPLW" data-form-field="Email">
<div data-for="name">
<div class="form-group">
<input type="text" class="form-control px-3" name="name" data-form-field="Name" placeholder="Name" required="" id="name-header15-c">
</div>
</div>
<div data-for="email">
<div class="form-group">
<input type="email" class="form-control px-3" name="email" data-form-field="Email" placeholder="Email" required="" id="email-header15-c">
</div>
</div>
<div data-for="phone">
<div class="form-group">
<input type="tel" class="form-control px-3" name="phone" data-form-field="Phone" placeholder="Phone" id="phone-header15-c">
</div>
</div>
<span class="input-group-btn"><button onClick="header.php" type="submit" class="btn btn-secondary btn-form display-4">Download</button></span>
</form>
</div>
</div>
Then you need to add some code to process download on form Submit event.
<script>
var pdfUrl = "https://example.com/link-to-your-pdf";
$('#SampleForm').on('submit', function () {
window.open(pdfUrl, '_blank');
});
</script>

You'll have to handle submission with Javascript, instead of the default one.
There is some documentation about sending form submission throught javascript:
https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript

Having Trouble Making Google recaptcha reequired in HTML form

It seems that this script is working and stopping the submit button from working until after the captcha v2 has been verified.
I tried following some guides from previous questions but nothing seems to work for me.
Could someone shed some light on me? Thanks.
<form id="myForm" class="contact-form" action="php/send-email.php" method="post" novalidate>
<div class="row">
<div class="column width-6">
<input type="text" name="fname" class="form-fname form-element large" placeholder="First Name*" tabindex="1" required>
</div>
<div class="column width-6">
<input type="text" name="lname" class="form-lname form-element large" placeholder="Last Name" tabindex="2">
</div>
<div class="column width-6">
<input type="email" name="email" class="form-email form-element large" placeholder="Email address*" tabindex="3" required>
</div>
<div class="column width-6">
<div class="field-wrapper">
<div class="form-select form-element">
<select name="budget" tabindex="4" class="form-aux" data-label="Project Type">
<option selected="selected" value="">Project Type</option>
<option value="">Website Project</option>
<option value="">Marketing</option>
<option value="">Branding</option>
<option value="">Other</option>
</select>
</div>
</div>
</div>
<div class="column width-6">
<input type="text" name="honeypot" class="form-honeypot form-element large">
</div>
</div>
<div class="row">
<div class="column width-12">
<div class="field-wrapper">
<textarea name="message" class="form-message form-element large" placeholder="Message(Include phone number if needed)*" tabindex="7" required></textarea>
</div>
</div>
<div class="column width-12">
<div class="g-recaptcha"
data-callback="onCompleted"
data-sitekey="6Legq1IUAAAAANF4DoxqEkVyS3jY0N4UQKDUPuBa">
</div>
<input type="submit" value="Send Email" class="form-submit button medium bkg-theme bkg-hover-theme color-white color-hover-white" onsubmit="check_if_capcha_is_filled">
</div>
</div>
</form>
<script>
$('#myForm').submit(function(event) {
console.log('form submitted.');
if (!grecaptcha.getResponse()) {
console.log('captcha not yet completed.');
event.preventDefault(); //prevent form submit
grecaptcha.execute();
} else {
console.log('form really submitted.');
}
});
onCompleted = function() {
console.log('captcha completed.');
$('#myForm').submit();
alert('wait to check for "captcha completed" in the console.');
}
Yes the stript is closed I don't know why the end tag isn't showing.

onClick new input box add not working angularJs issue

I want to add dynamic form fields in the database using PHP. I have used angular to add dynamic form fields. The thing is when I am trying to insert this data into the database only last form field is inserting in the database. SO, I used array and loop to increment and update this form field into the database. but somehow query is not working properly and data is also not inserting into the database. can you tell me what is wrong here? I am stuck. Please help. Thanx in advance.
Here is my code:
<form method="post">
<div class="form-group " >
<input type="text" placeholder="Campaign Name" class="form-control c-square c-theme input-lg" name="camp_name"> </div>
<div class="row col-md-12">
<div class="form-group col-md-6">Start Date
<input type="date" placeholder="start date" class="form-control c-square c-theme input-lg" name="start_date">
</div>
<div class="form-group col-md-6">End Date
<input type="date" placeholder="end date" class="form-control c-square c-theme input-lg" name="end_date"> </div>
</div>
<div class="row col-md-12">
<div class="form-group">
<label for="inputPassword3" class="col-md-8 control-label">Select Store</label>
<div class="col-md-6 c-margin-b-20">
<select class="form-control c-square c-border-2px c-theme" multiple="multiple" name="store">
<option value="1">All Stores</option>
<option value="2">Phoenix Mall</option>
<option value="3">1MG Mall</option>
<option value="4">Orion Mall</option>
</select>
</div>
</div>
</div>
<div class="row col-md-12" ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<label for="inputPassword3" class="col-md-1 control-label">Elements</label>
<div class="form-group col-md-3 ">
<input type="text" placeholder="Campaign Name" ng-model="choice.name" class="form-control c-square c-theme input-lg" name="ele">
</div>
<label for="inputPassword3" class="col-md-1 control-label">Quantity</label>
<div class="form-group col-md-3" >
<select class="form-control c-square c-border-2px c-theme" name="store">
<option value="1">All Stores</option>
<option value="2">Phoenix Mall</option>
<option value="3">1MG Mall</option>
<option value="4">Orion Mall</option>
</select>
</div>
<button class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" ng-click="addNewChoice()" >add</button>
<button ng-show="$last" ng-click="removeChoice()" class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" >Remove</button>
</fieldset>
</div>
</div>
</div>
<div class="form-group">
<input type="text" placeholder="Description" class="form-control c-square c-theme input-lg" name="description">
</div>
<input class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" value="Submit" type="submit">
</form>
// angular script
<script type="text/javascript">
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
</script>

What you can do is simply take input type and put its type="button". It won't refresh your page. You were not specifying any type that's why it was taking type="submit" and the whole page was reloading. So avoid this.

Try this :
<button type="button" class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold
c-btn-square" ng-click="addNewChoice()"> add</button>
You should always specify button type, otherwise, it will take submit by default and that's why it is refreshing the page.
Hope this helps

Serialize data in AJax

I having trouble for adding a multiple Sub Author in my form, I have a form that you can add a sub author. The code works if I only submit one sub author but if multiple sub author the codes not working.
Here's the code of my text box in FormAddBook.
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
And when you want to add another sub author, text box will appear when yun click the Add Sub Author with the same name of textbox.
The codes work when one sub author only but if multiple sub authors the codes not working.
Here's the code of my jquery.
$.ajax({
type: 'POST',
url: 'proc/exec/exec-insert-book.php',
data: $('#FormAddBook').serialize(),
});
Does the Serialize cannot recognize the another text box?
Sorry for my bad english.
Here's the HTML Form code.
<form id="FormAddBook">
<div class="modal-body">
<div class="row">
<div class="col-lg-6 hide" >
<label>Accession No:</label>
<div class="form-group">
<input type="text" class="form-control" placeholder="Accession No" name="AccessionNo" readonly/>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>ISBN:</label>
<input type="text" class="form-control" placeholder="ISBN" name="BookISBN" maxlength="20" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Date Book Added:</label>
<div id="DateBookAdded" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="Date Book Added" name="DateBookAdded" readonly/>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Archived Date Extension:</label>
<div id="BookAuthLast" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="" name="ArchivedDateExt" readonly/>
</div>
</div>
</div>
<div id="subauthcont">
<div class="subAuthors col-lg-12">
<div class="form-group">
<label>Sub authors:</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
<span class="input-group-btn" disabled>
<button id="btnAddSubAuth" class="btn btn-info" type="button" ><i class="fa fa-user" aria-hidden="true"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="form-group">
<label>Subject:</label>
<select class="form-control" name="Description">
<option>Generalities</option>
<option>Philosophy and Psychology</option>
<option>Religion</option>
<option>Social Science</option>
<option>Languages</option>
<option>Science</option>
<option>Technology</option>
<option>Arts and Recreation</option>
<option>Literature</option>
<option>Geography and History</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>Status:</label>
<select class="form-control" name="Status" readonly>
<option>Available</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btnSave2" type="submit" class="btn btn-primary asd">Save</button>
</div>
</form>
</div>