Develop Reference

How to change the value of an attribute inside the class on the DOM?

I am having trouble changing the value of an attribute that is inside a class, for example:
<input class="has-input" value="5" ...>
And i have tried to do it like this :
document.getElementsByClassName("has-input")[0].setAttribute("value",1);
This would change the value inside the DOM but not on the page and when I try to press the button the real value did not change.
Another way i tried is:
document.getElementsByClassName("has-input")[0].value=1;
This would change the value visually on the page, but once you click the button the real value did not change.
How do I change the real value of that attribute and why does it change in the DOM and page but once I click a button its the old value?

Your second try is pretty close, but you forgot to select the first element:
document.getElementsByClassName('has-input')[0].value = 1;
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
console.log(e.target.num.value);
});
<form>
<input class="has-input" name="num" value="5">
<button>Submit</button>
</form>

How to grab ID of element which ID has been dynamically given?

I’m trying to make a simple show when checkbox is checked kind of section but am unable to get a hold of the element because the IDs of the element are assigned dynamically by PHP.
The element will be inside a foreach loop so there will be multiple instances of it with dynamically given IDs.
example:
//Laravel blade template
<element id="attrb{{ $elem->id }}> "></element>
//Javascript
if ($("#attrb*ID").is(":checked")) {
$("#attrbs-container").show();
} else {
$("#attrbs-container").hide();
}

With Jquery
$('input[id^="attrb"]').change(function(e){
if($(this).is(':checked')) console.log($(this).prop('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="attrb1" value="1" />
Run, and check the box. You can replace console.log with your .show or whatever.
The selector input[id^="attrb"] means an input with an id that ^= starts with attrb. You could also use input[type="checkbox"] if these are the only checkboxes you have, but it's less specific.
Change vs Click
change fires when the data (state) of the element changes. click will trigger anytime you click. In this case it probably doesn't matter too much which you use. A better example of change vs click is using radio buttons, and clicking an already checked radio. Checkboxes un-click when checked, radio buttons not so much. I'm just in a habit of using change over click for state changes.
$('input[id^="attrb"]').click(function(e){
if($(this).is(':checked')) console.log($(this).prop('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="attrb1" value="1" />
Run and click the radio 2x. It fires 2 times.
$('input[id^="attrb"]').change(function(e){
if($(this).is(':checked')) console.log($(this).prop('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="attrb1" value="1" />
Do the same thing here, but with change. That's the difference.
DYNAMIC vs Dynamic
What I mean here is DYNAMIC is something that changes at run time on the client, Dynamic is static HTML where the ID changes on the server side only. For DYNAMIC you want to use on like this
$(someparent).on('change', 'input[id^="attrb"]', function(e){ ... });
Where someparent is a static element that doesn't change at runtime. This will use event delegation and "bubbling" to find the content that was changed on the client side.
I don't think you meant DYNAMIC but I included it just in case.
Cheers!

you could create a function with a callback if you're assigning the id with javascript (after an ajax request)
function addID(add, callback)
Then use the funciton:
addId(function(){
//dynamically add ID
}, function(){
// callback function
if ($(“#attrb*ID”).is(":checked")) {
$(“#attrbs-container").show();
} else {
$(“#attrbs-container").hide();
}
})

.remove() function not working as expected jquery

In my project, I have a series of inputs, all of type radio button. I want to add functionality where these inputs can be deleted simply by clicking on the little bubble (the bubble that a radio button is). Here is my code so that I can do this:
$('#newAnswers input').click(function(){
var $textToDelete = $(this).val();
$(this).remove();
});
the reason why I'm assigning the value of the radio button to a textToDelete variable is that usually when you have radio buttons in HTML, you'll have text next to it to describe what that radio button is for. I'm creating a variable to hold this value so that I can delete it from the div manually because the code above works only for removing the radio button, and not the description (or I suppose you could call it the value as well) next to it. The code above also works as expected. HOWEVER, once I implement the functionality to delete the description (or value) next to radio button, the code doesn't work as expected. Here is my implementation:
$('#newAnswers input').click(function(){
var $textToDelete = $(this).val();
$(this).remove();
// NEW LINE
$('#newAnswers').html($('#newAnswers').html().replace($textToDelete, ''));
});
With this click function, after you click a radio button, it deletes, but if you click a second, or a third, or a fourth, or so on, the radio buttons will NOT delete. In fact, clicking on them only fills them in (or bubbles them in) as if you're just selecting a radio button normally. However, the FIRST radio button you click with this function works as expected. However, any radio buttons you click after that will not delete and I don't know why.
HTML Structure:
<div id='newAnswers'>
<input type="radio" value="answer1" name="question">answer1<br>
<input type="radio" value="answer2" name="question">answer2<br>
<input type="radio" value="answer3" name="question">answer3<br>
<input type="radio" value="answer4" name="question">answer4<br>
</div>

you can add span to the text,
<input type="radio" value="answer1" name="question"><span>answer1</span><br>
then
$('#newAnswers input').click(function(){
$(this).next().remove();
$(this).remove();
});

If you want to delete a DOM Element you can use .remove() function. this is the usage of .remove()
$(document).ready(function(){
$('.removebut').click(function(){
$('.removeme').remove();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="removeme">Click to remove me</div>
<button class="removebut">Remove</button>
Or if you want to remove the value of input, you can set value to "" with jquery .val()function.
usage of .val()
$(document).ready(function(){
$('.removebut').click(function(){
$('.removeme').val("");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="removeme" value="Click To Remove"/>
<button class="removebut">Remove</button>

Dynamically creating input elements onclick

Hey guys so I am creating input elements within a div when I click on a specific radio button with a javascript function.
It works great but when I first load the form the input elements dont appear in the div because the radio button has not been "clicked yet" although one of the radio buttons is default checked.
Basically if its checked I want them to appear, so on body load I have to call a function that checks the radio button I want default and I have to manually display the corresponding input elements that would appear if I had clicked the radio button.
This seems like a dumb work around of what I am trying to achieve, any ideas?
<body onload="startup()">
<input type="radio" name="type" onclick="createInput()" id="testradio" value="test">test</input>
<div id="area">
</div>
</body>
function startup()
{
document.getElementById("testradio").checked = true
createInput();
}
function createInput()
{
var testinput = "<input name='options' value='testing' type='checkbox'>test<br>"
document.getElementById("area").innerHTML = testinput
}

You should set the default value and then call the event. (say onchange)
something like this:
document.getElementById('elID').onchange();
this will then let your event listener fire as if the value where changed in the ui not in code.

How can I prevent jquery from selecting a parent when I click on one of the children in that parent?

ok quick scenario:
html:
<span class="answer">blah<input type="radio" value="1"></span>
jquery:
$("span.answer").click(
function() {
check = $("input", this);
check.attr('checked', check.attr('checked') === true ? false : true);
);
Ok so this will check/uncheck the child radio input inside the selected span when I click inside it.
The problem I have is that I don't want to run this event when I actually click on the radio button itself (obviously because jquery will see the radio button as checked and uncheck - in effect the exact opposite of what should happen usually). Something along the lines of this:
$("span.answer:not(span input)").click
This of course doesn't work. Any ideas? Thanks in advance!
Leo

$("span.answer input").click(function(evt)
{
evt.stopPropagation();
});
Will prevent the click event from bubbling up (and triggering the handler on "span.answer".)

There is a specific html tag to accomplish what you try to do with jquery and javascript ..
it is the label tag
<label>blah<input type="radio" value="1" /></label>
this will have the effect you want
[update]
For Internet Explorer 6 to play nice use the complete syntax of the label by using the for attribute which targets the id of an form input/select/etc.. element..
<label for="radio_1">blah<input id="radio_1" type="radio" value="1" /></label>