I have the following following form where users can add and delete form fields
(i.e. Input type text and textarea).
Further, I've added CKEDITOR as WYSIWYG for all textareas in the form. The below code snippet does generate the new fields successfully and WYSIWYG appears in all the textareas, but I cant input data into the newly generated textareas. I've also checked console and there are no any errors.
What am I missing here? I would be very thankful if anyone could point out the errors I've made.
View on jsFiddle
$(document).ready(function() {
var allEditors = document.querySelectorAll('.editor');
for (var i = 0; i < allEditors.length; ++i) {
CKEDITOR.replace(allEditors[i]);
}
//section add limit
var maxGroup = 10;
//add more section
$(".addMore").click(function() {
if ($('body').find('.fieldGroup').length < maxGroup) {
var fieldHTML = '<div class="row fieldGroup">' + $(".fieldGroupCopy").html() + '</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
} else {
alert('Maximum ' + maxGroup + ' sections are allowed.');
}
});
//remove fields
$("body").on("click", ".remove", function() {
$(this).parents(".fieldGroup").remove();
});
});
<!-- Bootstrap css library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap js library -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.ckeditor.com/4.11.3/standard/ckeditor.js"></script>
<div class="container">
<form method="post">
<div class="row fieldGroup">
<div class="col-md-10 ">
<div class="form-group">
<label for="sectionTitle">Section Title</label>
<input type="text" name="sectionTitle" id="sectionTitle" class="form-control">
</div>
</div>
<div class="col-md-2 ">
<a href="javascript:void(0)" class="btn btn-success addMore">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</a>
</div>
<div class="col-md-12 ">
<div class="form-group">
<h4>Section Content</h4>
<textarea name="sectionContent[]" class="editor"></textarea>
</div>
</div>
</div>
<div class="row fieldGroupCopy" style="display: none">
<div class="col-md-10 ">
<div class="form-group floating-label">
<label for="sectionTitle">Section Title</label>
<input type="text" name="sectionTitle" id="sectionTitle" class="form-control">
</div>
</div>
<div class="col-md-2 ">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
<div class="col-sm-12 ">
<div class="form-group">
<h4>Section Content</h4>
<textarea name="sectionContent[]" class="editor"></textarea>
</div>
</div>
</div>
</form>
</div>
I don't think you can create an editor by simply copying the HTML from another instance.
The structure will be duplicated, but the functionality will not.
You'll need to initialize the editor on each <textarea> you add to the page.
In the code below, notice that I've removed the "editor" class from the template HTML. I did that to exclude the template's textarea from the initial editor initialization. New editors will be initiated when they are added to the page.
Also, since you're using jQuery, I suggest using jQuery all the way through for DOM manipulation.
I've added the ckeditor jQuery adapter script.
$(function() {
//section add limit
var maxGroup = 10;
// initialize all current editor(s)
$('.editor').ckeditor();
//add more section
$(".addMore").click(function() {
// define the number of existing sections
var numGroups = $('.fieldGroup').length;
// check whether the count is less than the maximum
if (numGroups < maxGroup) {
// create new section from template
var $fieldHTML = $('<div>', {
'class': 'row fieldGroup',
'html': $("#fieldGroupTemplate").html()
});
// insert new group after last one
$('.fieldGroup:last').after($fieldHTML);
// initialize ckeditor on new textarea
$fieldHTML.find('textarea').ckeditor();
} else {
alert('Maximum ' + maxGroup + ' sections are allowed.');
}
});
//remove fields
$("body").on("click", ".remove", function() {
$(this).parents(".fieldGroup").remove();
});
});
#fieldGroupTemplate {
display: none;
}
<!-- Bootstrap css library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap js library -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- ckeditor library and adapter for jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.3/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.3/adapters/jquery.js"></script>
<div class="container">
<form method="post">
<div class="row fieldGroup">
<div class="col-md-10 ">
<div class="form-group">
<label for="sectionTitle">Section Title</label>
<input type="text" name="sectionTitle" id="sectionTitle" class="form-control">
</div>
</div>
<div class="col-md-2 ">
<a href="javascript:void(0)" class="btn btn-success addMore">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</a>
</div>
<div class="col-md-12 ">
<div class="form-group">
<h4>Section Content</h4>
<textarea name="sectionContent[]" class="editor"></textarea>
</div>
</div>
</div>
</form>
</div>
<div class="row" id="fieldGroupTemplate">
<div class="col-md-10 ">
<div class="form-group floating-label">
<label for="sectionTitle">Section Title</label>
<input type="text" name="sectionTitle" id="sectionTitle" class="form-control">
</div>
</div>
<div class="col-md-2 ">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
<div class="col-sm-12 ">
<div class="form-group">
<h4>Section Content</h4>
<textarea name="sectionContent[]"></textarea>
</div>
</div>
</div>
I had trouble getting ckeditor to work in a stack snippet.
I get an error about accessing cross-origin iframes:
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
So, here's a demonstration on jsFiddle.
For further interest, see this GitHub discussion about automatically initializing editors that are dynamically added to the page. The discussion includes sample code for initializing new editors when they are added, as well as the possibility of using mutation observers to automatically detect and intialize new editors.
Related
Dropzone and Javascript isn't working on bootstrap Modal i'm calling Modal through ajax.Because i have hundreds of records i don't want to place Modal in foreach so i used ajax on button click controller method hits and return a new view and that view i'm calling and main view where modal will be displayed. Modal is working fine but i have used dropzone plugin which isn't working and even no other js code is working neither css.
MainView.blade.php
On button Click the following script hits
this the my main view where i am calling Bootstrap Modal
<div class="modal" id="Edit-SpecsModal-products">
<div class="modal-dialog modal-max ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body text-center">
<span class="f-24 black bold">Edit Product</span>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body p0">
<div class="product_details" id="product_details"></div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn-bg2" data-dismiss="modal">Cancel</button>
<input type="button" class="btn-bg1" data-dismiss="modal" onclick="submitForms()">Add to Project</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.edit_product_model').click(function(){
var product_id = $(this).attr("id");
$.ajax({
url:"{{url('architecture-edit-product')}}/" + product_id ,
method:"post",
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
data:{product_id:product_id},
success:function(data){
$('#product_details').html(data.html);
$('#Edit-SpecsModal-products').modal("show");
}
});
});
});
</script>
Controller
public function editArchitectureProductSave(Request $request, $id){
$data['products'] = Product::with('productImages')->where('id',$id)->get();
$returnHTML = view('manufacturer::projects.includes.ajaxhtmlviews.edit-product-Bootstrap-modal', $data)->render();
return response()->json( ['html'=> $returnHTML], 200);
edit-product-Bootstrap-modal.blade.php
<div class="max-wid">
<div class="pl-3 pr-3 mb-5 p0">
<div class="">
<div class=" f-column in">
<div class="">
<ul class="nav nav-tabs nav-border-producttab">
<li class="nav-item ">
<a class="nav-link active" data-toggle="tab" href="#add_new_products2">Add New Product</a>
</li>
</ul>
</div>
<div class="">
<div >
<div class=" mt-3">
<!-- Nav tabs -->
<!-- Tab panes -->
<div class="tab-content model-hit">
<div id="add_new_products2" class="container tab-pane active">
<br>
<div class=" row">
<div class="col-sm-6">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">
Product Documents
<div class="clearfix"></div>
<div class="gry f-13">(Specs, CHPS Certificate, Product Data Sheet)</div>
</div>
<div class="my-form1 text-center" id="my-for2">
<?php echo Form::open(array('route' => 'architecture-product-file-save', 'files' => true, 'method' => 'PUT', 'id' => 'product-file-form', 'class' => 'dropzone', 'name' => 'formName')); ?>
<input type="hidden" name="last_product_inserted_id" id="last_product_inserted_id" value="">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div id="preview-template" style="display: none;">
<div class="dz-preview dz-file-preview" style="width: 20% ;">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-file-type">
<br />
<select name="file_type" class="dz-file-type-select" id="file_type">
<option value="">Select File Type</option>
<option value="datasheet_file">Datasheet</option>
<option value="cad_file">CAD file</option>
<option value="bim_file">BIM file</option>
<option value="leed_file">LEED Statement</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">Product Images</div>
<div class="my-form1 text-center" id="my-for3">
<input form="product-form" id="file-input" name="product_images[]" type="file" multiple>
<div id="preview"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<?php echo Form::open(array('route' => 'architecture-product-save', 'files' => true, 'id' => 'product-form')) ?>
<input type="hidden" name="method_type" value="PUT">
<input type="hidden" name="id" value="{{$products['0']->id}}">
<div class="col-sm-12 p-0 mrg_modal_produt">
<input name="name" type="text" class="form-control input_product_modal" value="{{$products['0']->name}}">
<input name="" type="text" class="form-control input_product_modal" value="Manufacturer Name">
<input type="hidden" name="project_slug" value="{{Request::segment(2)}}">
<textarea name="description" class="form-control input_product_modal" cols="" rows="">{{$products['0']->description}}</textarea>
<input name="leed_file_url" type="text" class="form-control input_product_modal" value="{{$products['0']->leed_file_url}}">
</div>
<div id="product_images_div"></div>
<input type="submit" class="btn btn-info" value="Save" id="save-product-form-submit" style="display:hidden;">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code is working fine modal is calling but problem is only when modal from edit-product-Bootstrap-modal.blade.php is called through the script used in mainView.blade.php for Bootstrap Modal is not working
Check if you have disabled autoDiscvoer for dropzone.js on Dropzone.autoDiscover
if its false set its value as true (Dropzone.autoDiscover = true;).
If thats also not working try manually initializing the dropzone by attaching it to the model.
myDropDown = new Dropzone('#product_details', {<options>})
I had a similar problem with modals, where my datepicker.js input field wouldn't work when I click it, but id didn't show any errors. I did some digging, and apparently, modals don't properly load scripts defined in your view (or wherever). I managed to do this, by initializing the same script again, but with another name, in my app.js, something like this:
$(document).ready(function () {
$('.datepickerCustom').datepicker({
//datepicker logic
}).on('changeDate', function (e) {
$(this).parent().find('.datePickerInput').val(e);
});
});
After compiling my views again (webpack), date picker was working fine. There's also another solution. Seems like sometimes js scripts "hide" behind the modal, so you need to set their z-index the modal's z-index which is 1050. This could be done inside your modal view:
<style>
.datepicker {
z-index: 1600 !important; /* has to be larger than 1050 */
}
</style>
If this still doesn't work, there's actually one more solution, where you need to initiate the date picker on the Modal shown event, something like this:
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
Hope that any of those solutions can solve your problem. Good luck.
I have this code
$(".filter-tag-group .tag-group .show_filter_content").on('click', function() {
var $icon = $(this).find('i').toggleClass('fa-plus fa-minus');
var $group = $icon.closest('.tag-group');
$group.find('.filter-title').toggleClass('active');
$group.find('.filter-content').toggle();
});
which the result is:
As you see all my groups are open by default, I want them to be closed when page loads (default).
HTML
<div class="collection-leftsidebar sidebar col-sm-3 clearfix">
<div class="sidebar-block filter-block">
<div class="sidebar-title">
<span>{{ __('Advanced Search') }}</span>
<i class="fa fa-caret-down show_sidebar_content" aria-hidden="true"></i>
</div>
<div id="tags-filter-content" class="sidebar-content">
<div class="filter-tag-group">
//this is the part that looping (need to be closed)
<div class="tag-group">
<p class="title">
<span class="filter-title show_filter_content">{{ __('Price Range') }} <span class="pull-right"><i class="fa fa-minus"></i></span></span>
</p>
<div class="row filter-content">
<div class="col-md-6">
<div class="form-group">
<label for="min_price" hidden>{{ __('Min') }}</label>
<input type="text" name="min_price" class="form-control" placeholder="Rp Min">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="max_price" hidden>{{ __('Max') }}</label>
<input type="text" name="max_price" class="form-control" placeholder="Rp Max">
</div>
</div>
</div>
</div>
</div>
</div>
which part of my script should I change to achieve that?
How about hide it by css. coz css will load first than javascript/jquery. So in your case you want to hide it by default so you must done it by css.
.[class-name here] {
display: none;
}
.[class-name here].active {
display: block;
}
So, I'm writing an electron app and at some point I will need a pathname.
On my renderer thread (using jQuery), I have this code:
$("#button-that-you-click-for-dialog").click(() => {
electron.remote.dialog.showOpenDialog({properties:["openDirectory"]});
});
It works great in the sense that the dialog appears exactly how I would expect - however when the dialog closes (OK or Cancel), the page reloads, resetting other values in the form. I for the life of me cannot figure out why this would happen. Here's what I've got platform-wise:
Ubuntu 17.04 with Gnome3
Electron 1.7.5/Chrome 58.0.3029.110
Node 8.5.0
For the record, I am not even caring that I have nothing passing back the value as of yet - I'll get to that once I fix this refreshy bug.
I'm thinking that's plenty of info, but if I'm missing something let me know
update: I added a callback to log my filepath returned, but now the window refreshes as the dialog opens, not when it closes, which means upon trying to close and console.log the results, it says that the resource has been closed or released (presumably because the window refreshed) Code I'm using now:
const electron = require("electron");
$("#dir").click((event) => {
electron.remote.dialog.showOpenDialog({
properties:["openDirectory"]
}, (filepaths) => {console.log(filepaths);});
})
2nd update: I've tried Siddhesh's code and it works great. Now I need to figure out what part of my index.html is triggering a refresh (and, as it turns out, a WebGL console message on my IDE that's running electron)
Here's the full code:
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../common/jquery.min.js"></script>
<meta charset="UTF-8">
<title>BookRipper</title>
<link rel="stylesheet" href="../common/bootstrap.min.css"/>
<link rel="stylesheet" href="../common/bootstrap-grid.min.css"/>
<link rel="stylesheet" href="../common/bootstrap-reboot.min.css"/>
<link rel="stylesheet" href="../common/css/font-awesome.min.css" />
<link rel="stylesheet" href="index.css"/>
<script src="../common/bootstrap.min.js"></script>
<script src="index.js" type="application/javascript"></script>
</head>
<body>
<div class="jumbotron">
<h3 class="display-4" id="title">New Book</h3>
</div>
<footer class="footer clearfix">
<div class="container">
Sample Text
</div>
</footer>
<div class="container">
<form>
<div class="row mb-2">
<div class="col-sm-3 col-md-2 col-lg-1">
<label for="book-title" class="mt-sm-2">Title</label>
</div>
<div class="col">
<input id="book-title" class="form-control"/>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-3 col-md-2 col-lg-1">
<label for="book-author" class="mt-sm-2">Author</label>
</div>
<div class="col">
<input id="book-author" class="form-control"/>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-3 col-md-2 col-lg-1">
<label for="book-year" class="mt-sm-2">Year</label>
</div>
<div class="col">
<input type="number" id="book-year" class="form-control" value="2000" />
</div>
</div>
<div class="row mb-2">
<div class="col-sm-3 col-md-2 col-lg-1">
<label for="book-n" class="mt-sm-2">Number of disks</label>
</div>
<div class="col">
<input type="number" id="book-n" class="form-control" value="1"/>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-3 col-md-2 col-lg-1">
<label for="dir" class="mt-sm-2">Folder</label>
</div>
<div class="col">
<!-- |||||| This is the button in question |||||| -->
<button id="dir" class="btn">Folder</button>
</div>
</div>
<div class="row mb-2">
<button
type="button"
class="btn btn-link"
data-toggle="collapse"
data-target="#advanced"
onclick="$('#advanced').toggleClass('show'); $('#advanced-icon').toggleClass('fa-plus').toggleClass('fa-minus');">
<i
class="fa fa-plus mr-2"
id="advanced-icon">
</i>
Advanced Settings
</button>
</div>
<div class="collapse" id="advanced">
<div class="row mb-2">
<div class="col-sm-3 col-md-2 col-lg-1">
<label for="bitrate" class="mt-sm-2">Bitrate</label>
</div>
<div class="col">
<div class="input-group">
<input type="number" id="bitrate" class="form-control" value="24" min="16" max="256" step="4" />
<span class="input-group-addon">kbps</span>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
index.js:
$ = require('jquery');
$(document).ready(function () {
$("#book-title").keydown(copyTitle).keyup(copyTitle);
function copyTitle() {
document.title = this.value ? this.value : "BookRipper";
$("#title").text(!this.value?"New Book":this.value);
}
const electron = require("electron");
$("#dir").click((event) => {
electron.remote.dialog.showOpenDialog({properties:["openDirectory"]}, (filepaths) => {console.log(filepaths)});
})
});
Hot dang. I finally found it. My issue was that the button that was clicked-its type was not specified. I assume that means it was defaulting to "submit" or "reset". When I set it to "button", it quit refreshing for me and I'm able to go on my merry way.
The resetting of the form/ reloading of page is not triggered by electron implicitly.
Some part of your code might be triggering it explicitly, like $("#myForm")[0].reset() or something else.
Try creating a new HTML page and just render the code below. This works fine for me without resetting the form. If your problem still persists, try pasting your complete code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>
<script>
const {dialog} = require("electron").remote
$(document).ready(function(){
$("#btn1").click((event) => {
dialog.showOpenDialog({ properties:["openDirectory"] },
(paths) => console.log(paths));
});
});
</script>
</head>
<body>
<form action="" id="myForm">
<input type="text" id="inp1">
<input type="text" id="inp2">
<input type="text" id="inp3">
</form>
<button id="btn1">Get Path</button>
</body>
</html>
i build a code for comments and replies of them.. i use a #foreachto show all elements in ViewBag which have a list of comments..
every thing works fine in post and get ..
but my problem it's when i try to make "submit"button of replies disable to prevent anyone from pressing it without typing..
so i use javascript but the code didn't work fine ..
first it work only with the last element of #foreach .. after i use the name as "class" instead of "id" it work for all elements
but the problem is .. if i typing in first reply input text for example .. the button didn't enable .. but if i typing at last reply input text .. all buttons enable ..
I want the code work for each reply .. only when some one typing in that input text ..
JavaScript
<script>
var $inputreply = $('.replies');
var $buttonreply = $('.replysubmit');
setInterval(function () {
if ($inputreply.val().length > 0) {
$buttonreply.prop('disabled', false);
}
else {
$buttonreply.prop('disabled', true);
}
}, 100);
</script>
View which have loop #foreachof comments and replies for each comment
<section class="comment-list">
#foreach (var item in ViewBag.CommentsList)
{
<article class="row">
<div class="col-md-10 col-sm-10">
<div class="panel panel-default arrow left">
<div class="panel-body">
<header class="text-left" style="direction:rtl;">
<time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> #item.CommentDateTime</time>
</header>
<div class="comment-post">
<p>#item.Comment</p>
</div>
<p class="text-right"><a class="btn btn-default btn-sm replybtn"><i class="fa fa-reply"></i> reply</a></p>
</div>
</div>
<!--ReplyBox-->
#if (Request.IsAuthenticated)
{
using (Html.BeginForm("Reply", "Home", new { #id = #item.PostID, #commentId = #item.ID }, FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="input-group" style="direction:ltr;">
<input type="text" class="replies form-control" placeholder="" name="replies" />
<span class="input-group-btn">
<button class="replysubmit btn btn-primary" type="submit">Reply</button>
</span>
</div>
}
}
else
{
<div class="form-horizontal">
<div class="alert alert-danger replybox" style="display:none;">
<span>please login to reply</span>
</div>
</div>
}
#foreach (var subitem in ViewBag.Relies)
{
if (#subitem.CommentID == #item.ID)
{
<article class="row">
<div class="col-md-9 col-sm-9">
<div class="panel panel-default arrow left">
<div class="panel-heading left">Reply</div>
<div class="panel-body">
<header class="text-left">
<time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> #subitem.ReplyDate</time>
</header>
<div class="comment-post">
<p>#subitem.CommentReply</p>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-2 col-md-offset-1 col-sm-offset-0 hidden-xs">
<figure class="thumbnail">
<img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" />
<figcaption class="text-center">#subitem.UserName</figcaption>
</figure>
</div>
</article>
}
}
</div>
<div class="col-md-2 col-sm-2 hidden-xs">
<figure class="thumbnail">
<img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" />
<figcaption class="text-center">#item.userName</figcaption>
</figure>
</div>
</article>
<br />
}
</section>
The selector $('.replysubmit') returns all the items with that css class, hence updating the disabled property of all those elements, not just the one closest to the input element.
You should use a relative selector to get the submit button inside the form where the reply input element is.
jQuery closest() and find() methods will be handy
This should work
$(function () {
$('.replysubmit').prop('disabled', true); // Disable all buttons when page loads
// On the keyup event, disable or enable the buttons based on input
$(".replies").keyup(function() {
if ($(this).val().length > 0) {
$(this).closest("form").find(".replysubmit").prop('disabled', false);
} else {
$(this).closest("form").find(".replysubmit").prop('disabled', true);
}
});
});
I have a simple prototype. I want to keep updating the value of Balance as payments are made. I want to ask how can I maintain the value of 'Balance' variable using HTML, CSS, Javascript, and Bootstrap. Once I click Submit, the value returns to the initial value of $10. I have tried to do this using javascript. The simple code is as follows:
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="default.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var output=10;
function payment(){
var amount= document.getElementById ("amountID");
var merchant= document.getElementById("merchantID");
output = output - amount.value;
amount.value=" ";
var balance=document.getElementById("balance");
balance.innerHTML = output ;
}
</script>
</head><body>
<div class="row">
<div class="col-md-12">
<div class="headline">
<h1>Payment</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 col-lg-3">
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a data-toggle="tab" href="#pay">Pay</a>
</li>
<li>
<a data-toggle="tab" href="#send">Send</a>
</li>
</ul>
</div>
<div class="col-xs-9 col-lg-9 col-md-9">
<div class="tab-content">
<div id="pay" class="tab-pane fade in active">
<div class="row">
<label class="col-md-4" style="text-align:right ;"> Available Balance:</label>
<label class="col-md-4" id="balance" > 10$</label>
</div>
<form action="#" class="form-horizontal">
<fieldset>
<div class="form-group">
</div>
<div class="form-group">
<label class="control-label col-md-4 col-xs-4" for="merchantID" > Merchant ID: </label>
<div class="col-md-4 col-xs-4">
<input type="text" class="form-control" id="merchantID" autofocus/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4 col-xs-4" for="amountID" > Amount:</label>
<div class="col-md-4 col-xs-4">
<input type="text" class="form-control" id="amountID" autofocus/>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4 col-xs-8 col-xs-offset-4">
<button class="btn btn-primary" onclick="payment()" > Submit </button>
</div>
</div>
</fieldset>
</form>
Just a silly mistake. Change the following line:
<button class="btn btn-primary" onclick="payment()" > Submit </button>
to like below:
<button type="button" class="btn btn-primary" onclick="payment()" > Submit </button>
Which means you have to explicitly mention the type of the button. Because, in HTML5 button has a default behavior of submit. So, without this declaration, the form was being submitted and your page was being reloaded.
The problem you are having as that clicking a button in a form causes the page to submit. When this happens your browser will attempt to send the form data to the server. Because you haven't set a target attribute to your form that means it basically just refreshes the page. You just need to prevent the submit action in your javascript.
function payment(e) {
var amount = document.getElementById("amountID");
var merchant = document.getElementById("merchantID");
output = output - amount.value;
amount.value = " ";
var balance = document.getElementById("balance");
balance.innerHTML = output;
e.preventDefault(); //add
return false; //add
}