We Keep Coding

jQuery to hide and show textarea

I have a textarea that I want to show/hide when ever I click a button
and also I need it to target this way because ill be using it in an undefined number of times
SAMPLE IMAGE HERE
SAMPLE IMAGE HERE
here is the HTML that I want to
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2"><i class="bi bi-plus-circle"></i></button>
</div>
<textarea class="form-control" id="multipleNameReq"></textarea>
and here is the script I try to use hiding/Showing it
$('body').on('click', '.buttonMultipleNameReq',function(){
const element1 = $(this);
const target1 = element1.parent().parent().find("#multipleNameReq");
console.log(target1);
if (target1.style.display === "none") {
target1.style.display = "block";
} else {
target1.style.display = "none";
}
})

the accepted answer will work fine for nonduplicate id of textarea or any other elements, but as you have shown in your image if you want to work this for multiple textarea or any elements I suggest you use the class attribute instead of the id attribute, here is the explanation for why to not use same id multiple times,
Duplicate IDs are common validation errors that may break the accessibility of labels, e.g., form fields, and table header cells.
To fix the problem, change an ID value if it is used more than once to be sure each is unique.
here below is some piece of code that may help you to get what are you looking for
$('body').on('click', '.buttonMultipleNameReq',function(e){
let textArea = $(e.target).parent().parent().find('textarea');
if(textArea.css('display') == "block"){
textArea.hide()
}else{
textArea.show()
}
})
.multipleNameReq{
display:block
}
<div>
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>
</div>
<div>
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>
</div>
<div>
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
Using toggle function
here below is simpler code using jquery toggle, here you can read about toggle
$('body').on('click', '.buttonMultipleNameReq',function(e){
$(e.target).parent().parent().find('textarea').toggle();
})
<div>
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>
</div>
<div>
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>
</div>
<div>
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Since you're using jQuery you could use it's syntax:
To get element:
$('#multipleNameReq');
To Check if element is visible and not hidden:
$('#multipleNameReq').is(":visible");
To Show:
$('#multipleNameReq').show();
To Hide:
$('#multipleNameReq').hide();
A solution to add into your click function would look like:
if ($('#multipleNameReq').is(":visible")) {
$('#multipleNameReq').hide();
} else {
$('#multipleNameReq').show();
}

To access and change the style of an element you need to use the css function.
$('body').on('click', '.buttonMultipleNameReq', function() {
const element1 = $(this);
const target1 = element1.parent().parent().find("#multipleNameReq");
if (target1.css('display') === "none") {
target1.css('display', "block");
} else {
target1.css('display', "none");
}
})
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group mb-3">
<input type="text" name="tname[]" class="form-control" required placeholder="req. for">
<button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">Click<i class="bi bi-plus-circle"></i></button>
</div>
<textarea class="form-control" id="multipleNameReq" style="display: block;"></textarea>
</div>

Handling Button Enabling Via jQuery When 3 Form Areas Need to Have Values

After some reconfiguring I have some jQuery that handles enabling a "save" button when a field has a value:
$(document).ready(function () {
$('.save-button').attr('disabled', true);
$('#selection').keyup(function () {
if ($('#selection').val().length != 0) {
$('.save-button').attr('disabled', false);
} else {
$('.save-button').attr('disabled', true);
}
});
});
... but I realize now I should only enable this button when three separate form elements have values -- two of which are input fields, and one being a text-area.
The thing is, these could be filled in in any order, so how do I get my check to run so as to make sure it enables the "save" button when all three have values? In other words, what event can I use to check this?
The three IDs in question are: selection, schedule, and json-data
Here is my relevant HTML:
<div class="form-group">
<label>Job Name</label>
<input type="text" class="job-name form-control" id="selection">
</div>
<div class="form-group">
<div><label for="meeting-time">Schedule</label></div>
<input type="datetime-local" class="job-schedule form-control" min="getDateDefault()" max="getEndDate()"
id="schedule">
</div>
<div class="form-group">
<label>Repeat Every</label>
<input type="text" class="job-repeat-every form-control">
</div>
<div class="form-group">
<label>Job Data (json)</label>
<textarea class="job-data form-control" id="json-data">{}</textarea>
</div>
<div class="form-group">
<span class="btn btn-default btn-success save-button" data-action="save">Save</span>
<span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
</div>

You should use the focusout event on each element you need to check its value.
I have created a snippet, you can see the updated version of your code.
$(document).ready(function () {
$('.save-button').attr('disabled', true);
$('#selection, #schedule, #json-data').focusout(function () {
if ($('#selection').val() == "" ||
$('#json-data').val() == "" ||
$('#schedule').val() == ""
) {
$('.save-button').attr('disabled', true);
} else {
$('.save-button').attr('disabled', false);
}
});
});
.btn[disabled="disabled"] {
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label>Job Name</label>
<input type="text" class="job-name form-control" id="selection">
</div>
<div class="form-group">
<div><label for="meeting-time">Schedule</label></div>
<input type="datetime-local" class="job-schedule form-control" min="getDateDefault()" max="getEndDate()"
id="schedule">
</div>
<div class="form-group">
<label>Repeat Every</label>
<input type="text" class="job-repeat-every form-control">
</div>
<div class="form-group">
<label>Job Data (json)</label>
<textarea class="job-data form-control" id="json-data">{}</textarea>
</div>
<div class="form-group">
<span class="btn btn-default btn-success save-button" data-action="save">Save</span>
<span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
</div>

How submit value of input field dynamically

I have some categories:
<div class="cbp-l-inline-title" style=" font-size: 18px;">
<span style="color: #0669b4">Generic Name:</span>
<a><?php echo $category[0]['generic_name'];?></a>
</div>
and I want on click to insert value of this <a> to this form
<form method="post" action="/search/index" class="input-group" style="width: 45%; margin-left: 646px">
<input type="text" name="search" id="search" class="form-control" minlength=3 placeholder="Generic" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div id="suggesstion"></div>
<div class="input-group-btn input-group-append">
<button class="btn btn-primary btn-outline-secondary" type="submit" name="submit">Search</button>
</div>
</form>
so that it dynamically starts search of results of this string. I can't send this value to url because it is not latin characters

html
<div class="cbp-l-inline-title" style=" font-size: 18px;">
<span style="color: #0669b4">Generic Name:</span>
<p class="clickMe">click me: text to send after click</p>
</div>
<form method="post" class="input-group">
<input type="text" name="search" id="search" class="form-control" minlength=3
placeholder="Generic" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div id="suggesstion"></div>
<div class="input-group-btn input-group-append">
<button class="btn btn-primary btn-outline-secondary" type="submit" name="submit">Search</button>
</div>
</form>
And javascript in jquery
$('.clickMe').on('click', function(){
var value = $(this).text()
$('input#search').val(value)
})
https://jsfiddle.net/ora0j4uu/
.submit() if you want submit it as well https://www.w3schools.com/jsref/met_form_submit.asp
edit:
jquery for submit
$('.clickMe').on('click', function(){
var value = $(this).text()
console.log(value)
$('input').val(value)
$('.input-group').submit()
})

displaying the input value of txtbox1 to txtbox2

I want: when I enter in the txtbox Enter amount, then I submit the button , the amount I enter in textbox1 which is inputValue it this display in the txtbox which is totAmountPaid
html
<div class="col-md-12">
<label>Enter Amount:</label>
<input type="text" class="form-control" id="inputValue" value="">
</div>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
script
function myFunction(){
var paidAmount = parseFloat(document.getElementById("inputValue").value);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}

Are you including your JS before you are trying add the onClick handler?
If you load the js beforehand it should work fine.
As you can see here https://jsfiddle.net/Lyspxwvu/1/
<script>
function myFunction(){
var paidAmount = parseFloat(document.getEle`enter code here`mentById("inputValue").v`enter code here`alue);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
</script>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>

jQuery's val() returns empty string on bootstrap popover input field

I have a bootstrap popup form with a few input fields. I've added a submit button to the form, that triggers client-side JS validation. However, when the button is clicked, the current value of the input fields is not captured by jQuery's val() method: I just get an empty string.
Here is the markup:
<div class="popover fade right in" style="top: -154.5px; left: 249px; display: block;">
<div class="arrow">
</div>
<h3 class="popover-title">New Job Site contact</h3>
<div class="popover-content">
<form class="popover-form form-horizontal" id="newjobsite_contact_form" accept-charset="utf-8" method="post" action="http://dev.temperature/home/#">
<div class="form-group">
<div class=" required ">
<input type="text" class="form-control" id="popover-first_name" required="1" placeholder="First name" value="" name="first_name">
</div>
<div class=" required ">
<input type="text" class="form-control" required="1" placeholder="Surname" value="" name="surname">
</div>
<div class=" required ">
<input type="text" class="form-control" required="1" placeholder="Phone" value="" name="phone">
</div>
<div class="">
<input type="text" class="form-control" placeholder="Mobile" value="" name="mobile">
</div>
<div class="">
<input type="email" class="form-control" placeholder="Email" value="" name="email">
</div>
<div class="">
<input type="url" class="form-control" placeholder="Website" value="" name="website">
</div>
</div>
<div class="popover_buttons">
<button class="btn btn-success" onclick="submit_newjobsite_contact(); return false;" type="button" id="newjobsite_contact_submit">Submit</button>
<button class="btn btn-warning" onclick="close_newjobsite_contact(); return false;" type="button" id="newjobsite_contact_cancel">Cancel</button>
</div>
</form>
</div>
</div>
Here is the JS:
function submit_newjobsite_contact() {
errors_found = validate_popover_form($('#newjobsite_contact_form'));
if (errors_found.length == 0) {
// Form values submitted to PHP code through AJAX request here
} else {
error_msg = "Please check the following errors:\n";
$(errors_found).each(function(key, item) {
error_msg += "- "+item.message+"\n";
});
alert(error_msg);
}
}
function validate_popover_form(form_element) {
found_errors = [];
$('span.error').remove();
form_element.find('select,input').each(function(key, item) {
if ($(item).attr('required') && $(item).val().length == 0) {
found_error = true;
found_errors.push({elementname: $(item).attr('name'), message: "A value for "+$(item).attr('placeholder')+" is required"});
}
console.log($(item).val()); // More validation here, just putting debugging code instead
});
return found_errors;
}
What am I doing wrong? All other attributes for these input fields are being correctly retrieved by jQuery, just not the value after I've typed text into them.

The answer to this problem couldn't be found here because I didn't post the whole source JS, which is too large. What really happened is that I accidentally cloned the popover form, which led to a duplication of the input fields.

form_element.find('select,input').each(function(key, item) {
if ($(item).attr('required') && $(item).val().length == 0) {
found_error = true;
found_errors.push({elementname: $(item).attr('name'), message: "A value for "+$(item).attr('placeholder')+" is required"});
}
I Modified it to:
form_element.find('select,input').each(function(key, item) {
if ($(this).data('required') == '1' && $(this).val().length == 0) {
found_error = true;
found_errors.push({elementname: $(this).attr('name'), message: "A value for "+$(this).attr('placeholder')+" is required"});
}
Try using data attributes so instead of using required="1" use data-required="1"
<input type="text" class="form-control" required="1" placeholder="Surname" value="" name="surname">
so your input should be like this:
<input type="text" class="form-control" data-required="1" placeholder="Surname" value="" name="surname">