How to submit text input inside <div> class element (wysiwyg editor) - javascript

am using summernote (wysiwyg) text editor. In previous editors value could be submitted using <textarea>. The current editor only use <div> element and if I replace the <div> class with <textarea> the editor stop to work.
The summernote code is
And my textarea is <textarea name='candidate_description'></textarea>
My form is submitted by JavaScript function
<form class="form-inline" role="form" action="#" method="post" accept- charset="utf-8" id="electroal" enctype="multipart/form-data">
<script>
function submitForm(action){
document.getElementById('electroal').action = action;
document.getElementById('electroal').submit();
}
</script>
<i class="fa fa-refresh"></i> <b>Refresh</b>
<button type="submit" onclick="submitForm('<?php echo $link[0]; ?>')"></i>Save</button>
<button type="submit" onclick="submitForm('<?php echo $link[1]; ?>')"></i>Cancel</button>
<div class="form-group input-xxx-x-wider">
<h6><strong>Description (500 max) <i class="glyphicon glyphicon-star red" ></i></strong></h6>
<div class="widget-main no-padding">
<div id="summernote"></div>
</div>
<textarea name="candidate_description"></textarea>
</div>
<div class="form-group input-x-wider">
<h6><strong>Status <i class="glyphicon glyphicon-star red" ></i></strong>| <i>Enable to use or Disable to use later </i></h6>
<label>
<input name="candidate_status" value="9" type="radio" checked="checked" class="colored-success">
<span class="text"> Enabled</span>
</label>
<label>
<input name="candidate_status" value="10" type="radio" class="colored-danger">
<span class="text"> Disabled</span>
</label>
</div>
</form>
I have zero knowledge in Jquery but I can try to catch up please help me.
->My main goal is to submit the the form with the text edited inside the <div id="summernote">some edited text here</div> element
I used function submitForm(action) to submit form because the links placed on onclick="submitForm('<?php echo $link[0]; ?>')" are dynamic and changes according to who login.
On web browser it looks like
<form class="form-inline" role="form" action="#" method="post" accept-charset="utf-8" id="electroal" enctype="multipart/form-data">
<script>
function submitForm(action){
document.getElementById('electroal').action = action;
document.getElementById('electroal').submit();
}
</script>
<button type="submit" onclick="submitForm('http://localhost/ANU_ELECTRAL1/candidate/save')">Save</button>
<button type="submit" onclick="submitForm('http://localhost/ANU_ELECTRAL1/candidate')">Cancel</button>
<div class="form-group input-xxx-x-wider">
<h6><strong>Description (500 max) <i class="glyphicon glyphicon-star red" ></i></strong></h6>
<div class="widget-main no-padding">
<div id="summernote"></div>
</div>
<textarea name="candidate_description"></textarea>
</div>
<div class="form-group input-x-wider">
<h6><strong>Status <i class="glyphicon glyphicon-star red" ></i></strong>| <i>Enable to use or Disable to use later </i></h6>
<label>
<input name="candidate_status" value="9" type="radio" checked="checked" class="colored-success">
<span class="text"> Enabled</span>
</label>
<label>
<input name="candidate_status" value="10" type="radio" class="colored-danger">
<span class="text"> Disabled</span>
</label>
</div>
</form>

Related

Multiple form submit with one button

I have two form now which needs to submitted differently right now i want the both the forms to be submitted with single submit button.
<div class="row m-b-4">
<div class="col-md-12">
<div class="form-group label-static type-text" :class="{'has-error': errors && (errors.final_billing || errors.final_billing_was_added)}">
<label class="control-label" for="id_final_billing" v-show="_.isEmpty(billingInfo) || !billingInfo.has_close_out" v-cloak>
Final Billing <span v-show="_.isEmpty(billingInfo) || !billingInfo.has_close_out" class="req" v-cloak>*</span>
</label>
<div v-show="_.isEmpty(billingInfo) || !billingInfo.has_close_out" v-cloak>
<div class="radio" style="display: inline-block;">
<label>
<input type="radio" name="final_billing" :value="true" v-model="form.final_billing" />
<span class="circle"></span>
<span class="check"></span>Yes
</label>
</div>
<div class="radio m-l-4" style="display: inline-block;">
<label>
<input type="radio" name="final_billing" :value="false" v-model="form.final_billing" />
<span class="circle"></span>
<span class="check"></span>No
</label>
</div>
</div>
{% include "m_close_out_form.html" %}
{% include "a_close_out_form.html" %}
{% include "d_close_out_form.html" %}
when we select final billing one of these forms gets opened based on some condition
<button type="submit" form="entry" class="btn btn-primary btn-raised">Submit</button>
I have the below button in other html file
<button type="submit" form="close-out-form" class="btn btn-primary btn-raised">Approve</button>
So when i click on the Submit button with form="entry" i need to make submit on both the forms form="entry" and form="close-out-form"

Thymeleaf foreach loop with button event inside

I have used the Thymeleaf foreach to traverse all posts where each post has a "Comment" button. I would like to display the comment list after click this "Comment" button.
The default is hidden
The following is my codes:
<div th:each="post:${posts}">
<div class="panel panel-default" th:object="${post}">
<div class="panel-body">
<p th:text="*{user.username}">username</p>
<p th:text="*{createTime}">time</p>
<p th:text="*{content}">content</p>
<div>
<form th:action="#{/posts/liked/input}" method="post"
style="display: inline">
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">like</button>
</form>
<button class="btn btn-primary commentBt"
style="display: inline">Comment</button>
</div>
</div>
<!-- This is the part I want to show after click Comment -->
<div style="display: none">
<form th:action="#{/posts/comment/input}" method="post">
<textarea class="form-control" name="content" id="contentId"
rows="1"></textarea>
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">Reply</button>
</form>
<div th:each="comment:*{comments}">
<div th:object="${comment}">
<p th:text="*{content}">content</p>
</div>
</div>
</div>
</div>
</div>
How to do this in the foreach loop?
You can do this by using js, below are example codes.
First, you need to add onclick to commit button:
<button class="btn btn-primary commentBt"
style="display: inline" onclick="showDiv()">Comment</button>
Then, get the hidden div and edit function showDiv to dispaly the div.
<!-- set id -->
<div id="test" style="display: none">
<script>
<!-- function to change display to block -->
function showDiv(){
var div = document.getElementById("test");
div.style.display="block";
}
</script>
Hope this will help you!

AngularJS 1 form validation in the loop

i have a problem with angulare code. I have made a small form structure with ng reapet . When i removed one of element every element down of them are not show the "not valid" message . All up of them work fine but down of remove not showing info not given the false of this data-ng-show="Zhf.w{{key}}.$error.pattern" why ng show not taked false.
<form name="zhf" class="form-horizontal">
<div data-ng-repeat="(key, i) in vm.items.Info | limitTo: (vm.NumberOfDays)">
<div class="col-sm-3">
<input type="text" class="form-control" id="w{{key}}" name="w{{key}}" ng-model="vm.item[key].w" placeholder="0" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<p style="color: #a94442" class="text-danger" data-ng-show="Zhf.w{{key}}.$error.pattern">
<span>Not a valid number!</span>
</p>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-danger btn-sm " ng-click="vm.delete(key)">remove</button>
</div>
</div>
</form>
vm.delete = function(index) {
vm.items.Info.splice(index, 1);
vm.item.splice(index, 1);
vm.NumberOfDays -= 1;
}
I have updated your ng-repeat section to validate form and sample is HERE
<form novalidate="novalidate" name="inputValidate">
<div ng-repeat="field in fields.test">
<div style="width:600px">
<div ng-form name="validMe" style="width:58%;float:left">
<input id="input{{$index}}" name="input{{$index}}" type="text" ng-model="field.value" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.pattern">Not a valid number!</span>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.required ">Number Required!</span>
</div>
<div style="width:20%;float:left">
<input type="button" value="Remove" ng-click="delete($index)"/>
</div>
</div>
</div>
</form>

Clear form on `mfp-close` in magnific popup

I am trying to clear all the errors and make input values blank on closing of magnific popup.
I inspected the class of 'close' button and tried to fire jquery event but it is not working.
$("button.mfp-close").on('click',function(){
console.log("Closed");
});
When i click on mfp-close then there is no log in console.
HTML snippet is:
<div class="mfp-content"><div id="customdesign" class="white-popup mfp-with-anim">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p><span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p><form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst"
placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp- close">×</button>
</div></div>
How can we handle this operation??
First of all, if you are using bootstrap framework, use bootstrap modal instead magnific popup, no need for extra js librabry, you can achieve same with bootstrap modal
in your HTML, button you have class="mfp- close" it should be class="mfp-close" as you are binding it like this $("button.mfp-close")
To reset form on pop-up close, you can achieve it with $('form')[0].reset();
Script
$("button.mfp-close").on('click',function(){
alert("Closed");
$('form')[0].reset();
});
HTML
<a class="popup-modal" href="#customdesign">Open modal</a>
<div class="mfp-content">
<div id="customdesign" class="white-popup-block mfp-hide">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p>
<span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p>
<form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst" placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
</div>
Working fiddle example

php script is not able to verify data using anchor tag

I have a login form and i know how to submit data for verifying from database using submit button but i want to submit my data using anchor tag and it must be verified using php, what i did is as follows and it's not working :
index.php
<form class="sign-form" action="login_process.php" method="post" id="lg" name="form">
<fieldset>
<div class="row">
<span class="text">
<input type="email" name="email"/>
</span>
<span class="text">
<input type="password" name="pwd"/>
</span>
<input type="submit" value="Go" class="submit" name="submit" />
</div>
<div class="row">
<label for="check-1">Remember me</label>
<input type="checkbox" class="check" id="check-1" />
Forgot your password?
<?php
if(isset($_GET['loginFailed']) && !empty($_GET['loginFailed'])) {
$msg=$_GET['loginFailed'];
echo $msg;
}
?>
</div>
</fieldset>
<div class="action_btns">
<div class="one_half">
<i class="fa fa-angle-double-left"></i> Back
</div>
<div class="one_half last">
login
</div>
</div>
</form>
login_process.php
<?php
include("connection.php");
if(isset($_POST['submit'])) {
$email=$_POST['email'];
$pwd=$_POST['pwd'];
$password=md5($pwd);
$sql="SELECT * FROM `registration` where Email='$email' AND Password='$password'";
$van=mysqli_query($var,$sql);
$count=mysqli_num_rows($van);
if ($count==1) {
echo"hello";
session_start();
$_SESSION['email'] = $email;
header("location: login_success.php");
} else {
header("location:index.php?loginFailed=wrong password or email");
}
mysqli_close($var);
}
?>
The problem is the name of the controls.
Having a control named submit in your form is overriding form.submit();
The error in the browser console is that .submit() is not a function.
So please, just change the name of the submit button with something else and it is working good.
<form class="sign-form" action="login_process.php" method="post" id="lg" name="form">
<fieldset>
<div class="row">
<span class="text">
<input type="email" name="email"/>
</span>
<span class="text">
<input type="password" name="pwd"/>
</span>
<input type="submit" value="Go" name="submit" class="submit" id="btnSubmit" />
</div>
<div class="row">
<label for="check-1">Remember me</label>
<input type="checkbox" class="check" id="check-1" />
Forgot your password?
<?php
if(isset($_GET['loginFailed']) && !empty($_GET['loginFailed'])) {
$msg=$_GET['loginFailed'];
echo $msg;
}
?>
</div>
</fieldset>
<div class="action_btns">
<div class="one_half">
<i class="fa fa-angle-double-left"></i> Back
</div>
<div class="one_half last">
Register
</div>
</div>
</form>
I understand that you want to use an anchor to submit the form instead of a button. Several solutions exists for that, but let me say to you that using an anchor to submit a form requires the use of JavaScript to hook up the event. It's not safe in that if a user has JavaScript disabled, you won't be able to submit the form. It's better if you make a submit button looks like an anchor, like following:
<input type="submit" class="submitAnchor" value="Submit">
With this minimal style declaration:
.submitAnchor {
background-color: transparent;
border: none;
text-decoration: underline;
color: blue;
cursor: pointer;
}
Now, if you do really insist on using an anchor, you can e.g:
1.Event forwarding, activate the button submit event click when the anchor event click is activated:
<form name="form_lg" action="login_process.php" method="post" class="sign-form">
...
<input type="submit" name="submit" value="Go" class="submit">
<a href="#" onclick="form_lg['submit'].click()" class="btn btn_red">
Register
</a>
2.In case you don't want to forward events, you can e.g add a hidden input to store actions, like submit, back, etc. Then, you can catch the action value in the login_process.php file:
<form name="form_lg" action="login_process.php" method="post" class="sign-form">
...
<input type="hidden" name="action" value="" />
<a href="javascript:form_lg.submit()" onclick="form_lg['action'].value='submit'"
class="btn btn_red">Register</a>
In this case, you should change this line in login_process.php file. Instead of:
if(isset($_POST['submit'])){
Do this:
if($_POST['action']=='submit') {
Hope it's helpful!

Categories