I have two text boxes with each having a button. On click of the button the strings have to be appended. Say I clicked the first button it will save in a string and I click on the second button the second string should be appended to the first one.
<input type="text" id="name_1"> <input type="button" id="button_1" value="add">
<input type="text" id="name_2"> <input type="button" id="button_2" value="add">
<br>
<input type="submit">
$('[id^="button_"]').on("click", function() {
name = $('#name_'+$(this).attr('id').split('_')[1]).val();
alert(name);
});
partial working demo here: jsfiddle
example: john_david where john is the first string and david is the second string
i think you are looking for this :-
$('[id^="button_"]').on("click", function() {
var name = "";
$('[id^="button_"]').each(function(){
name = name+$('#name_'+$(this).attr('id').split('_')[1]).val();
});
alert(name);
});
See DEMO
You need to use name variable as global and when click happens append string to that variable.
FIDDLE
Try this :
var name = "";
$('[id^="button_"]').on("click", function() {
if(name == ""){ name = name+$(this).prev("input").val(); }
else{ name = name+"_"+$(this).prev("input").val(); }
alert(name);
});
$('[id^="button_"]').on("click", function() {
name = $('#name_'+$(this).attr('id').split('_')[1]).val();
alert(name);
});
$('[type="submit"]').on("click", function() {
name = $('#name_1').val() + $('#name_2').val();
alert(name);
});
Related
I have such code in my view:
<div class="box">
<input type="text" name="product[size_ids][<%= size.id %>][quantity][1]" readonly class="product_quantity" placeholder="quantity from" value="1">
</div>
In my js I'd like to change [1] into [2] or [3] and so on after [quantity], depending on how many additional forms I create. How can I do that?
This is what I have in my JS:
var i = 1
$('.add_another_price_btn').click( function (e) {
e.preventDefault();
$(this).prev().clone().insertBefore($(this));
$(this).prev().find('.remove_another_price_btn').show();
$(this).prev().find('.product_quantity').removeAttr('readonly');
$(this).prev().find('.product_quantity').attr('value', '');
//This is what I tried, but it doesn't work properly.
$(this).prev().find('.product_quantity')
.attr('name', function() { return $(this).attr('name') + '['+ (i++) + ']' });
$('.remove_another_price_btn').click( function (ee) {
ee.preventDefault();
$(this).parent().parent().remove();
});
You can do a simple string operation with substr and lastIndexOf to replace the last part of the name.
// get input and name of input
var input = $("input");
var name = input.attr("name");
// change just the last part
name = name.substr(0, name.lastIndexOf("[")) + "[2]";
// set name back to input
input.attr("name", name);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="product[size_ids][<%= size.id %>][quantity][1]" readonly class="product_quantity" placeholder="quantity from" value="1">
Save the clone
Break the name using substring or split and parseInt
Like this
var $clone = $(this).prev().clone(),
$prodQ = $clone.find('.product_quantity'),
name = $prodQ.attr("name"),
parts = name.split("quantity]["),
newName = parts[0]+"quantity][",
num = parseInt(parts[1],10); // or a counter
num++;
newName += num+"]";
$prodQ.removeAttr('readonly').attr('value', '').attr('name',newName);
$clone.insertBefore($(this));
$clone.find('.remove_another_price_btn').show();
I want input to enter value number
and When entering the value will be create html node with input inside it
ex
<input>
and when enter value like 3
it will apper
<div><input id='input1-3'><input id='input1-3'><input id='input1-3'></div>
<div><input id='input2-3'><input id='input2-3'><input id='input2-3'></div>
thanx
try this i think it will help you ,
<body>
<input type="text" id='inputnum'>
</body>
jquery,
$(document).ready(function(){
$('#inputnum').on('change',function(){
var a=parseInt($(this).val());
console.log(a);
for(var i=1;i<a+1;i++)
{
var divs='<div>'
for(var j=1;j<a+1;j++)
{
divs=divs+'<input id="input'+i+'-'+j+'">';
}
divs=divs+'</div>';
$('body').append(divs);
}
})
});
Complete JSFiddle Example https://jsfiddle.net/Praveent696/7bt74fbj/
If I correctly understand what you want to do, i think that you just have to use append function like this.
<input id="input1">
<script>
$(document).on("keypress", "input#input1", function() {
var n = this.value;
for (var i=0;i<n;i++){
var x = document.createElement("input");
x.setAttribute("id", "wathever");
document.body.appendChild(x);
}
});
</script>
I would like to store the value of a input to JSON (on submit). If the User fill out the input again then submit I would like to add the new value to JSON keeping the previous one.
I use the following to add the input value to JSON but I'm not sure how to keep the previous value sent to JSON.
http://jsfiddle.net/ABE4T/
HTML:
<form method="post" name="myForm" id="myForm">
<input type="text" name="element" />
<input type="submit" value="Add" name="submit" />
</form>
<div id="display"></div>
Javascript:
$.fn.serializeObject = function()
{
var arrayData = this.serializeArray();
var objectData = {};
$.each(arrayData, function(){
if(objectData[this.name] != null){
if(!objectData[this.name].push){
objectData[this.name] = [objectData[this.name]];
}
objectData[this.name].push(this.value || '');
}
else{
objectData[this.name] = this.value || '';
}
});
return objectData;
};
$(document).ready(function(){
$("#myForm").submit(function(){
$('#display').text(JSON.stringify($("#myForm").serializeObject()));
return false;
});
});
Use .append() function instead of .text() function.
DEMO fiddle
You can maintain an array to hold all the values like this
$(document).ready(function(){
var values = [];
$("#myForm").submit(function(){
values.push($("#myForm").serializeObject());
$('#display').text(JSON.stringify(values));
return false;
});
});
Working Fiddle
You are overwriting the value in #display.
Change this line
$('#display').text(JSON.stringify($("#myForm").serializeObject()));
to
$('#display').text($('#display').text() + JSON.stringify($("#myForm").serializeObject()));
Fiddle
I have a page which contains a 10 items(formatted list).Here in this page I need to add check box for each item and add the item as the value to each check box.when the user click on the check box the selected value should be passed to a new page.Can anyone help me how to add a check box for the innerHTML in java script.
Code:
var newsletter=document.getElementById("block-system-main");
var districolumn=getElementsByClassName('view-id-_create_a_news_letter_',newsletter,'div');
if(districolumn!=null)
{
var newsletterall=newsletter.getElementsByTagName('li');
alert(newsletterall[0].innerHTML);
var all=newsletter.innerHTML;
newsletter.innerHTML="<input type='button' onclick='changeText()' value='Change Text'/>";
}
function changeText()
{
alert("dfgsdg");
}
I don't exactly understand what each part of your code is doing, but i'll try and give a general answer:
In your HTML, do something like this:
<form id="myForm" action="nextPage.com">
<div id="Boxes"></div>
</form>
Change the above names to wherever you want your checkboxes to be written.
And your function:
function changeText()
{
for(var i=0 ; i < newsletterall.length ; i++)
{
var inner = document.getElementById("Boxes").innerHTML;
var newBox = ('<input type="checkbox" name="item[]" value="' + newsletter[i] + '>' + newsletterall[i]);
document.getElementById("Boxes").innerHTML = inner + newBox;
}
document.getElementById("myForm").submit();
}
The last line of code submits the checkboxes automatically. If you don't want that, remove that line, and add a submit button to the form myForm.
$('ul#list li').each(
function() {
var me = $(this),
val = me.html(),
ckb = $('<input type="checkbox" />');
ckb.click(function() {
var where=val;
window.location.href='http://google.com/?'+where;
});
me.html('');
me.append(ckb).append($('<span>'+val+'</span>'));
}
);
I found this fiddle and I am trying to get it to work...I can not figure out why the names are not being added to the list, for some reason Add button is acting like a submit button and I can not tell why...It should add all the numbers to a list so when I click submit, then it should send the numbers in an array..
JavaScript:
function bindName() {
var inputNames = document.getElementById("names").getElementsByTagName("inputNames");
for (i = 0; i < inputNames.length; i++) {
inputNames[i].onkeydown = function() {
if (this.value == "") {
setTimeout(deletename(this), 1000);
}
}
}
}
document.getElementById("addName").onclick = function() {
var num1 = document.getElementById("name");
var myRegEx = /^[0-9]{10}$/;
var myRegEx = /^[0-9]{10}$/;
var itemsToTest = num1.value;
if (myRegEx.test(itemsToTest)) {
var form1 = document.getElementById("names");
var nameOfnames = form1.getElementsByTagName("inputNames").length;
var newGuy1 = document.createElement("inputNames");
newGuy1.setAttribute("id", nameOfnames);
newGuy1.setAttribute("type", "text");
newGuy1.setAttribute("value", num1.value);
form1.appendChild(newGuy1);
num1.value = "";
bindName();
}
else {
alert('error');
}
};
HTML:
<h1>Enter Name</h1>
<div id="mainName">
<h2>name</h2>
<label for="name">Add Names: </label>
<input id="name" type="text">
<button id="addName">Add</button>
<form>
<div id="names">
</div>
<input METHOD="POST" action="text.php" type="submit" value="Submit">
</form>
</div>
I've seen
document.createElement("inputNames");
Shouldn't be
document.createElement("input");
?
Because this /^[0-9]{10}$/; will accept only 10 numbers and only that, try entering 1234567890 and you will see no error.
I'm not sure why your "name" field is restricted to 10 digit numbers, but I've got the thing to work.
http://jsfiddle.net/y8Uju/4/
I think the problem was that you were trying to create an element with the tag name inputNames, but that's not a valid tag. Instead I changed it to create inputs, and set the class to inputNames.