We Keep Coding

Change button value after clicking on it [duplicate]

This question already has answers here:
Changing button text onclick
(19 answers)
Closed 4 years ago.
I have a function which returns bootstrap row and every row contains input field, textarea and remove button.
So I have multiple bootstrap rows as I am calling function for various time. After clicking on remove button I am changing border color of input and textarea just to indicate that I am not taking it into consideration. I have made remove button to work as toggle button so that it will add and remove error class that I am assigning to input and textarea.
Now I want to change the value of 'Remove' button to 'Add'. So that when I click on 'Add' button it will remove the style of input and textarea and it means that I can take those values into consideration.
function GetDynamicTextBox(value, tag) {
return'<div class="col-lg-4"><input class="form-control" type="text" value="'+tag+'" name="typetag" id="tags" data-role="tagsinput"/></div>'+'' +
'<div class="col-lg-6"><textarea class="form-control issuetext" name="comment" id="" cols="" rows="">'+value+'</textarea></div>'+
'<div class="col-lg-2">'+
'<input type="button" value="Remove" class="remove btn btn-default" /></div>'
}
$("body").on("click", ".remove", function () {
$(this).closest('#issue').find('.bootstrap-tagsinput').toggleClass('error')
$(this).closest('#issue').find('.issuetext').toggleClass('error')
});
<div class='row'id="issue">
<div class="col-lg-4">
<input class="form-control" type="text" value="'+tag+'" name="typetag"
id="tags" data-role="tagsinput"/></div>
<div class="col-lg-6">
<textarea class="form-control issuetext" name="comment" id="" cols=""
rows="">'+value+'</textarea></div>
<div class="col-lg-2">
<input type="button" value="Remove" class="remove btn btn-default" /></div>
</div>

It's pretty straightforward. Just add a click event to the button. The click event will give you an event (e) and you can then call the standard .innerText property on the element to set it. No need for jQuery here...
const btn = document.getElementById('testButton');
let clickCount = 0;
btn.addEventListener('click', (e) => {
e.currentTarget.innerText += clickCount++;
});
<button type="text" id="testButton">Initial Value</button>

You can add an event listener to the button and change its textContent according to the value of a global variable.
<button id="removeOrAdd">Remove</button>
<script>
var remove = true;
document.getElementById("removeOrAdd").addEventListener("click", function(e){
if(remove){
this.textContent = "Add";
remove = false;
} else {
this.textContent = "Remove";
remove = true;
}
});
</script>

Listener that checks to see if button is DISABLED and IF IT IS clicked on while disabled and if it is, pop up an alert

I am new to Javascript and jquery and trying to learn
I made a submit button that stay disabled while the client doesn't upload an image. It is working fine.
The submit button is called PROSEGUIR.
What I am trying to do is... if the client try to click in the PROSEGUIR button while it is disabled, it pop up an alert msg.. but it is not working.
Check out the html button:
<input type="submit" disabled="disabled" name="proseguir" id="proseguir" value="Prosseguir >>" class="bg-red btn_next_two">
Is that right ??
NOw, I wrote this listener after jquery in
<script>
$(document).ready(function(){
$("#proseguir").click(function(){
if($(this).is('[disabled=disabled]') == true) {
alert("Please upload an image before submitting");
}
});
});
</script>
What am I doing wrong ? because it is not working. When the user click in PROSEGUIR button (submit) while it is disabled an alert pop up doesn't show up...
Please, help me !!

You can check disabled by using prop() or simply by this.disabled like,
$(document).ready(function(){
$("#proseguir").click(function(){
if($(this).prop('disabled')) { // or use this.disabled
alert("Please upload an image before submitting");
}
});
});
But you can't trigger click event on a disabled element. See snippet,
$(document).ready(function() {
$(".proseguir").click(function() {
console.log(this.disabled);
if ($(this).prop('disabled')) {
alert("Please upload an image before submitting");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" disabled="disabled" name="proseguir" value="Prosseguir >>" class="bg-red btn_next_two proseguir"><br/>
<input type="submit" name="proseguir" value="Prosseguir >>" class="proseguir bg-red btn_next_two">
Instead of checking submit button disabled property, validate your input file element like,
$(document).ready(function() {
$("#proseguir").click(function() {
var fileName = $('#pfile').val();
if (fileName == '') {
alert("Please upload an image before submitting");
return false; // to prevent form submit
} else {
alert('File is: ' + fileName);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="file" name="pfile" id="pfile" class="bg-red btn_next_two proseguir" /><br/>
<input type="submit" id="proseguir" name="proseguir" value="Prosseguir >>" class="proseguir bg-red btn_next_two" />
</form>

when you element is disable you can't catch a click event.
you can do like this:
<input type="submit" class="bg-red btn_next_two is_disable" name="proseguir" id="proseguir" value="Prosseguir">
javascript:
$('#proseguir').click(function (event) {
if ($(this).hasClass('is_disable')) {
alert('do some stuff');
} else {
alert('do some stuff when is enable');
}
});
and when upload finished you can remove is_disable class with
$('#proseguir').removeClass('is_disable')

Disabled elements don't fire events by design, so you can't capture a click on a disabled button.
You could just keep the button enabled and style it in some way, or you could fake the click by placing another element on top of it, like this
$(document).ready(function() {
var inp = $('#proseguir'),
div = $('<div />', {
css: {
height : inp.outerHeight(),
width : inp.outerWidth(),
top : inp.offset().top,
left : inp.offset().left,
zIndex : 999
position : 'absolute',
},
id : 'fakeBtn',
on : {
click: function() {
inp.trigger('click');
}
}
}).appendTo(inp.parent());
$('#uploadFiles').on('change', function() {
$("#proseguir").prop('disabled', false);
$('#fakeBtn').hide();
});
$("#proseguir").click(function() {
if (this.disabled) {
alert("Please upload an image before submitting");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="file" id="uploadFiles">
<br /><br /><br />
<input type="submit" disabled="disabled" name="proseguir" id="proseguir" value="Prosseguir >>" class="bg-red btn_next_two">
</form>

Restoring placeholder value to a search box after reset has been clicked

I am editing some javascript that has a search box with a variable as follows
var secondSearchTerm = $('#2nd-search').val();
In the HTML code '2nd-search' has a placeholder 'Enter search term'
I also have a reset button that clears the search as follows:
$("#2nd-reset-btn").on("click", function () {
return myNetwork.resetSecondSearch();
})
What I would like to do is to get the search box to re-populate with the placeholder when reset is clicked. Right now the last entered term remains in the search box.
Any ideas on how I can edit the code to do this?
Many thanks!

hi refer this link https://plnkr.co/edit/EtLmby5BdD5Yn70EIBRD?p=preview
js
// Add your javascript here
$(function(){
$("#reset").on("click", function () {
return $('#username').val('');
});
});
html
<input type="text" name="name" id = "username" placeholder="uname"/>
<button id="reset">Reset </button>

All you need to do is set the value to blank & take the focus away from the input(As some browsers hide placeholder on focus). The placeholder will be visible again. Try the following:
$("#2nd-reset-btn").on("click", function () {
secondSearchTerm.blur();
return secondSearchTerm.val('');
})

You can do it with pure JS only
Given the initial value
function reset() {
var initialValue = 'Enter your search term.';
var query = document.getElementById('myquery');
query.value = initialValue;
}
<input type="text" id="myquery" />
<input type="button" id="reset" onclick="reset()" value="Reset" />
Given the placeholder
function reset() {
var query = document.getElementById('myquery');
query.value = '';
}
HTML
<input type="text" id="myquery" />
<input type="button" id="reset" onclick="reset()" value="Reset" />

jquery - copy value of input from one form to another (form and input named the same)

I would like to copy the value from an input in one form to the value of an input(with the same name) of the next form down. The forms and inputs are named the same. All it needs to do is copy the value of the title input to the title input one form down.
<form>
<input name="file" value="1.xml">
<input name="title" id="title" value="Smith">
<input type="submit" id="copy-down" value="copy">
</form>
<form>
<input name="file" value="2.xml">
<input name="title" id="title" value="Anderson">
<input type="submit" id="copy-down" value="copy">
</form>
etc...
In this case when the top "copy" button is clicked I would like jquery to overwrite Anderson with Smith.
$('#title').attr('value'));
Gives me Smith but I'm not sure what to do with that value once I have it.

Change HTML to this:
<form>
<input name="file" value="1.xml">
<input name="title" id="title1" value="Smith">
<input type="submit" id="copy-down1" value="copy">
</form>
<form>
<input name="file" value="2.xml">
<input name="title" id="title2" value="Anderson">
<input type="submit" id="copy-down2" value="copy">
</form>
Javascript:
function copyHandler() {
var copyVal = document.getElementById("title1").value;
var replaceInput = document.getElementById("title2");
replaceInput.value = copyVal;
}
document.getElementById("copy-down1").onclick = function(){
copyHandler();
return false;
}
Some notes:
This is so straightforward in vanilla javascript that I didn't add the jQuery code.
You should never assign multiple elements to the same ID, class or name can be used for that purpose.
The return false; portion of the onclick function is necessary so that the form doesn't reload when you click your submit button.
Let me know if you have any questions.

you can try
$(document).ready(function(){
$('form').on('submit', function(e){
e.preventDefault();
var GetNameAttr = $(this).find('input:nth-child(2)').attr('name');
var GetTitleValue = $(this).find('input:nth-child(2)').val();
var NextFormNameAttr = $(this).next('form').find('input:nth-child(2)').attr('name');
if(NextFormNameAttr == GetNameAttr){
$(this).next('form').find('input:nth-child(2)').val(GetTitleValue );
}
});
});
Note: this code will change the second input value in next form with
the second input value of form you click if the name is same .. you
can do the same thing with the first input by using :nth-child(1)
Demo here
if your forms dynamically generated use
$('body').on('submit','form', function(e){
instead of
$('form').on('submit', function(e){
for simple use I create a function for that
function changeNextValue(el , i){
var GetNameAttr1 = el.find('input:nth-child('+ i +')').attr('name');
var GetTitleValue1 = el.find('input:nth-child('+ i +')').val();
var NextFormNameAttr1 = el.next('form').find('input:nth-child('+ i +')').attr('name');
if(NextFormNameAttr1 == GetNameAttr1){
el.next('form').find('input:nth-child('+ i +')').val(GetTitleValue1);
}
}
use it like this
changeNextValue($(this) , nth-child of input 1 or 2);
// for first input
changeNextValue($(this) , 1);
// for second input
changeNextValue($(this) , 2);
Working Demo

Return variable for input fields in JavaScript jQuery

I have some code.
$('#my-mkfile').click(function(e) {
e.stopPropagation();
e.preventDefault();
//window.console.log('mkdir button pressed');
f[0].elfinder.ui.exec('mkfile');
$('#finder .el-finder-cwd').find(':text').val('XXXXXX');
$(document.body).click();
var timestamp=0;
}
At the moment it works with a button. And creates a val named 'XXXXXX'
<input type="button" value="my mkfile" id="my-mkfile">
How can I change it so that it is a text field and passes to val('XXXXXX'). I just spent a day on it lol. Should be easy.

Add a text field
<input type="text" id="textFieldID" value="" />
and change the code to
$('#finder .el-finder-cwd').find(':text').val($('#textFieldID').val());