I want to increment values by 1, when I click buttons then it is get value by input hidden and show in console. like click button add1 it is pick the value 5 and show in console and vice versa. now I want to increment value by 1 to click every button get value and increment. like click add1 and show 5 in console when I click again add1 button it os increment by 1 and show 6 and so on. any suggestion how do this?
jQuery(function($) {
$(document).on('click', '.add', function(e) {
var $parent = $(this).closest('.vote');
var _vote = parseInt($parent.find('#_vote').val());
console.log(_vote);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title></title>
</head>
<body>
<div class="vote">
<button class="add">add1</button>
<input type="hidden" name="_vote" id="_vote" value="5">
</div>
<div class="vote">
<button class="add">add2</button>
<input type="hidden" name="_vote" id="_vote" value="10">
</div>
<div class="vote">
<button class="add">add3</button>
<input type="hidden" name="_vote" id="_vote" value="15">
</div>
On each click you can increase the value by one and set it back to the value of the input field. I would suggest you to store the input element in a variable so that you wont have to fetch that again and again.
jQuery(function($) {
$(document).on('click', '.add', function(e) {
var $el = $(this).closest('.vote').find('#_vote')
var _vote = +$el.val();
console.log(_vote);
$el.val(_vote + 1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title></title>
</head>
<body>
<div class="vote">
<button class="add">add1</button>
<input type="hidden" name="_vote" id="_vote" value="5">
</div>
<div class="vote">
<button class="add">add2</button>
<input type="hidden" name="_vote" id="_vote" value="10">
</div>
<div class="vote">
<button class="add">add3</button>
<input type="hidden" name="_vote" id="_vote" value="15">
</div>
Just set the new incremented value to the same element
$parent.find('#_vote').val( _vote + 1 );
Demo
jQuery(function($) {
$(document).on('click', '.add', function(e) {
var $parent = $(this).closest('.vote');
var _vote = parseInt($parent.find('#_vote').val());
console.log(_vote);
$parent.find('#_vote').val( _vote + 1 ); //this line has been added
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title></title>
</head>
<body>
<div class="vote">
<button class="add">add1</button>
<input type="hidden" name="_vote" id="_vote" value="5">
</div>
<div class="vote">
<button class="add">add2</button>
<input type="hidden" name="_vote" id="_vote" value="10">
</div>
<div class="vote">
<button class="add">add3</button>
<input type="hidden" name="_vote" id="_vote" value="15">
</div>
Note
Its a good idea to save the $parent.find('#_vote'), just like you did for $parent into a variable so that you don't have to fetch it again.
You can add an each loop then define i by 0 then increment i with i++ when click. In other word, you plus your current value with 0 then after second click i increment by i++ then it plus current value with 1.
jQuery(function($) {
$('.add').each(function() {
var i = 0;
$(this).on('click', function(e) {
var $parent = $(this).closest('.vote');
var _vote = parseInt($parent.find('#_vote').val());
console.log(_vote + i++);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title></title>
</head>
<body>
<div class="vote">
<button class="add">add1</button>
<input type="hidden" name="_vote" id="_vote" value="5">
</div>
<div class="vote">
<button class="add">add2</button>
<input type="hidden" name="_vote" id="_vote" value="10">
</div>
<div class="vote">
<button class="add">add3</button>
<input type="hidden" name="_vote" id="_vote" value="15">
</div>
Please try with this jQuery function.
jQuery(function($) {
$(document).on('click', '.add', function(e) {
var $parent = $(this).closest('.vote');
var _vote = parseInt($parent.find('#_vote').val());
var test = _vote + parseInt(1);
var $parentId = $(this).closest('.vote');
var _voteId = $parent.find('#_vote');
_voteId.val(test);
console.log(_vote);
});
});
You can do this like Below.
Just add below two lines in your Jquery code
var _vote = parseInt($parent.find('#_vote').val()) + 1;
$parent.find('#_vote').val(_vote)
jQuery(function($) {
$(document).on('click', '.add', function(e) {
var $parent = $(this).closest('.vote');
var _vote = parseInt($parent.find('#_vote').val()) + 1;
$parent.find('#_vote').val(_vote)
console.log(_vote);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title></title>
</head>
<body>
<div class="vote">
<button class="add">add1</button>
<input type="hidden" name="_vote" id="_vote" value="5">
</div>
<div class="vote">
<button class="add">add2</button>
<input type="hidden" name="_vote" id="_vote" value="10">
</div>
<div class="vote">
<button class="add">add3</button>
<input type="hidden" name="_vote" id="_vote" value="15">
</div>
get hidden value and increment it by one and then store this value in hidden field.
var $parent = $(this).closest('.vote');
var _vote = parseInt($parent.find('#_vote').val());
console.log(_vote);
$parent.val(parseInt(_vote)+1)
Related
Im trying it with laravel. On button click I need to display the same div .
My code:
<h6>Other features </h6>
<div id="add1">
<input type="text" name="selprice" />
<input type="submit" value="+" id="add">
</div>
This is my html code.Here,when I click the button**(ie.,+)** it should show up the same div(ie add1).
Script code:
<script type="text/javascript">
$(document).ready(function () {
$("#add").click(function () {
$("#add1").show();
});
});
</script>
This is what I have tried.
if you are cloning div use class instead of id.
use this context to get the click element
use append to add the cloned div to container
$(document).ready(function() {
$(document).on("click",".add",function() {
$("#container").append($(this).parent(".add1").clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" class="add">
</div>
</div>
Update
$(document).ready(function() {
$(document).on("click", ".add", function() {
var clone = '<div class="add1"><input type="text" name="selprice" /><input type="submit" value="+" class="add"></div>';
$("#container").append(clone);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" class="add">
</div>
</div>
Here you go with the solution https://jsfiddle.net/nuu4ofwu/2/
var cnt = 1;
$(document).on('click', 'input[type=submit]', function(){
cnt++;
var div = $(this).parent().clone();
$('body').append(div);
$('div:last-child').attr('id', 'add' + cnt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" id="add" />
</div>
You should define another div as a template:
HTML:
<div id="template" style="display:none;">
<div id="add_2">
<h6>Other features</h6>
<input type="text" name="selprice" />
<input type="submit" value="+" id="add_button_number"></div>
</div>
</div>
Javascript:
<script>
$('#add').click(function(){
var str = $('#add_2').html();
$('#add1').after(str);
})
</script>
I have created 4 input boxes with plus and minus to increase and decrease the value. I want to make a logic that as soon as the sum of all 4 values adds up to 5, it should disable the plus buttons and do not allow the user to add more.
This is the HTML:
<div id="field1">field 1
<button type="button" id="sub" class="sub">-</button>
<input type="text" id="1" value="0" class="field" />
<button type="button" id="add" class="add">+</button>
</div>
<div id="field2">field 2
<button type="button" id="sub2" class="sub">-</button>
<input type="text" id="2" value="0" class="field" />
<button type="button" id="add2" class="add">+</button>
</div>
<div id="field2">field 3
<button type="button" id="sub3" class="sub">-</button>
<input type="text" id="3" value="0" class="field" />
<button type="button" id="add3" class="add">+</button>
</div>
<div id="field2">field 4
<button type="button" id="sub4" class="sub">-</button>
<input type="text" id="4" value="0" class="field" />
<button type="button" id="add4" class="add">+</button>
</div>
This is the jQuery I am using to increase/decrease the values:
$("input").prop('disabled', true);
$('.add').click(function () {
$(this).prev().val(+$(this).prev().val() + 1);
});
$('.sub').click(function () {
if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);
});
This should work
$('.add').click(function () {
var value1 = $('#field1').find('input').val();
var value2 = $('#field2').find('input').val();
var value3 = $('#field3').find('input').val();
var value4 = $('#field4').find('input').val();
if ( value1 + value2 + value3 + value4 >= 5){
$('.add').prop('disabled', true);
} else {
$(this).prev().val(+$(this).prev().val() + 1);
}
});
<script>
function run() {
document.getElementById("ip").value= document.getElementById("Ultra").value;
}
</script>
<script>
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'"><span class="lb">Ip Address:</span><input id="ip" type="text" name="ip[]" size="4" value="'+frm.add_ip.value+'" required placeholder="192.168.0.1:80" class="form-control wid2" /> <input type="button" value="-" onclick="removeRow('+rowNum+');" class="remove" style=" width:9%;"></p>';
jQuery('#itemRows').append(row);
frm.add_ip.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="myformp">
<form method="get" class="myformp2" id="ipForm">
<div id="itemRows">
<span class="lb">Ip Address:</span><input class="form-control wid2 " type="text" name="add_ip" size="4" required placeholder="192.168.0.1:80" title="ip address" id="ip"/> <input type="button" value="+" class="add" style=" width:9%;" />
</div>
<button type="submit" class="btn btn-default mybtn2">save</button>
<div class="clear"></div>
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option onclick="addRow(this.form);"value="0">Select</option>
<option onclick="addRow(this.form);"value="8">text1</option>
<option onclick="addRow(this.form);"value="5">text2</option>
<option onclick="addRow(this.form);"value="4">text3</option>
</select>
</form>
</div>
i want when click on option input add and option value replace with input value but when click on the option more than one it dont replace and i must click on another option then click it can work!
You are setting the value of the newly created input to frm.add_ip.valuŠµ which is the value of the input, not the select.
Since it's in a form you're already using, you can access the select (and it's value) using
form.Ultra.value
which gives you the actual value (0,8,5,4), or you can access it via jquery with
$("#Ultra").val()
which gives you the same thing.
That said, you're generating all the other text-boxes with the same id of ip. Since you already give specific id's to the paragraph tags, you should use the exact approach with the text-boxes as well.
<script>
function run() {
document.getElementById("ip").value= document.getElementById("Ultra").value;
}
</script>
<script>
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'"><span class="lb">Ip Address:</span><input id="ip" type="text" name="ip[]" size="4" value="'+$("#Ultra").val()+'" required placeholder="192.168.0.1:80" class="form-control wid2" /> <input type="button" value="-" onclick="removeRow('+rowNum+');" class="remove" style=" width:9%;"></p>';
jQuery('#itemRows').append(row);
frm.add_ip.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="myformp">
<form method="get" class="myformp2" id="ipForm">
<div id="itemRows">
<span class="lb">Ip Address:</span><input class="form-control wid2 " type="text" name="add_ip" size="4" required placeholder="192.168.0.1:80" title="ip address" id="ip"/> <input type="button" value="+" class="add" style=" width:9%;" />
</div>
<button type="submit" class="btn btn-default mybtn2">save</button>
<div class="clear"></div>
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option onclick="addRow(this.form);"value="0">Select</option>
<option onclick="addRow(this.form);"value="8">text1</option>
<option onclick="addRow(this.form);"value="5">text2</option>
<option onclick="addRow(this.form);"value="4">text3</option>
</select>
</form>
</div>
remove addRow and run methods and add this event handler. You don't need to handle click on option separately, onchange on select is enough. You are not using the values of options anyways.
$( "#Ultra" ).change( function(){
$( "#ip" ).val( $( this ).val() );
var row = '<p id="rowNum'+rowNum+'"><span class="lb">Ip Address:</span><input id="ip" type="text" name="ip[]" size="4" value="'+frm.add_ip.value+'" required placeholder="192.168.0.1:80" class="form-control wid2" /> <input type="button" value="-" onclick="removeRow('+rowNum+');" class="remove" style=" width:9%;"></p>';
$( '#itemRows' ).append(row);
} );
function run() {
document.getElementById("ip").value = document.getElementById("Ultra").value;
}
var rowNum = 0;
function addRow(frm) {
rowNum++;
var row = '<p id="rowNum' + rowNum + '"><span class="lb">Ip Address:</span><input id="ip" type="text" name="ip[]" size="4" value="' + frm.add_ip.value + '" required placeholder="192.168.0.1:80" class="form-control wid2" /> <input type="button" value="-" onclick="removeRow(' + rowNum + ');" class="remove" style=" width:9%;"></p>';
jQuery('#itemRows').append(row);
frm.add_ip.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="myformp">
<form method="get" class="myformp2" id="ipForm">
<div id="itemRows">
<span class="lb">Ip Address:</span><input class="form-control wid2 " type="text" name="add_ip" size="4" required placeholder="192.168.0.1:80" title="ip address" id="ip"/> <input type="button" value="+" class="add" style=" width:9%;" />
</div>
<button type="submit" class="btn btn-default mybtn2">save</button>
<div class="clear"></div>
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option onclick="addRow(this.form);"value="0">Select</option>
<option onclick="addRow(this.form);"value="8">text1</option>
<option onclick="addRow(this.form);"value="5">text2</option>
<option onclick="addRow(this.form);"value="4">text3</option>
</select>
</form>
</div>
Some thing wrong !
Reffering to my previous question (about simple pocket calculator), I try to rewrite it using MVC pattermn. I understand the basics of MVC but to implement it is pretty difficult for a beginner. so my html code is :
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/SimpleCalculator.css">
<script type="text/javascript" src = "js/SC_Controller.js"></script>
<script type="text/javascript" src = "js/SC_Model.js"></script>
<script type="text/javascript">
new SC_Controller().init();
</script>
</head>
<body>
<h2>Simple Calculator</h2>
<div class="box">
<div class="display"><input type="text" readonly size="18" id="displayId"></div>
<div class="keys">
<p><input type="button" class="button black" value="7">
<input type="button" class="button black" value="8">
<input type="button" class="button black" value="9">
<input type="button" class="button orange" value="/">
</p>
<p><input type="button" class="button black" value="4">
<input type="button" class="button black" value="5">
<input type="button" class="button black" value="6">
<input type="button" class="button orange" value="*">
</p>
<p><input type="button" class="button black" value="1">
<input type="button" class="button black" value="2">
<input type="button" class="button black" value="3">
<input type="button" class="button orange" value="-">
</p>
<p><input type="button" class="button black0" value="0">
<input type="button" class="button black" value=".">
<input type="button" class="button orange" value="+"></p>
<p><input type="button" class="button greenc" value="C">
<input type="button" class="button yelloweq" value="="></p>
</div>
</div>
</body>
and my two JS filController.js are :
SC_Controller.js
var SC_Controller = function(scModel){
var model = scModel || new SC_Model();
var s = "";
function clicked(){
s += model.getValue();
alert(s);
model.setValue(s);
}
function init(){
document.getElementsByClassName("button").onclick = clicked;
}
return {
init : init;
model : model
};
};
and
SC_Model.js
var SC_Model = function(){
function getValue(){
return(document.getElementsByClassName('button').value);
}
function setValue(val){
document.getElementById('displayId').value = val;
}
return{
getValue : getValue,
setvalue : setValue
};
};
To implement a MVC pattern, I googled and found an example. I tried to adapt it to my calculator code, but launching the HTML, when I click a key the alert box in SC_Controller.js does not pop up. I can not understand why. Could you help me ?
The document.getElementsByClassName("button") returns a collection of nodes
(see https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName).
You need to iterate over them when applying the click handler as well as when requestion their .value.
For instance, the
document.getElementsByClassName("button").onclick = clicked;
should be
var buttons = document.getElementsByClassName("button");
for(var i=0;i<buttons.length;i++)
buttons[i].onclick = clicked;
Hi All I have the following Div as seen below:
<div id = '1'>
<div>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
<div>
<input type="button" name="addNewRow" value="Add Row" />
</div>
</div>
when the user clicks on the button, I want to add the following Divs again:
<div>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
Is this possible to achieve with JavaScript or the jQuery onclick function?
You can use clone method with insertAfter:
HTML:
<div id='1'>
<div class="template"> <!-- mark a clone target -->
...
</div>
<div>
<input type="button" name="addNewRow" value="Add Row" />
</div>
</div>
JS:
var $template = $('.template');
$('input[type=button]').click(function() {
$template.clone().insertAfter($template);
});
Demo: http://jsfiddle.net/VcBrz/
Try this:
<script>
$(document).ready(function(){
var divID='abc';
var $mainDiv=$('#'+divID);
$mainDiv.find('input[name="addNewRow"]').eq(0).click(function(){
var $this=$(this);
var $div=$(this).parents('div').eq(0).prev('div').clone();
$this.parents('div').eq(0).prev('div').after($div);
});
});
</script>
Demo: http://jsfiddle.net/xT62m/
The best way is to clone that div which you want to add to div#1.
For easier manipulation, please add classes to div with button and to each div which represents row.
HTML:
<div id = 'id1'>
<div class='row'>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
<div class='buttonHolder'>
<input type="button" name="addNewRow" value="Add Row" />
</div>
</div>
Javascript (with jQuery):
$(document).ready(function(){
$('.buttonHolder input[type=button]').on('click', function(){
//Clone existing row to template.
var row = $('#id1 .row').first().clone();
//Clear template
$('input', row).val('');
$(row).insertBefore('.buttonHolder input[type=button]');
});
});
jsFiddle example: http://jsfiddle.net/9Z2RT/1/
make html like this:
<div id="container">
<div class= 'template'>
<div>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
</div>
</div>
<div>
<input type="button" name="addNewRow" id="btnAddRow" value="Add Row" />
</div>
Click Function:
$('#btnAddRow').click(function(){
var row = $('.template').first().clone();
$('#container').append(row);
});
Here is Fiddle DEMO
The simpliest way will be:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script>
var m_TextToAdd = '<div> ';
m_TextToAdd += '<div> ';
m_TextToAdd += ' <label class="right inline">Response:</label>';
m_TextToAdd += '</div>';
m_TextToAdd += '<div>';
m_TextToAdd += ' <input type="text" name="responseText[]" value="" maxlength="400" /> ';
m_TextToAdd += '</div>';
m_TextToAdd += ' <div>';
m_TextToAdd += ' <input type="radio" name="responseRadio[]" value="" />';
m_TextToAdd += ' </div>';
m_TextToAdd += '</div>';
function AddContent() {
document.getElementById('div1').innerHTML += m_TextToAdd;
}
</script>
</head>
<body>
<div id = 'div1'>
<div>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
<div>
<input type="button" name="addNewRow" value="Add Row" onclick='AddContent();'/>
</div>
</div>
</body>
</html>
Anyhow, it heart my eyes to see it :-)
I think the next code is more readable:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script type='text/javascript'>
function AddContent() {
var dest = document.getElementById('div1');
//add label
var lbl = document.createElement('label');
lbl.innerHTML = 'Response:';
lbl.className = 'right inline';
dest.appendChild(lbl);
//add line break
dest.appendChild(document.createElement('br'));
//add text input
var input = document.createElement('input');
input.type = 'text';
input.name = 'responseText[]';
input.maxlength="400";
dest.appendChild(input);
//add line break
dest.appendChild(document.createElement('br'));
//add radio button
input = document.createElement('input');
input.type="radio";
input.name="responseRadio[]";
dest.appendChild(input);
//add line break
dest.appendChild(document.createElement('br'));
}
</script>
</head>
<body>
<div id = 'div1'>
<label class="right inline">Response:</label>
<br>
<input class='nextLine' type="text" name="responseText[]" value="" maxlength="400" />
<br>
<input class='nextLine' type="radio" name="responseRadio[]" value="" />
<br>
<input class='nextLine' type="button" name="addNewRow" value="Add Row" onclick='AddContent();'/>
<br>
</body>
</html>
Yes, use the jquery append functionality https://api.jquery.com/append/
$('#1').append(html);
Here is a working jsfiddle http://jsfiddle.net/ZqQAu/1/