Develop Reference

How to get the value of adjacent element and change it using Javascript or Jquery

I'm facing issue in selecting an adjacent element and updating its value, I want to update the input value by clicking the -,+ buttons. I'm able to get all the buttons and looping through buttons adding onclick event listener to each button, I'm facing an issue in selecting (.amount value input) and updating it's value
function decreaseAmount(step){
const buttons=document.querySelectorAll(".input-amount button");
buttons.forEach(function(button){
button.addEventListener("click", function(event) {
console.log(event.currentTarget.parentElement);
});
});
}
function increaseAmount(step){
const buttons=document.querySelectorAll(".input-amount button");
buttons.forEach(function(button){
button.addEventListener("click", function(event) {
console.log(event.currentTarget.parentElement);
});
});
}
<div class="row break-none input-amount">
<div class="col align-right">
<button class="app-action secondary" type="button" role="button" onclick="decreaseAmount(10)">
<span>−</span>
</button>
</div>
<div class="col amount-value">
<input id="amountvalue2135" type="number" value="1000" step="10" class="form-control">
</div>
<div class="col">
<button class="app-action secondary" type="button" role="button" onclick="increaseAmount(10)">
<span>+</span>
</button>
<div class="row break-none input-amount">
<div class="col align-right">
<button class="app-action secondary" type="button" role="button" onclick="decreaseAmount(10)">
<span>−</span>
</button>
</div>
<div class="col amount-value">
<input id="amountvalue2135" type="number" value="1000" step="10" class="form-control">
</div>
<div class="col">
<button class="app-action secondary" type="button" role="button" onclick="increaseAmount(10)">
<span>+</span>
</button>
</div>
</div>
</div>
</div>

For starters, it's important with the javascripting to have good HTML structure. You had a row inside of a col.. I am not sure if that was intentional, but when you adapt the code in ths answer let me know if it doesn't fit with your structure.
Anyhow, the way I set this up is to put event listeners on all the buttons with the attribute data-increment which is something I added. You'll see the +10/-10 are in there. Then when you click a button, it knows how to get it's own increment. The button eventListener always has a single argument event (but you can call it whatever you want, I chose e). To find the input element relative to the button, I used .closest(). For instance this line:
let input = target.closest('.row').querySelector('input[type=number]')
This line says input = the input type='number' element that lives in the element with the class row that is the closest parent to me
You'll see many + before variables. This is shorthand to tell javascript to treat that variable as a number (since any html input element's value will always be a string)
document.querySelectorAll('button[data-increment]').forEach(btn => {
btn.addEventListener('click', function(e) {
let target = e.target;
if (e.target.tagName.toLowerCase() !== "button") target = e.target.closest('button');
let inc = target.dataset.increment;
let input = target.closest('.row').querySelector('input[type=number]')
input.value = +input.value + +inc;
})
})
.col {
display: inline-block;
}
.row {
display: block;
margin-bottom: 10px;
}
<div class="row break-none input-amount">
<div class="col align-right">
<button class="app-action secondary" type="button" role="button" data-increment="-10">−</button>
</div>
<div class="col amount-value">
<input id="amountvalue2135" type="number" value="1000" step="10" class="form-control">
</div>
<div class="col">
<button class="app-action secondary" type="button" role="button" data-increment="10">+</button>
</div>
</div>
<div class="row break-none input-amount">
<div class="col align-right">
<button class="app-action secondary" type="button" role="button" data-increment="-10"> − </button>
</div>
<div class="col amount-value">
<input id="amountvalue2135" type="number" value="1000" step="10" class="form-control">
</div>
<div class="col">
<button class="app-action secondary" type="button" role="button" data-increment="10">+</button>
</div>
</div>

If you are allowed to use JQuery, this is the simplified version
$(function() {
$(".minus").on('click', function() {
let inputField = $(this).parent().find('input');
let stepAmt = Number($(inputField).attr('step'));
let currValue = Number($(inputField).val());
$(inputField).val(currValue - stepAmt);
});
$(".plus").on('click', function() {
let inputField = $(this).parent().find('input');
let stepAmt = Number($(inputField).attr('step'));
let currValue = Number($(inputField).val());
$(inputField).val(currValue + stepAmt);
});
});
button {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row break-none input-amount">
<button class="app-action secondary minus" type="button" role="button"> - </button>
<input id="amount1" type="number" value="1000" step="10" class="form-control">
<button class="app-action secondary plus" type="button" role="button"> + </button>
</div>
<div class="row break-none input-amount">
<button class="app-action secondary minus" type="button" role="button"> - </button>
<input id="amount2" type="number" value="1000" step="10" class="form-control">
<button class="app-action secondary plus" type="button" role="button"> + </button>
</div>

Cannot create multiple text box with different id using JavaScript and jQuery

I am unable create multiple text field dynamically using JavaScript and jQuery. My code is below:
<div class="col-md-3">
<div class="form-group">
<label for="ques">No of questions</label>
<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" type="text">
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label>Questions</label>
<input type="button" style="line-height:13px; margin-right:2px;" class="btn btn-success btn-sm" name="plus" id="plus" value="+" onClick="addQuestionField();">
<input type="button" style="line-height:13px; margin-right:2px;" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" onClick="deleteQuestionField();">
</div>
<div class="text-left" id="intro-add" style="display:none">
<input type="button" name="" class="btn btn-sm btn-info" value="Add">
</div>
</div>
</div>
<div id="container">
<div class="form-group" style="margin-top:5px;display:block" id="introBox0" >
<div>
<input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox0" id="scaleans00" name="labelname" placeholder="Answer" value="">
<input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-">
<div class="text-left" id="intro-add" style="display:block">
<input type="button" name="" class="btn btn-sm btn-info" value="Add" onclick="addMore(0,0)">
</div>
</div>
</div>
<hr>
</div>
Here user will create multiple question section and each question section user has to create multiple field using add button and will delete using minus button . Each question field should unique id.Suppose in section one there are 3 input field then its ids should be like this scaleans00,scaleans01,scaleans02... and for section two these should be scaleans10,scaleans11,scaleans12... and so on.
Here is my JavaScript code:
<script>
function addQuestionField() {
var get = $("#ques").val();
for (var i = 1; i < get; i++) {
$('#container').append('<div class="form-group dyn" style="margin-top:5px;display:block" id="introBox'+i+'"><div><input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox'+i+'" id="scaleans'+i+'0" name="labelname" placeholder="Answer" value=""><input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-"><div class="text-left" id="intro-add" style="display:block"><input type="button" name="" class="btn btn-sm btn-info" value="Add" onclick="addMore('+i+',0)"></div></div></div><hr>');
}
}
function deleteQuestionField() {
var textareas = $('#container .dyn');
if (textareas.length !== 0) {
textareas.last().remove();
$('#ques').val(textareas.length - 1);
}
}
function addMore(parent,child){
var mainDiv='#introBox'+parent;
$(mainDiv).append('<div><input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox'+parent+'" id="scaleans" name="labelname" placeholder="Answer" value="">'+'<input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-"></div>');
repopulate(parent);
}
function repopulate(k){
var mainId='.inptbox'+k;
var j=0;
$(mainId).each(function(i, e) {
if(i==0){
$(this).attr('id', 'scaleans' + i+j);
$(this).next().attr('onClick', function(old, n) {
return 'removeThis(' + i + ','+j+')';
})
$(this).next().attr('id', function(old, n) {
return 'labelminus' + i+j;
});
}else{
$(this).attr('id', 'scaleans' + i+(j+1));
$(this).next().attr('onClick', function(old, n) {
return 'removeThis(' + i + ','+(j+1)+')';
})
$(this).next().attr('id', function(old, n) {
return 'labelminus' + i+(j+1);
});
}
})
}
function removeThis(r,t) {
$("#scaleans" + r+t).remove();
$("#labelminus" + r+t).remove();
repopulate();
}
</script>
Here I can not create as per my requirement. Here is my full code.

I will be explaining to you what is going on with the current code you have put in Plunker
function addQuestionField() {
var get = $("#ques").val();
for (var i = 1; i < get; i++) {
In Your method addQuestionFiled(), the value retrieved into get variable is not truthy, if you are not entering any value into the
number of questions
textfield. Hence the html will not get appended
Fill in the number of question as 2, and then click add it will keeping on appending the html to container div as the 'var get' will have the value 2 and 'var i' is less than 'var get'

getting a div id using javascript in a foreach loop

I am using laravel and want to make an ajax call to retrieve the id of the product but as u can see here it will get only the first product id because they will have the same id (or the first when the page load)
but i want it to : when i press add to cart, the clicked product id is sent
and my skills are not that good , this is my first app, can any one help ?
here is the code
#foreach($row as $product)
<form method="post" id="reg-form">
<input type="hidden" name="post_id" id="post_id" value="{{ $product->slug }}">
{!! csrf_field() !!}
<div class="col-sm-10 col-lg-3 col-md-10 ">
<div class='productbox '>
#if($image = $product->images()->first())
<img src="{{ $image->thumbnail }} " class="img-responsive" alt="a" />
#endif
<div class="producttitle">{{ $product->name }}</div>
<div class="pull-right">
#for ($i = 5 - $product->rating ; $i < 5 ; $i++)
<a> <i class="price-text-color fa fa-star"></i></a>
#endfor
#for ($i = $product->rating ; $i < 5 ; $i++)
<a> <i class=" fa fa-star"></i></a>
#endfor
</div><br />
<p class="text-justify"></p>
<address class="ellipsis">
<strong>{{ $product->description }}</strong><br>
</address>
<address>
{{ $product->name }}<br>
</address>
<div class="productprice">
<div class="pull-right">
<input type="button" id="getre" class="btn btn-danger btm-sm " role="button" value="Add to Wishlist">
</div>
<div class="pricetext">
<input type="submit" id="getRequest" class="btn btn-info btm-sm " role="button" value="Add to cart">
More Details <span class="glyphicon glyphicon-zoom-in"></span>
<!-- Edit <span class="glyphicon glyphicon-cog"></span> -->
</div>
</div>
</div>
</div>
</form>
#endforeach
this is the javascript
$(document).ready(function()
{
$(document).on('submit', '#reg-form', function()
{
var data = $("#post_id").val();
$.ajax({
type : 'POST',
url : '{{url("/ajax")}}',
data: {'name':data, '_token': $('input[name=_token]').val()},
success : function(data)
{
$(getRequest).replaceWith('<img id=getRequest width=50 height=40 src= http://www.cuisson.co.uk/templates/cuisson/supersize/slideshow/img/progress.BAK-FOURTH.gif> ');
setTimeout(function() {
$(getRequest).replaceWith(' <input type="submit" id="getRequest" class="btn btn-info btm-sm " role="button" value="Add to cart"> ').hide('blind', {}, 500)
}, 1300);
console.log(data);
}
});
return false;
});
});

You are trying to get an element with id="post_id". There could be a lot of these elements in your page. You need to get the element with id="post_id" that is inside your current form element. You can do it in this way:
var data = $(this).find("#post_id").val();

The model of your product should have a unique ID. So when you iterate over all your products, you should set the id of the div with the same ID of the model. Then you can get it with jquery by $(".your-product-div").attr("id")

HTML Javascript - Replace a button with a search field onclick

I have a simple button:
<p><button class="btn btn-lg btn-success btn-parks"
onclick="search()">Get started today</a></p>
On click I want to completely replace the above code with a search field. I'm wondering what the best way is to replace the code above with the code for the search field onclick using JavaScript or JQuery.
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>

Use element.outerHTML='NEW HTML'
To get the current element, pass this as argument
To replace p element as well, Use elem.parentElement.outerHTML => parentElement will return parent node of the owner node..
Try this:
var html = '<div class="box">\
<div class="container-1">\
<span class="icon"><i class="fa fa-search"></i></span>\
<input type="search" id="search" placeholder="Search..." />\
</div>\
</div>';
function search(elem) {
elem.outerHTML = html;
}
<p>
<button class="btn btn-lg btn-success btn-parks" onclick="search(this)">Get started today</button>
</p>

First of all - your code is not valid: tag starts as <button> but ends as </a>.
To hide initial search .box you can place it in <script> tag and set it's type attribute to unrecognizable (random text). After clicking button take this template inner html and replace it with your code.
Also I have passed this to function to get element you clicked, so you can have multiple same purpose elements.
function search(el) {
$(el)
.parents()
.eq(1)
.html($('#box-tpl').html())
;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>
<button class="btn btn-lg btn-success btn-parks" onclick="search(this)">Get started today</button>
</p>
</div>
On click I want to completely replace the above code with a search field. I'm wondering what the best way is to replace the code above with the code for the search field onclick using JavaScript or JQuery.
<script type="text/tmpl" id="box-tpl">
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
</script>

you can use onclick
$('#id').on('click', function(e){
$('#id').replaceWith('<input type="text" name="q" size="25" id="newelement" value=""/>');
});
if you want cursor in input field in onclick event
$("newelement").focus();

Try this:
function search(){
var button = document.getElementsByClassName('btn btn-lg btn-success btn-parks');
var button0 = button[0];
button0.outerHTML = ('<div class="box"> <div class="container-1"> <span class="icon"><i class="fa fa-search"></i></span> <input type="search" id="search" placeholder="Search..."/> </div></div>');
}

Use jQuery's hide() and show() functions:
$('button').click(function(){
$('.button').hide();
$('.box').show();
});
$('button').click(function(){
$('.button').hide();
$('.box').show();
});
.box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="button">
<button class="btn btn-lg btn-success btn-parks" onclick="search()">Get started today</button>
</p>
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
jsFiddle with Bootstrap styles

Append a entire div with all its elements using jquery

Using jQuery I want to append a entire div when a click event happens. I tried but it's not working.
When a user clicks the Add another image I want to append the entire div tag with all its elements.
Here is my code:
<form method="post" id="form_property" enctype="multipart/form-data">
<div class="row">
<div class="span4" id="image">
<h3><strong>4.</strong> <span>Add Images to your Property</span></h3>
<div class="fileupload fileupload-new control-group" data-provides="fileupload">
<label class="control-label" for="inputPropertyPrice">Image files</label>
<div class="input-append">
<div class="uneditable-input"> <i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div> <span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" name="files1" accept="image/*" />
</span>
</div>
</div>
</div>
<!-- /.span4 -->
</div>
<!-- /.row -->
<br/> <a id="another_image" class="btn btn-primary btn-small list-your-property" href="#">Add Another Image</a>
<br/>
<br/>
<input type="submit" name="submit" value=" Save images " class="btn btn-primary btn-large" style="float: left; width: 370px; height: 50px; margin-top: 10px">
</form>
Jquery
<script type="text/javascript">
$(document).ready(function(){
var count = 2;
$('#another_image').click (function(){
if(count < 7){
$('<br/><br/>
<div class="input-append">
<div class="uneditable-input">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" name="files'+ count +'" accept="image/*" />
</span>
</div>
').appendTo ("#image");
count++;
}
});
});
</script>
Can someone please help me to fix this?

Use .appendTo() along with clone().
If you don't use clone() the same div will get replaced and nothing will be updated in the target. You don't need to type/copy the whole html.
Syntax : $(Element_Selector).appendTo(TargetSelector).
$($('.input-append').first().clone()).appendTo("#image");
Fiddle
*Note: Cloning existing html might create duplicate Ids. Take care of it.

I prefer #Shaunak's answer which is more efficient, but if you want to follow in your way then check THIS DEMO and the below code
$(document).ready(function(){
var count = 2;
$('#another_image').click (function(){
if(count < 7){
$('<br/><br/>' +
'<div class="input-append">' +
'<div class="uneditable-input">'+
'<i class="icon-file fileupload-exists"></i>' +
'<span class="fileupload-preview"></span>' +
'</div><span class="btn btn-file">'+
'<span class="fileupload-new">Select file</span>'+
'<span class="fileupload-exists">Change</span>' +
'<input type="file" name="files'+ count +'" accept="image/*" />'+
'</span></div>').appendTo ("#image");
count++;
}
});
});