I am trying to build an editor. Once I click an any button ( bold, or italic,...) it follows the link. Here is what I have tried out.
function execCmd(command) {
document.execCommand(command, false, null);
}
function execCommandWithArg(command, arg) {
document.execCommand(command, false, arg);
}
<form>
<div id="text_section">
<button onclick="execCmd('bold');"><i class="fas fa-bold"></i></button>
<button onclick="execCmd('italic');"><i class="fas fa-italic"></i></button>
<button onclick="execCommandWithArg('createLink', prompt('Enter a RUL','http://'));"><i class="fas fa-link"></i></button>
<button onclick="execCmd('unlink');"><i class="fas fa-unlink"></i></button>
<div class="p-2" contenteditable="true" id="content_text" style="border:solid; width:200px; heigth:100px;"></div>
</div>
<div class="form-group">
<input type="button" name="submit" value="Post text" id="submit" class="btn py-3 px-4 btn-primary">
</div>
</form>
How could I use e.preventDefault(); function on it ?
This code lines seem to work as expected, but the problem is not solved in my programm.
I think e.preventDefault(); might solve the problem.
Thank you for taking the time to answer my question.
Your callback needs to return false.
Try
<button onclick="execCmd('bold'); return false;">
Or
<button onclick="return execCmd('bold');">
function execCmd(command)
{
document.execCommand(command, false, null);
return false;
}
When button element is inside a form element it acts as submit unless it's type attribute say different (etc: reset, button).
So a quick fix will be to set type="button to your editing buttons:
<button type="button" onclick="execCmd('bold');">
<i class="fas fa-bold"></i>
</button>
Enjoy code!
Related
I am creating a button in a div so when we click it show us detailed information of the person given in API. But now I am confused about how to do this like I have 9 divs and every div has its own button, I am using onClick() on button it works well for the single button but to show information of 9 people if I use 9 different onClick() function it will create redundancy in code so how a single function can handle all this?
HTML
<button type="button" class="button" onclick="show" name="button">Details</button>
You can leverage event bubbling and addEventListener API to do that with only one event listener and only one handler.
const root = document.getElementById('root');
const handler = (e) => {
// target IS THE CLICKED BUTTON.
const {target} = e;
if (target.tagName === 'BUTTON') {
alert(`${target.name} has been pressed.`);
}
};
root.addEventListener('click', handler);
<div id='root'>
<div>
<button type="button" class="button" name="Button 1">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 2">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 3">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 4">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 5">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 6">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 7">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 8">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 9">Details</button>
</div>
</div>
You could try something like this. Don't forget to defer execution when importing into your html file:
const alert = (e) => {
window.alert(e.target.innerHTML);
}
const buttons = document.getElementsByClassName("button");
for (const btn of buttons) {
btn.addEventListener("click", alert);
}
You can use querySelectorAll(). That means you select all of
the buttons. What you must pass in the braces is a CSS selector like
this: const button = document.querySelectorAll('button').
After that you must use forEach(). That is a callback function and that will apply the command/event on every single button. e.g. what you're gonna do if x button gets clicked.
Using querySelectorAll & forEach together is the most recommended for these use cases.
const button = document.querySelectorAll('.button');
button.forEach(e => {
// e here means every single button, doesn't matter which one
e.addEventListener('click', () => {
document.querySelector('h1').textContent += 1;
}
)}
)
<button type="button" class="button" name="button">Details</button>
<button type="button" class="button" name="button">Details</button>
<button type="button" class="button" name="button">Details</button>
<button type="button" class="button" name="button">Details</button>
<button type="button" class="button" name="button">Details</button>
<h1>Result here: </h1>
if every div have its on button so you can find its id on button click
<button type="button" id="btn1" class="button" onclick="show(this)" name="button">Details</button>
here is javascript function
function show(btn){
const id = btn.getAttribute("id"); // here you will get "btn1"
if(id == "btn1"){
}
}
In my project, while a particular button is clicked I want to stop the next page appearing. Here is my JavaScript code:
function checkcond() {
check_value=document.getElementById("chkvalue");
if(check_value==null){
alert(check_value);
document.firstform.textview.focus();
return false;
}
}
and button code is:
<form id="payment_form" name="payment_form" action="<?php echo site_url("cont/accept");?>" method="post">
<input id="chkvalue" name="chkvalue" type="hidden">
<button type="submit" id="submit_button" class="btn btn-primary" onclick="checkcond()">
<b>Make a Payment</b>
<span class="fa fa-hand-o-right" aria-hidden="true"></span>
</button>
Here after checking the check_value I want to keep my current page while it is null. How should it be done? Is there any function for that?
My suggestion would be to remove inline javascript
and use like this
document.getElementById('payment_form').onsubmit = function() {
return checkcond();
};
or if you want to use inline method, change onclick method like this
<button type="submit" id="submit_button" class="btn btn-primary" onclick="return checkcond()"><b>Make a Payment</b>
well right now I am doing something like this to find all textbox values which has the same class name.
function generalBottom(anchor) {
var sends = $('input[data-name^="noValues"]').map(function(){
$(this).attr('value',$(this).val());
return $(this).val();
}).get();
}
and i call this function on a onclick of submit button like generalBottom(this)
and I have something like as per my requirement
When I click submit button of User I call a general function passing this as a parameter, but the above code gives me the text values of client as well
["perfect", "hyperjack", "julie", "annoying", "junction", "convulated"], which is undesired, I want only ["annoying", "junction", "convulated"] using my anchor params.
How to do this via my this parameter, I thought to traverse through my tags using children(), parent() but I won't be knowing how many fields user have added as its all dynamic, user can add as many values(text boxes).
I tried this
1) $(anchor).find('.rightAbsNo')
2) $(anchor).find('input[data-name^="noValues"]')
3) $(anchor).find('.rightAbsNo').map(function () {
console.log($(this).find('. showNoButton')); })
None of this worked for me.
My html is somewhat like this, code
<div id="attach0" class="leftbottomno">
<div style="overflow: hidden" class="leftbottomAbsolute" id="">
<form>
<span class="absno"><input type="text" required=""
id="absdelete" data-inputclass="leftbottomAbsoluteNo_class"
value="" class="leftbottomabsolutenotest keys" data-value=""
style="margin-bottom:4px; color: #1c1c1c;"> </span>
<a onclick="addAbsoluteValues(this);" style="margin-left: 50px">
<i class="fa fa-plus-circle color-blue-grey-lighter"></i> </a>
</form>
<a onclick="deleteAbsoluteEmpty(this);> </a><br>
<div class="rightAbsNo" id="yesValueattach">
<div class="rightAbsNoValue">
<input type="text" id="nonattach" placeholder="values"
data-name="noValues" data-inputclass="absYes_class" value="annoying"
class="showNoButton showActivity value" data-value="">
<button type="button" onclick="generalBottom(this);">
<i class="glyphicon glyphicon-ok"></i></button>
</div>
</div>
<div class="rightAbsNo" id="yesValueattach">
<div class="rightAbsNoValue" id=""> <input type="text"
data-name="noValues" data-inputclass="absYes_class" subattribute=""
value="" class="showNoButton showActivity value" data-value="">
<button type="button" onclick="generalBottom(this);">
<i class="glyphicon glyphicon-ok"></i></button>
</div>
</div>
<div class="rightAbsNo" id="yesValueattach">
<div class="rightAbsNoValue" id="">
<input type="text" data-name="noValues"
data-inputclass="absYes_class" placeholder="values" subattribute=""
value="junction" class="showNoButton showActivity value"
data-value="" >
<button type="button" style="display: none;"
onclick="generalBottom(this);">
<i class="glyphicon glyphicon-ok"></i>
</button>
</div>
</div>
</div>
</div>
First of all, you need to define a container to the groups with something like :
<div class="container">input groups</div>
<div class="container">input groups</div>
and change <button type='submit'> to <button type='button'> to prevent submitting the form.
Then change your function to this:
function generalBottom(anchor) {
var all_inputs = $(anchor).parent(".container").find("input");
var input = $(anchor).siblings('input').first();
all_inputs.each(function(){
$(this).val(input.val());
});
}
Here's Jsfiddle
first $(anchor).siblings(input) find inputs
then go through each element from first step and return their value
function generalBottom(anchor) {
var input = 'input[data-name^="noValues"]'
var values = $.map($(anchor).siblings(input), (elemnt, index)=>{
return elemnt.value
})
$('#shows').val(values.join())
}
$('button').on('click',function(){
generalBottom(this)
})
hope this helps
<div data-bind="style: { display: isShortlisted() === false ? 'inline-block' : 'none'}">
<form id="shortlistForm" action="#MVC.GetLocalUrl(MVC.HireOrgJobApplication.AjaxShortlist(Model.Application))" method="post" style="display:inline;">
#Html.AntiForgeryToken()
<input type="hidden" name="ApplicationKey" value="#Model.Application.ApplicationKey" />
<button type="submit" class="btn-act jui-tooltip" title="Shortlist">
<i class="fa fa-2x fa-star"></i>
</button>
</form>
</div>
<div data-bind="style: { display: isShortlisted() === true ? 'inline-block' : 'none'}">
<form id="unshortlistForm" action="#MVC.GetLocalUrl(MVC.HireOrgJobApplication.AjaxUnshortlist(Model.Application))" method="post" style="display: inline;">
#Html.AntiForgeryToken()
<input type="hidden" name="ApplicationKey" value="#Model.Application.ApplicationKey" />
<button type="submit" class="btn-act-active jui-tooltip" title="Remove from shortlist">
<i class="fa fa-2x fa-star" style="color:#f3b700;"></i>
</button>
</form>
</div>
$('form#shortlistForm').ajaxForm(function () {
viewModel.isShortlisted = true;
});
$('form#unshortlistForm').ajaxForm(function () {
viewModel.isShortlisted = false;
});
I have a code for a button that "shortlists" an applicant.
To briefly explain, my intention is to turn the "shortlistForm" button to
"unshortlistForm (which means it's already shortlisted)" button when it's clicked.
Please look at the attached screenshot:
So the start which looks like this
should turn like below when it's clicked.
when I check my network status on google chrome, it successfully "posts" to the correct link.
But the problem is, I have to REFRESH it to see the changed star.
Right now when I click the button, it gives me
just a page with 'true' written.
I want it to happen immediately without giving me that page, or having me refresh the page to see the change.
I am assuming this is happening because I cannot render Ajax-forms before knockout rendering is done. How can I make the ajax to form after the knockout is generated?
Please help !!
<div class="form-actions">
<button class="btn btn-primary" id="btn-next">Next</button>
<button type="reset" class="btn">Reset</button>
</div>
$("#btn-next").click(function(event) {
$('#tab li.active').next().find('a[data-toggle="tab"]').click();
});
When Next is pressed, form is submitted. How can I cancel it?
demo
Make it an anchor, not a button:
<a class="btn btn-primary" id="btn-next">Next</a>
Just return false from the click handler.
$("#btn-next").click(function(event) {
$('#tab li.active').next().find('a[data-toggle="tab"]').click();
return false;
});
Demo