We Keep Coding

How to prevent onclick event with another one JavaScript

I have a div which acts as drag and drop. It has also select file functionality.
When file is selected, I want a customer to be able to delete it and select another one.
So I am changing the content of a div with input onchange.
Problem occures wneh I want to delete a file, filebrowser opens automaticaly, and I want to prevent it.
Here is my code:
HTML
<div id="drop-zone"
ondrop="drag_drop(event)"
ondragover="return false"
onclick="selectFile()"
>
<span class="drop-zone__title">Drop your file here</span>
<span class="drop-zone__subtitle">or select a file</span>
</div>
<input type="file"
name="upload-file"
id="upload-file"
accept=".pdf,.docx"
aria-invalid="false"
onchange="changeFile()"
/>
JS:
const dropZone = document.querySelector('#drop-zone')
const uploadFile = document.querySelector('#upload-file')
function drag_drop(event) {
event.preventDefault()
if (event.dataTransfer.files[0]) {
uploadFile.files = event.dataTransfer.files
dropZone.innerHTML = '<div>' + event.dataTransfer.files[0].name +
'<button class="removeFile" onclick="fileRemove(event)">
<i class="far fa-times"></i>
</button>
</div>'
dropZone.classList.add('drop-success');
}
function selectFile() {
if (uploadFile.files.length == 0) uploadFile.click()
}
function changeFile() {
dropZone.innerHTML = '<div>' + uploadFile.files[0].name +
'<button class="removeFile" onclick="fileRemove(event)">
<i class="far fa-times"></i></button></div>'
dropZone.classList.add('drop-success');
};
function fileRemove() {
dropZone.onclick='' // setting the onclick of drop-zone to none
dropZone.innerHTML = '<span class="drop-zone__title">Drop your file here</span>' +
'<span class="drop-zone__subtitle">Or select a file</span>'
dropZone.classList.remove('drop-success');
uploadFile.value = '';
dropZone.onclick= selectFile() // setting back onclick of drop-zone for selecting files
}
My fileRemove() function is not performing well. It removes the files, sets back the content of the div, but immediately reopens the file selector - I want to prevent this.
I was trying with setting the onclick on and off, but that doesn't work.

The issue here is this function call, which is clicking the file upload input again
function selectFile() {
if (uploadFile.files.length == 0) uploadFile.click()
}
Not sure why you need to click that input from javascript if the user can click it normally, just commenting that line will do the trick
function selectFile() {
if (uploadFile.files.length == 0){
//uploadFile.click()
}
}
Full fiddle here https://jsfiddle.net/zgranda/3scvbjmq/13/
EDIT: Updated the fiddle with your new comment, now it checks if the event.target has the class removeFile. Check the updated fiddle here https://jsfiddle.net/zgranda/3scvbjmq/41/

convert text to editable text input and save into db - Laravel

I'm currently implementing a feature that somebody can add addresses on my page. He can do this via a simple form. What I have now (to print the addresses) is:
#foreach($addresses as $address)
#if($address->typeOfAddress==0)
Name: {{$address->name}}<br/>
Straße: {{$address->street}}<br/>
PLZ: {{$address->plz}}<br/>
Ort: {{$address->city}}<br/>
<a type="button" class="btn btn-info" href="/editAddress/{{$address->id}}">Bearbeiten</a>
<a type="button" class="btn btn-danger deleteAddressButton" href="/deleteAddress/{{$address->id}}">Löschen</a>
<br/><br/>
#endif
#endforeach
The variable addresses is passed into the view from the controller.
What I'm trying to achieve now, is that the user can simply click on one of those address parts, like name, straße, plz and ort, and it's converted to an input field, so the value can be changed. Then, when leaving the focus (so clicking somewhere else (or maybe add a save button next to it)), the new data has to be sent to the controller by ajax (the request itself should be no problem then). But: How can I convert it to an input field and how can I then convert it back and react to it (to then send the ajax request)?
I searched in the internet, but didn't find something...
Edit: found a fiddle here (http://jsfiddle.net/yXcZG/3) that does nearly what I want, but I have the problem, that it doesn't seem to keep the format, 1. it has much more space between the lines and: when clicking on it to edit, the input field jumps to the bottom of the page and doesn't stay on the same position. Also I just want the variables to be editable, not the text before the :.
So this is what I tried: (of course the AJAX thing is still missing, but first the other thing has to work)
In JS:
$(document).on('click', '.editableText', function (e) {
console.log(this);
TBox(this);
});
$("input").live('blur', function (e) {
RBox(this);
});
function TBox(obj) {
var id = $(obj).attr("id");
var input = $('<input />', { 'type': 'text', 'id': id, 'class': 'editableText', 'value': $(obj).html() });
$(obj).parent().append(input);
$(obj).remove();
input.focus();
}
function RBox(obj) {
var id = $(obj).attr("id");
var input = $('<p />', { 'id': id, 'class': 'editableText', 'html': $(obj).val() });
$(obj).parent().append(input);
$(obj).remove();
}
HTML:
#foreach($addresses as $address)
#if($address->typeOfAddress==0)
Name: <span id="addressName{{$address->id}}" class="editableText">{{$address->name}}</span><br/>
Straße: <span id="addressStreet{{$address->id}}" class="editableText">{{$address->street}}</span><br/>
PLZ: <span id="addressPLZ{{$address->id}}" class="editableText">{{$address->plz}}</span><br/>
Ort: <span id="addressCity{{$address->id}}" class="editableText">{{$address->city}}</span><br/>
<a type="button" class="btn btn-danger deleteAddressButton" href="/deleteAddress/{{$address->id}}">Löschen</a>
<br/><br/>
#endif
#endforeach
Edit2: Found this answer on stackoverflow too (https://stackoverflow.com/a/6814092/3375021), so use contenteditable, but I have the problem, that I on blur neither know, which address should be changed in the database, nor which part of the address..

If you're looking for a jQuery working solution you can go with this
JsFiddle example
You have a listener for when you click an element that is editable, it'll take the value of it and put it inside an input.
After you blur you can take this value and do whatever you want with it..
Here is the javascript (jQuery) part.
$(function(){
$('body').on("click", ".changeable", function(e){
var text = $(this).text();
$(this).html("<input type='text' class='input-editable' value='" + text + "'>");
$(this).find('input').focus();
});
$('body').on("blur", ".input-editable", function(e){
var text = $(this).val();
$(this).parent().html(text);
console.log("Value changes to: " + text);
});
});

I think you should be using <?php echo $variable; ?> instead of blade {{$variabl}}
If you going to store a html tags or js into your database then you need to not use blade to echo it, you should use php simple echo function instead

How to reset all Models on click event?

My requirement: Have to reset my select boxes on button click
Example :-
I have 3 select boxes. When I click on the select box some different data will come and after that the result will get published. I added a Remove button which resets only its parent select box. Now, what I want to know is,how to reset all the three select box on clicking the remove button.
sample code is as under :-
<button ng-click="removeObj(key,model1,0)">Remove</span></button>
controller code is as under :-
scope.removeObj = function(modelID, subModelID, selectBoxPos) {
modelID = 0;
subModelID = 0;
})
I want on click of removeObj function all modelID data get reset to zero.
Please help.

As I understand you do not need any parameters.. only create a meaningful name resetModels:
AngularJS Controller:
$scope.resetModels = function() {
// Set default value to your models...
$scope.modelID = 0;
$scope.subModelID = 0;
});
Html:
<button ng-click="resetScpeModels()">Remove</span></button>

If you want to reset all the values. You should use it like this
$scope.model = {};
$scope.model.modelID = 0;
$scope.model.subModelID = 0;
<input ng-model="model.modelID"/>
If you want to reset it. Call again
$scope.model = {};
Inside ng-click function.

When you give a name to your form it automatically gets added to the $scope.
In angular we are having a $setPristine() method on the $scope.formName. which should recursively take care of resetting your form.
You can reset a form by, $scope.formName.$setPristine(); but if you're binding a model object to your inputs, you need to take care of clearing those too, ie:
$scope.formModel={}; or angular.copy({}, formModel);
Working demo :
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.Reset = function(formModel) {
angular.copy({}, formModel);
$scope.formModel = {};
$scope.submitForm.$setPristine();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<form name="submitForm" ng-controller="myController">
<label for="first_field">First Model</label>
<input ng-model="formModel.firstModel" />
<br />
<label for="second_field">Second Model</label>
<input ng-model="formModel.secondModel" />
<br />
<button type="button" ng-click="Reset(formModel)">Reset</button>
</form>
</div>

JavaScript textarea

im new to js and have issues with following. I want the content of a html text input field to be displayed within a textarea via button click. I tried this:
.
.
function addText()
{
var contentOfTxtField = document.getElementById("txtToGet").value;
document.getElementById("idOfTheTextarea").innerHTML = contentOfTxtField;
}
.
.
Then I call my function in the onlick event of a button:
<button onclick="addText()">Add</button><br>
My problem is that the text shortly appears in the textarea but immediately disappears. Same for the entered text of the input text field. Any hints for me? Thk u

Try to replace :
document.getElementById("idOfTheTextarea").innerHTML = contentOfTxtField;
By :
document.getElementById("idOfTheTextarea").textContent= contentOfTxtField;
NOTE : make sure that you're adding type='button' to the button since button tag act like submit by default.
Hope this helps.
Snippet
function addText()
{
var contentOfTxtField = document.getElementById("txtToGet").value;
document.getElementById("idOfTheTextarea").textContent = contentOfTxtField;
}
<input type="text" value='example value' id="txtToGet"/>
<br>
<button type="button" onclick="addText()">Add</button>
<br>
<textarea id='idOfTheTextarea'></textarea>

Sounds like the form is submitting, cancel the click event
<button onclick="addText(); return false;">Add</button><br>

JQuery, Javascript button

Sorry for the vague title, couldn't think of how to title my question. So I've made a html/css table wherein I placed an edit button for each row. Pressing the button would transform a certain text field into a text-input field there by allowing the user to edit the data inside; at the same time the edit button then transforms to save button. After editing , the user then would press the save button and the text-input field would then revert back into a text field and the save button back to an edit button. But it's not entirely working
This is my problem, after editing the data inside, upon pressing the save button, the data inside is deleted and replaced with: <input type= and outside the text-input field is: " />
and the save button remains as is, a "SAVE" button and not back to an "EDIT" button
here's the script:
$(document).ready(function () {
// listen for email edit button click
$("button#edit").on('click', function () {
// get email inline to this edit button
var email = $(this).parent().siblings('td.email').html();
alert(email);
// change button from edit to save
$(this).attr('id', 'save-email').html('SAVE');
// change email display to input field
$(this).parent().siblings('td.email').html('<input type="text" id="user-email" value="' + email + '" />');
});
// listen for email save button click
$("button#save-email").on('click', function () {
// get new email inline to this save button
var newEmail = $(this).parents('tr').find($('input#user-email')).val();
alert(newEmail);
// change input field back to display
$(this).parent().siblings('td.email').html(email);
// change button from save to edit
$(this).attr('id', 'edit').html('EDIT');
});
});
sorry for the wall of text.

try to put it this way :
$(document).on('click',"button#save-email", function() {...
instead of
$("button#save-email").on('click', function()
using the second one won't work, because when it is run, $("button#save-email"), doesn't exist yet.

The problem is that the first handler is the only one attached in script.
Your javascript code is executed when the page is ready.
At that moment only the first handler is attached because there is not yet an element button#save-email. When you click save, it is the first handler that is executed again, not the one think !
Why don't you create two distinct buttons and show one or the other ?
<table>
<tr>
<td class="email">myemail#domain.com</td>
<td>
<button class="btn-edit">Edit</button>
<button class="btn-save" style="display:none">Save</button>
</td>
</tr>
<tr>
<td class="email">myemail#domain.com</td>
<td>
<button class="btn-edit">Edit</button>
<button class="btn-save" style="display:none">Save</button>
</td>
</tr>
</table>
Javascript
// listen for email edit button click
$('.btn-edit').on('click', function() {
var $this = $(this),
$parentRow = $this.closest('tr');
// get email inline to this edit button
var email = $this.parent().siblings('td.email').html();
// change button from edit to save
$parentRow.find('.btn-edit').hide();
$parentRow.find('.btn-save').show();
// change email display to input field
$(this)
.parent()
.siblings('td.email')
.html('<input type="text" id="user-email" value="'+email+'" />');
});
// listen for email save button click
$('.btn-save').on('click', function() {
var $this = $(this),
$parentRow = $this.closest('tr');
// get new email inline to this save button
var newEmail = $(this).parent().siblings('td.email').find('#user-email').val();
// change input field back to display
$(this).parent().siblings('td.email').html(newEmail);
// change button from save to edit
$parentRow.find('.btn-edit').show();
$parentRow.find('.btn-save').hide();
});
DEMO

Take a look at KnockoutJS, which utilizes nice Bindings helping you to do things like that much easier. Here is an example of an editable grid with KnockoutJS
KnockoutJS Editable Data example

Neat & Works
<table>
<tr>
<td>some text</td>
<td><input type='button' value='edit' id='btn'/></td>
</tr>
</table>
$(document).ready(function() {
$("#btn").click(function() {
var $btn=$(this);
var opn= $btn.val()
switch(opn){
case 'edit':
var $td=$(this).parent().parent().find('td:first');
var email=$td.html();
$td.html("").append('<input type="text" value="'+email+'">');
$btn.val("save");
break;
case 'save':
var $input=$(this).parent().parent().find('td:first input');
var email=$input.val();
$input.parent().html(email);
$btn.val("edit");
break;
}
});
});
http://jsfiddle.net/h55rc/