how to change button value through user input - javascript

the scenario is like i have a button when it appends onto the page it creates an object with some properties of that object and add that object in an array now the thing i want to do is having that button value and change it to what user want but at the same time it should update in array[object{button{value:''}}] . i tried but what it does is it over writes all button objects and i want every object to have its own value please help me thorugh this
if (ui.draggable.data('type') == "button")
{
document.getElementById('buttonDiv').style.display = "block";
btn_id++;
$( "<br><input type='submit' class='btn' id='btn-"+btn_id+"' value='buttonsss'>" ).text(ui.draggable.text()).appendTo( this ).click(function()
{
var color= button['button'].color=$('#btn_color').val();
var Bcolor= button['button'].Bcolor=$('#btn_bcolor').val();
$(this).css('color',color);
$(this).css('background',Bcolor);
var value= $(this).val($('#btn_value').val());
value= button['button'].value=$('#btn_value').val();
$("#btn_remove").click(function(){
$(this).remove();
arr.splice(ui.draggable.data('type'),1);
document.getElementById('buttonDiv').style.display = "none";
});
});
var button = {
button: {
type: 'button',
color: 'white',
width: '15px',
backgroundcolor:'white',
value: ' My Button',
id:'btn-"'+btn_id+'"',
control:'button',
name:'',
label:'My Button',
type:'',
status:'',
style:'',
left:'',
center:'',
right:'',
}
}
var objectName = "button";
arr.push(button);
//for changing button properties form
<div id="buttonDiv" style="display:none;" class="answer_list" >
color:<br>
<input id="btn_color" type="text" name="color">
<br>
background-color:<br>
<input id="btn_bcolor" type="text" name="Bcolor">
<br>
value:<br>
<input id="btn_value" type="text" value="buttonname" placeholder="set your name">
<br>
Update component:<br>
<input id="update" type="button" value="update"/>
<br>
Remove component:<br>
<input id="btn_remove" type="button" value="remove"/>
</div>
kindly guide me through it would of great help thanks and i hope that everyone can get what iam trying to say.

I was going to leave this as a comment but it became too big.
In your code you mix jQuery selectors with pure Javascript selectors, i.e. document.getElementById('your-id') can all be replaced by $('#your-id'). And then you can do $('#buttonDiv').css('display', 'block') instead.
The other thing is, when you use jQuery syntax $('...'), you are selecting something based on CSS (it expects CSS classes, ids and other related CSS identifiers, like HTML elements tags) therefore your $( "<br><input type='submit' class='btn' id='btn-"+btn_id+"' value='buttonsss'>" ).text() will not find a jQuery object where you can invoke the text method.
However, there is one exception: when you use immediately after the appendTo method like this:
$( "<br><input type='submit' class='btn' id='btn-"+btn_id+"' value='buttonsss'>").appendTo("#buttonDiv")
Or, if you just want to move an existing object inside the buttonDiv then you can do:
$( "#btn_bcolor").appendTo($("#buttonDiv"));
After you do the desired corrections in your code and add the missing variables, people can help you better, and you can use jQuery inside the snippet in your question by selecting it in the dropdown menu of the snippet window at the top.

Related

How to add many html buttons that use same javascript into loop results?

I have the following codes on my html page:
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="metin" placeholder="Geben Sie Artikel Nr" style="width: 30%;"/><br/><br/>
<input type="button" class="single_add_to_cart_button button alt" value="Suche (Advanced)" onclick="search()" /><br/><br/>
<div class="cevap" style="background-color:#e6e6e6; border: 0px solid green; padding: 2px; margin: 0px;"><i class="fa fa-spinner fa-spin fa-2x"></i></div>
and between <head> ... </head> :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function search() {
metin = $('input[name="metin"]').val();
$.post('/wp-content/plugins/ajax-test/SearchByNumberNew.php', {yazi: metin}, function (gelen_cevap) {
$('.cevap').html(gelen_cevap);
});
}
</script>
I am sending yazi into SearchByNumberNew.php and after some processes inside it I am getting the results into <div class="cevap"...
Until here it is okay. I am trying to put several buttons next to every result in the <div> that are sending the related value ($parcano)again into SearchByNumberNew.php. So I want to make a new search with the new value and refill the <div> with the new results (of course after deleting the previous results).
to do that I added following code into the loop in the SearchByNumberNew.php:
...
?><input type="hidden" name="metin" value="<?php echo $parcano;?>"/><br/><br/>
<input type="button" class="single_add_to_cart_button button alt" value="Suche (Basic)" onclick="searchin()" /><br/><br/>
<?php
...
and following code between <head> ... </head> :
function searchin() {
metin = $('input[name="metin"]').val();
$.post('/wp-content/plugins/ajax-test/SearchByNumberNew.php', {yazi2: metin}, function (gelen_cevap) {
$('.cevap').html(gelen_cevap);
});
}
I tried many variations: yazi, yazi2, metin, metin2, etc..., unsetting the values before the loop, etc...
In the first search that I enter the value in the input box, it is always okay. I get a list of results with many buttons for each result line.
As far as I see in the button codes on the page, all of them have the correct values.
But when I click any of them, they always send the first buttons value into my php file.
What am I doing wrong?
I would appreciate for your kind helps,
Regards,
Murat
Have you tried to start your jQuery block?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
(function($) {
function search() {
var metin = $('input[name="metin"]').val();
$.post('/wp-content/plugins/ajax-test/SearchByNumberNew.php', {yazi: metin}, function (gelen_cevap) {
$('.cevap').html(gelen_cevap);
});
}
})( jQuery );
</script>
As far I see your code, no where I see you are using the value of button. Instead you are using value of a input box. If you use the value $('input[name="metin"]').val() then jquery will search for input box from top of the page and return you the first result it matches. So it will always bring the first result.
There are couple of ways to do solve your problem. You can pass this parameter in the button onClick event and as a button value you can give reference to the input you want to take the value from
<input type="button" class="single_add_to_cart_button button alt" value="metin1" onclick="searchin(this)" />
function searchin(param) {
metin = $('input[name="+ param.val() + "]').val();
$.post('/wp-content/plugins/ajax-test/SearchByNumberNew.php', {yazi2: metin}, function (gelen_cevap) {
$('.cevap').html(gelen_cevap);
});
}
Or second way is bind a jquery event to a button.
$('.single_add_to_cart_button').click(function(){
metin = $('input[name="+ this.val() + "]').val();
})
As far I understood your question. I think this way you can achieve your task. Otherwise let me know if have any queries.
The problem is that you're using the wrong identifier $('input[name="metin"]').val(); will always return the value of the last input with name metin, try grouping each input group in a div and instead of:
$('input[name="metin"]').val();
use this if you want to use the input's value
$(this).parent().find('input[name="metin"]').val();
and this if you want to use the button's value
$(this).val();
The php code should look something like this:
...
?>
<div>
<input type="button" class="single_add_to_cart_button button alt" value="Suche (Basic)" onclick="searchin()" /><br/><br/>
</div>
<?php
...

javascript add button with two input

I'm trying to write this in javascript without using jquery. It basically has two input field: author and quote, and on click should be added to the page.
I'm also trying to save it on the page in case I leave the page. The added quote disappears when i execute the method:
function radd() {
if((document.getElementById("q").value!="") && (document.getElementById("a").value!="")) {
$("#mid-wraper" ).append("<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>");
document.getElementById("q").value="";
document.getElementById("a").value="";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="but" onClick="radd()">Add</button>
<label for="q">Add ur Quote!</label><input id="q" name="q" />
<label for="a">The author name</label><input id="a" name="a" />
Try this
function radd()
{
if((document.getElementById("q").value!="")&& (document.getElementById("a").value!=""))
document.getElementById("mid-wraper").innerHTML += "<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>";
document.getElementById("q").value="";
document.getElementById("a").value="";
}
function add(){
//create a new elem
var el=document.createElement("p");
//you can assign id, class , etc
el.id="yourcustomid";
el.textContent="yourcontent";
//then add to the wrapper
var wrapper=document.getElementById("mid-wrapper");
wrapper.appendChild(el);
}
This code shows you how to create a new paragraph and add it to your wrapper js...
You could also do something like this; far more easier in my opinion. Simply create both inputs, but set their attributes to hidden. And using javascript, delete the "hidden" attribute.
<button id="but" onClick="radd()">Add</button>
<input id="q" hidden="hidden" >Add ur Quote!</input>
<input id="a" hidden="hidden">The author name</input>
The JS part:
function radd(){
document.getElementById("q").removeAttribute("hidden");
document.getElementById("a").removeAttribute("hidden");
}

Filling the button value from an array through the ID in jQuery Mobile

I have started to create a Quiz. All Questions and answers are today in the same array. Over the id's b1 - b4 and the function getElementById, it was a success with HTMl, JavaScript and CSS.
But now I want to "convert" this script in to a mobile version. So I started to work with jQuery Mobile. I changed getElementById into $("#variable").val(array);. And checked it with Firebug. Firebug tells me, that the value of the button was filled with the Array-values, but I can't see it in the normal view..
Can someone tell me a solution of my mistakes?
HTML-Buttons
<input id='b1' type="button" value="" ONCLICK="analyseB1()"/>
<input id='b2' type="button" value="" ONCLICK="analyseB2()"/>
<input id='b3' type="button" value="" ONCLICK="analyseB3()"/>
<input id='b4' type="button" value="" ONCLICK="analyseB4()"/>
<input id='next' type="button" value="Next Question" ONCLICK="next()"/>
JS-Function
function next()
{
document.getElementById('header').innerHTML = array[questioncounter][0];
$("#b1").val(array[questioncounter][1]);
$("#b2").val(array[questioncounter][2]);
$("#b3").val(array[questioncounter][3]);
$("#b4").val(array[questioncounter][4]);
document.getElementById('next').style.display='none';
document.getElementById('b1').style.backgroundColor = '';
document.getElementById('b2').style.backgroundColor = '';
document.getElementById('b3').style.backgroundColor = '';
document.getElementById('b4').style.backgroundColor = '';
}
My first suggestion here is to learn some jQuery programming, you'll see it's fundamental. Now, about your problem:
use to create buttons
do not use onclick handlers
use a smart jQuery selector to avoid duplicating your functions
HTML:
<div data-role="page" id="page">
Next question
</div>
JavaScript:
$(document).on("click", "[id^=b]", function(event, ui)
{
alert(this.id);
});
$(document).on("click", "#next", function(event, ui)
{
$("#b1").prop("innerHTML", "b1 button");
$("#b2").prop("innerHTML", "b2 button");
$("#b3").prop("innerHTML", "b3 button");
$("#b4").prop("innerHTML", "b4 button");
$("#next").css("display", "none");
$("[id^=b]").css("backgroundColor", "");
});
JSFiddle

Get variable input value on button click

not sure if this is even possible, I have a page with mutiple inputs,each input has a button. is there anyway of getting the inputs value on button click, without hardcoding the inputs id?
example
js
$('button').click(function () {
var inputcontent = $('input').prop('id');
console.log(inputcontent);
});
html
<input type="text" id="1">
<button type="button">Go!</button>
<input type="text" id="2">
<button type="button">Go!</button>
<input type="text" id="3">
<button type="button">Go!</button>
<input type="text" id="99">
<button type="button">Go!</button>
$('input').prop('id') returns id of first matched element in selector. To target the input before each button, you need to use .prev() along with $(this).
Try this:
$(this).prev().attr('id');
Working Demo
You already doing it right, just change a little bit in your code. You have to find out the value of the input field, which is placed just before your button on which you will click. So your code should be:
$('button').click(function () {
var inputcontent = $(this).prev().prop('id');
console.log(inputcontent);
});
This'll solve the issue
$('button').click(function () {
var value = $(this).prev().val();
console.log(value);
});
You're not targeting the item that you want the id from, the input just prior to the button. Use prev(0 to do that. In addition, id is really an attribute, not a property, so you should do this -
$('button').click(function () {
var inputID = $(this).prev().attr('id'); // gets the id of the input that precedes the button
console.log(inputID);
});

How to remove a particular div tag and reset its content using javascript

Code below contains certain tags in all four.
Image-1
here is the code :
<div style='background-color:YellowGreen;height:20px;width:100%;margin-top:15px;font-weight: bold;'>
Delegate(s) details: </div>
<div style="border:1px solid black;"><br/>
<div id="delegates">
<div id="0">
Name of the Delegate:
<input name='contact_person[]' type='text' size="50" maxlength="50" />
Designation:
<select name='delegate_type_name[]' class='delegate_type'>
<option value='select'>Select</option>
<option value='Main'>Main</option>
</select>
</div><br/>
</div>
<div>
<input type="button" name="more" value="Add More Delegates" id="add_more" />
<br />
<br />
</div>
</div>
In the above code on line 5 where <div id="0"> changes to value 1 in script that I mentioned in "add_more"
And the javascript for "add_more" is given below
jQuery('#add_more').click(function(){
var id = jQuery('#delegates > div:last').attr('id');
var temp = "<div id='"+(parseInt(id)+parseInt('1'))+"'> Name of the Delegate: <input type='text' size='50' maxlength='50' name='contact_person[]' /> Designation:";
temp += "<select name='delegate_type_name[]' class='delegate_type additional_delegate'><option value='select'>Select</option><option value='Additional'>Additional</option><option value='Spouse'>Spouse</option></select> <input type='button' name='rem' value='Remove' id='remove' /></div><br/>";
jQuery('#delegates').append(temp);
});
In the javascript code above I have added a remove button in the temp+ variable
<input type='button' name='rem' value='Remove' id='remove' />
Image-2 shows the remove button every time I click on "Add more Delegates" button.
In the image-2 I click on Add More Delegates button it shows the "remove" button on the right of drop down select list.
I want a jQuery function for remove button, so that when I click on remove it should remove <div id="1"> and also reset content before removing the div tag. Below image-3 is the output that I want when I click on remove button.
code that I tried was this from some reference is this
jQuery('#remove').click(function(){
var id = jQuery('#delegates > div:last').attr('id').remove();
});
but no luck.
Thanks.
You can't give an element id that is only a number, it must be #mydiv1, #mydiv2 or something similar, i.e. beginning with a letter not a number.
For starters your markup is a total mess. There is no way you should be using for layout purposes. Read up on tableless layouts and css.
The first thing you need to change is the id's of your div. An id cannot start with a numeric. I suggest naming the first div delegate0. Secondly, you are adding a remove button on every new row with the same id - all id's on a page should be unique so i suggest you change this to class="remove".
As for your question, it really boils down to needing to add a jQuery handler to the remove buttons using the .livedocs method.
This is as simple as:
jQuery('.remove').live('click',function(){
$(this).closest('div').remove();
});
Also, you need to keep a running counter of the id of the items added, and increment this every time a new row is added.
var nextDelegate = 1;
jQuery('#add_more').click(function(){
... your code here
nextDelegate++;
});
Also, I removed the superfluous <br/> after each div.
Live example: http://jsfiddle.net/cb4xQ/

Categories

Resources