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>
Related
I'm trying to use a set of inputs in HTML but I would like to create a PHP onclick function that takes the value of certain elements in HTML when clicked. The problem is I don't think I can use a conventional HTML method="post" form because I'm trying to get the value of something which isn't and I'm trying to get the value of a div.
Specifically, I want to assign a value to each of the squares depending on their color and then use that value to store in a database in PHP. Any help is appreciated.
<?php
session_start();
include("database.php");
if($_SERVER['REQUEST_METHOD'] == "POST")
{
$text_custom = $_POST['text_custom'];
echo $text_custom;
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap customiser.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div class="containter">
<div class="row">
<div class="col-3 offset-1 d-flex justify-content-end" id="logo">
<a href="http://localhost/website/test_1_customiser.php"><img id="logoclick" src="smiding logo.png"
alt="logo"></a>
</div>
<div class="col-7 offset-1" id="navbar">
Customiser
News
About us
<?php
if (!empty($_SESSION['logged'])){
echo 'Account';
}else{
echo 'Account';
}
?>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-12 text-center">
<h1>Customiser</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 offset-md-1">
<img src="label.png" id="Gin_Label">
</div>
<div id="labeltext">
text
</div>
<div class="col-md-4 offset-md-2">
<div id="textchanger">
<h3>Text Picker</h3>
<input type="text" id="textpicker" name="text_custom">
<input type="button" id="update" value="Click me!" onclick="changetext()">
</div>
<div id="colourchanger" class="row"></div>
<h3>Colour Picker</h3>
<div class="row">
<div class="col-md-1">
<div class="square" id="colourpicker" onClick="invert()"></div>
</div>
<div class="col-md-1 offset-md-1">
<div class="square2" id="colourpicker2" onClick="invert2()"></div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-7">
<h3>Extra Ingredient</h3>
<select name="ingredient">
<option value="none">None</option>
<option value="lemon">Lemon</option>
<option value="orange">Orange</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-5">
<form method="post">
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function changetext() {
let bruh = document.getElementById('textpicker').value;
document.getElementById('labeltext').innerHTML = bruh;
}
function invert() {
document.getElementById("Gin_Label").style.filter = "invert(100%)";
document.getElementById("labeltext").style.color = "white";
}
function invert2() {
document.getElementById("Gin_Label").style.filter = "invert(0%)";
document.getElementById("labeltext").style.color = "black";
}
</script>
</body>
</html>
although I am not very clear about your question
but to use HTML value in PHP
you need to put all the HTML tag that consists of the value you wish to save to the database inside a
<form action="yourPhpNameWithTheRelatedCode" method="POST"> tag
the submit button <button type="submit" name="submit">Submit</button>
then in PHP
if (isset($_POST["submit"])){
$value= $_POST["theNameOfTheTagThatYouWishToSaveThatValue"]??"";
}
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 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.
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
}
Hi I am succeeded to remove classes on edit button click, but I am having an issue to adding classes back.
Here is the code given below.
Any help would be appreciated.
$(document).ready(function() {
$(".edit").click(function() {
$(this).parent().find('.edit-field-area').removeClass('edit-field-area');
$(this).removeClass('edit-button');
$(this).parent().find('.transparent-control').prop('disabled', false);
$(this).parent().find('.transparent-control').focus();
});
$(".transparent-control").focusout(function() {
debugger;
$(this).parent().find('.row').find('.edit').addClass('edit-button');
$(this).prop('disabled', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row">
<div class="col-md-3">
<img src="Images/side-border.png" width="100" height="20" />
<img src="http://localhost:49606/img/Thumbnail5.jpg" class="img-circle" width="100" height="100" alt="Muhammad Essa" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-10 edit-field-area heading-one">
<input type="text" id="name" disabled="disabled" class="transparent-control" value="Muhammad Essa Rind" />
</div>
<div class="col-md-1 col-md-offset-1 edit-button heading-one edit" style="margin-left: 10px;">
<h3 style="margin-top: 9px"><i class="glyphicon glyphicon-pencil"></i></h3>
</div>
</div>
<div class="row">
<div class="col-md-10 edit-field-area">
<input type="text" id="job" class="transparent-control" value="Software Developer at United Marine Agencies PVT LTD" />
</div>
<div class="col-md-1 col-md-offset-1 edit-button edit" style="margin-left: 10px;">
<h5><i class="glyphicon glyphicon-pencil"></i></h5>
</div>
</div>
<div class="row">
<div class="col-md-10 edit-field-area">
<input type="text" id="country" class="transparent-control" value="Pakistan" />
</div>
<div class="col-md-1 col-md-offset-1 edit-button edit" style="margin-left: 10px;">
<h6><i class="glyphicon glyphicon-pencil"></i></h6>
</div>
</div>
</div>
</div>
The simple idea about the adding class on textbox focus out is in this Demo, Please click to see
Replace
$(this).parent().find('.row').find('.edit').addClass('edit-button');
With
$(this).addClass('edit-button');
Try this...
$(".transparent-control").onblur(function () {
debugger;
$(this).parent().parent().find('.edit').addClass('edit-button');
$(this).prop('disabled', true);
});
onblur event is triggered when input loses focus.