We Keep Coding

How could I avoid WYSIWYG buttons to follow the link

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!

How to stop next page to be loading

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>

function is not defined at HTMLButtonElement.onclick

I want to call the function DeleteRow and EditRow on click of Delete Button and Edit Buttton.
<button style="margin-right: 5px;" type='button' onclick='return EditRow(#i)' id='#editrow' class='btn btn-primary btn-sm pull-right'><i class='glyphicon glyphicon-edit'></i> </button>
<button style="margin-right:5px;" type='button' onclick='return DeleteRow(#i)' id='' class='btn btn-danger btn-sm pull-right'><i class='fa fa-times-circle'></i> </button>
I have also made functions on my JavaScript file but I am getting this "undefined Error function error".
JavaScript Function here
<script type="text/javascript">
function DeleteRow(id) {
debugger
//logic here
return false;
}
function EditRow(id) {
//logic here
return false;
}
</script>
I have got similar error before but at that time I only changed the function name in onClick at html and changed the function name at JavaScript but now no matters what I rename the function, I am getting the same error.
Can anyone explain why I am getting this error

Your code works if you make sure that your JS is defined before your buttons (or as long as you use some DOM ready event).
Also, make sure #i renders the right value. I don't recognize this pattern...
function DeleteRow(id) {
console.log('Delete ' + id);
return false;
}
function EditRow(id) {
console.log('Edit ' + id)
return false;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<button type='button' onclick='return EditRow(1)' id='#editrow' class='btn btn-primary btn-sm'><i class='glyphicon glyphicon-edit'></i> </button>
<button type='button' onclick='return DeleteRow(1)' id='' class='btn btn-danger btn-sm'><i class='fa fa-times-circle'></i> </button>

Show button onClick event of another button

I need to show status after the onClick event of a button. But I want the shown button to be on another page. Is this possible?
For example, one button on my Investigation page shows the patient status for a user. If I click that button, the investigation status should be Pending and a user list should display in front of that particular patient.

Try this using jquery
Html
<button id="first-button" type="button" class="btn"> first button </button>
<button id="second-button" type="button" class="btn hide"> Pending </button>
Script
$("#first-button").click(function(){
ev.preventDefault();
$('#second-button').removeClass('hide');
$('#first-button').addClass('hide');
});
OR
In php
<?php
if($pedding)
{
echo '<button id="pending" type="button" class="btn">Pending</button>';
}
else
{
echo '<button id="status" type="button" class="btn">Status</button>';
}
?>

Displaying the selected value in JavaScript

i am using bootstrap btngroup to select one value ..how can i display that selected value ?? here is my code.
<div class="input-group">
<div id="radioBtn" class="btn-group">
<a class="btn btn-primary btn-sm active" data-toggle="fun" data- title="Y">YES</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="X">I don't know</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="N">NO</a>
</div>
<input type="hidden" name="fun" id="fun">
</div>
and JS
$('#radioBtn a').on('click', function(){
var sel = $(this).data('title');
var tog = $(this).data('toggle');
$('#'+tog).prop('value', sel);
$('a[data-toggle="'+tog+'"]').not('[data- title="'+sel+'"]').removeClass('active').addClass('notActive');
$('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})

Tidy your code - remove the spaces in your data- title attribute, in both the HTML and JS, as these are causing it to break.
Add a <div id="display"></div> in your HTML somewhere and style it how you like.
Add this line to your JS click handler: $('#display').html(sel);
Here's a demo.
If you'd prefer the result to be the text of the radio button instead of the value, use $('#display').html($(this).html()); instead in step 3.
Done.

Not sure if this is what you mean, but to get the value (or text) from a clicked button in a button group, I use for example.....
HTML
<div id="aBtnGroup" class="btn-group">
<button type="button" value="L" class="btn btn-default">Left</button>
<button type="button" value="M" class="btn btn-default">Middle</button>
<button type="button" value="R" class="btn btn-default">Right</button>
</div>
<p>
<div>Selected Val: <span id="selectedVal"></span></div>
JS
$(document).ready(function() {
// Get click event, assign button to var, and get values from that var
$('#aBtnGroup button').on('click', function() {
var thisBtn = $(this);
thisBtn.addClass('active').siblings().removeClass('active');
var btnText = thisBtn.text();
var btnValue = thisBtn.val();
console.log(btnText + ' - ' + btnValue);
$('#selectedVal').text(btnValue);
});
// You can use this to set default value upon document load
// It will fire above click event which will do the updates for you
$('#aBtnGroup button[value="M"]').click();
});
CONSOLE OUTPUT
Left - L
Middle - M
Right - R
Hope this helps
Plunker here