Develop Reference

How do I refuse any changes in the input box if I click the cancel button?

so I have an input box that is disabled unless i click the edit button which enables to type in the input box, by clicking the edit button, the save and cancel button will appear. If i click the cancel button, the input box will be disabled again.
<button type="submit" class="btn btn-success" value="savechanges" id="savechanges">Save Changes</button>
<button type="button" class="btn btn-secondary" value="cancel" id="cancel">Cancel</button>
<button type="button" class="btn btn-info" value="edit" id="edit">Edit Info</button>
<script>
$('#edit').click(function () {
$(this).hide();
$('#savechanges, #cancel').show();
$("#target :input").prop("disabled", false);
});
$('#cancel').click(function () {
$('#edit').show();
$('#savechanges, #cancel').hide();
$("#target :input").prop("disabled", true);
});
</script>
what im trying to do is if i click the edit button, for example i type something in there and then i want to cancel it so i click the cancel button, as what ive said above it will disabled the input box. but that something in there is still there. that is not suppose to be there already since i cancelled it. also if for example the input box has already a value displayed inside it and i edited in but i want to cancel so it will go back to that value. can anyone help me pls i hope you get my point

you need to change this
$('#cancel').click(function () {
$('#edit').show();
$('#savechanges, #cancel').hide();
$("#target :input").val('');
$("#target :input").prop("disabled", true);
});

Save the value of the input when the user clicks edit. After the user clicks cancel, restore the input value as what is saved.
let storedValue= '';
$('#edit').click(function () {
$(this).hide();
storedValue = $("#target :input").val();
$('#savechanges, #cancel').show();
$("#target :input").prop("disabled", false);
});
$('#cancel').click(function () {
$('#edit').show();
$('#savechanges, #cancel').hide();
$("#target :input").val(storedValue);
$("#target :input").prop("disabled", true);
});

after searching for the right answer i found out and this works for me.i just change my button type for the cancel button. instead of
<button type="button" class="btn btn-secondary" value="cancel" id="cancel">Cancel</button>
i changed the type into:
<button type="reset" class="btn btn-secondary" value="cancel" id="cancel">Cancel</button>

Is there a way to send button id onClick to a bootstrap modal?

Using laravel, I have a list of user details obtained from the database with edit and remove button at the end of each record. When i click the remove button, the particular record gets removed, but when I added a modal such that when the delete button is clicked, a model appears, but adding the functionality to the confirmation "Yes" button of the modal got tricky, as it deleted the first record no matter which user i need to delete. How do i get the clicked user to be deleted when the modal button is clicked?
I have tried to assign each button the id of the current row.
#foreach($admins as $admin)
<tr>
<td>{{$admin['id']}}</td>
<td>{{$admin['name']}}</td>
<td>{{$admin['email']}}</td>
<td>
<button type="button" class="btn btn-block btn-danger" data- toggle="modal" data-target="#modal-danger" id="{{$admin['id']}}">Remove</button>
</td>
</tr>
#endforeach
<!-- The Button From Modal -->
<button type="button" class="btn btn-outline">Remove</button>

I did it with JS. You can show your modal with $('#modal-danger').modal('show')
So you can add a onClick event to your button that fill a hidden input.
Your button that make the modal appear:
<button type="button" class="btn btn-block btn-danger" onClick="showModal({{$admin['id']}})">Remove</button>
Your hidden input (somewhere in your page):
<input type="hidden" id="id-to-remove" />
Your button from modal:
<button type="button" class="btn btn-outline" onclick="realRemove()">Remove</button>
Your JS:
function showModal(id) {
$('#id-to-remove').val(id);
$('#modal-danger').modal('show');
}
function realRemove() {
$('#modal-danger').modal('hide');
var id = $('#id-to-remove').val();
alert('You can now remove ID ' + id + ' from your database!');
}
This should work

Since you are using jQuery you can use attribute method to get the current clicked user id and pass to the URL:
Your HTML button class
$(".my-btn").click(function(){
var userID = $(this).attr("data-user");
if (typeof userID !== typeof undefined && userID !== false) {
if(userID.length > 0) {
// There you go the user id of the clicked user
console.log(userID);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="my-btn" data-user="user_id_123">Remove</button>
I suggest you to refer the following URL for your further questions regarding attr method https://www.w3schools.com/jquery/html_attr.asp

make a global variable to store the target id and assingn the id to it when clicking the button on the target row
<button type="button" class="btn btn-block btn-danger" data- toggle="modal" data-target="#modal-danger" id="{{$admin['id']}}" onClick=someFunction({{$admin['id']}})>Remove</button>
target_id=0
function someFunction(id) {
target_id=id
}
and then make another function to trigger when clicking on the remove button in the model and from that access the global variable for the target id
that's the optimal way to do it as I can think cheers.

How to get data from attributes then disable buttons accordingly

I have run a bit of problem with our user interface, here's my code:
I have a button here inside a
<button class="btn btn-info" type="button" id="btnSubmit" data-btn="{{ row[1] }}" data-id="{{ row[2] }}" data-toggle="modal" data-target="#myModal" contenteditable="false" disabled='disabled'> Pay</button>
I have been using row[2] from another function and it worked, so this time i used row[1] to evaluate data. The condition is that
when the row[1] of that row is empty the button would be disabled and would be colored to btn btn-danger and the text would be
made to "Paid" however thorugh my attempts I only made everything disabled or perhaps the last entry only as disabled. Here's my latest attempt:
<script type="text/javascript">
$(document).ready(function() {
var button = document.getElementById('btnSubmit');
var id = button.dataset.id;
$('#btnSubmit').attr('data-btn').onkeyup(function() {
if($(this).val() != '') {
$('#btnSubmit').prop('disabled', true);
}
else{
$('#btnSubmit').prop('disabled', false);
}
});
});
</script>
And its disabling all buttons. I just want the bytton to be enabled when its empty and disabled if its empty, and again as Ive said would be colored to btn btn-danger and the text would be made to "Paid" how do I do this in this case?
I've read the documentations and everything but it didn't work for some reasons. I also tried having an invisible input and getting its id but no luck. Please help

Okay... Assuming that data-bnt is the target element to check on keyup.
(I don't know what data-id is for...)
And that the target must not be empty to enable the submit button.
Then try this:
$(document).ready(function() {
var button = $('#btnSubmit');
var target = $('#'+button.data('btn'));
target.on("keyup",function(){
button.prop('disabled', ($(this).val() == '') ? true : false );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="targetID">
<button
class="btn btn-info"
type="button"
id="btnSubmit"
data-btn="targetID"
data-toggle="modal"
data-target="#myModal"
contenteditable="false"
disabled='disabled'> Pay</button>

Two Html buttons for two different functions

I have a form which has two Options, Submit and Overwrite.
It looks like this:
[ INPUT FIELD ]
[Submit] [Overwrite]
The Overwrite Button only appears when the value already is in the Database.
The HTML Code is:
<input type="text" name="target" id="target">
<button id="submit" name="submit" type="submit" class="btn btn-primary"> Submit </button>
<button id="overwrite" name="overwrite" type="submit" class="btn btn-primary"> Overwrite </button>
The JS Code is:
if(!problem){
data = "submit=save";
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
data+="&overwrite=on";
console.log( "overwrite=on" );
}
});
sendToBean(href, data);
jQuery.each(langs, function(i, lang){
sendToBean(href, data);
});
}
}
If I only have the Submit button, it works.
If I only have the Overwrite button, it works.
But if I have both, the Overwrite button wont work anymore.
Does anyone have a solution to this problem?

put retrun false in the anonymous callback function will do the trick. since you declare that the button is a submit button
if(!problem){
data = "submit=save";
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
data+="&overwrite=on";
console.log( "overwrite=on" );
}
return false;
});
sendToBean(href, data);
jQuery.each(langs, function(i, lang){
sendToBean(href, data);
});
}
}

When you click the submit button the page will be refreshed and the overwrite will return to the initial format and the selected will disappear, Try to change the input type to button :
<button id="overwrite" name="overwrite" type="button" class="btn btn-primary"> Overwrite </button>
Hope this helps.

Remove <input type=""> for Overwrite button you may use <button>
Overwrite

<input type="text" name="target" id="target">
<input type="submit" id="btnSubmit" name="btnSubmit" class="btn btn-primary" value="submit"/>
<input type="submit" id="btnOverwrite" name="btnOverwrite" class="btn btn-primary" value="Overwrite"/>
$(document).ready(function(){
$("#btnOverwrite").unbind("click").bind("click",function(e){
e.preventDefault();
alert("overwrite called");
});
$("#btnSubmit").unbind("click").bind("click",function(e){
e.preventDefault();
alert("submit called");
})
});
Review fiddle
https://jsfiddle.net/dipakchavda2912/rwdakvyg/

jQuery: Button add and remove closest

I have a HTML as follows:
<div class="parent-wrapper">
<div class="test-guided-search-row">
<select class="form-control test-guided-search-row-select-bool-query">
<option>AND</option>
</select>
<select class="form-control test-guided-search-row-select-query-path">
<option>ALL</option>
</select>
<select class="form-control test-guided-search-row-query-type">
<option>abcd</option>
<option>efg</option>
</select>
<input class="form-control" type="text">
<button class="btn btn-primary btn-sm" type="button" data-button-action="addRow">+</button>
<button class="btn btn-primary btn-sm" type="button" data-button-action="deleteRow">-</button>
</div>
</div>
How can I make it so that the button + will add the entire row div next to the div in which the button that was clicked? I am having trouble with this because there are multiple of these row divs and I want to be able to add row next to this div row and remove only that row.

To achieve this you need to use delegated event handlers as the button elements will be dynamically appended to the DOM. From there you can use closest() to find the row, along with clone() and append() or remove() respectively.
Firstly, add classes to the buttons to make identifying them easier:
<button class="btn btn-primary btn-sm btn-add" type="button" data-button-action="addRow">+</button>
<button class="btn btn-primary btn-sm btn-delete" type="button" data-button-action="deleteRow">-</button>
Then you can attach events to them:
$('.parent-wrapper').on('click', '.btn-add', function() {
$(this).closest('.test-guided-search-row').clone().appendTo('.parent-wrapper');
}).on('click', '.btn-delete', function() {
$(this).closest('.test-guided-search-row').remove();
});
Example fiddle

find your row, clone it, append it.
$('.button').on('click', function() {
var row = $(this).closest('.test-guided-search-row').clone();
$('.parent-wrapper').append(row);
})
find your row, delete it.
delete
$('.button').on('click', function() {
var row = $(this).closest('.test-guided-search-row').remove();
})
// you need to define what button is + what button is - with a class name

$('.parent-wrapper').on('click', '.btn-add', function() {
var row = $(this).closest('.test-guided-search-row').clone();
$(this).closest('.test-guided-search-row').after(row);
}).on('click', '.btn-delete', function() {
$(this).closest('.test-guided-search-row').remove();
});
This is what exactly solved my issue. I wanted to append to the closest button click row.

If you want to be able to add row next to a particular div row and remove only that row, you need to add a number as the id to each
This might help:
Pass
$(this).closest('.new-wrapper')[0].id
to addRow(rowId) when clicking on the + button.
function addRow(rowId){
var next = rowId+1;
$(".parent-wrapper #rowId").after('<div id="'+next+'" class = "new-wrapper"> $(".test-guided-search-row").html() </div>);
}