How to select input value of only one appended element

Question

I'm trying to create a voting system. Whenever a user fills out a form with the title and two possible options you can vote on, the data is appended to a div element on the page using ajax. Using radio buttons, when the user clicks on one of the two possible voting options (one input has value of 0, the other has value of 1), I want to send the value (either 0 or 1) to a php file, which will then be inserted into a database.

Here's what's happening when I click on the input field: https://jsfiddle.net/crduling/dczup26h/36 HTML:

<div class='display-polls-container'>
</div>
<button id='user-created-poll'>Click for new poll</button>

Javascript:

$("#user-created-poll").click(function() {

  $(".display-polls-container").append("<div class='poll-container'><form><div class='title'><p class='user'>Username</p><p class='title-text'>Poll title</p></div><label class='userPollLabel'><div class='inner-content'><input type='radio' name='polls' value='0'>First option</div></label><label class='userPollLabel'><div class='inner-content'><input type='radio' name='polls' value='1'>Second item</div></label></form></div>");


  $("input:radio").click(function() {

    var value = $(this).val();
    alert(value);

  });
});
//How do I make it so that when I click on one of the inputs, it only gives the value of the input that I'm clicking and not the value of all the inputs?

CSS:

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

button {
  position: absolute;
  top: 0;
  right: 2%;
  width: 25%;
  height: 10%;
}

.poll-container {
  border-style: solid;
}

What I want to happen is for only one value to be returned, but when there are multiple polls, the value 0 or 1 returns multiple times.

Did you try using apply() or call() functions? try this: https://stackoverflow.com/questions/3945281/how-to-set-jquery-this-when-calling-a-function — Juke, Jul 25 '19 at 19:21
How are you sending the data to the PHP file? Are you collecting the data and sending an AJAX call or are you submitting a form? If you keep appending form elements to an overall form and submit the form, it will duplicate over time. — cngodles, Jul 25 '19 at 19:22
Please add the code that you use to create and append your elements, also have you consider checking if the issue comes from your event [bubbling up...](https://api.jquery.com/event.stopPropagation/) — DIEGO CARRASCAL, Jul 25 '19 at 19:44
@DIEGO CARRASCAL I added the code. I don't think it's a problem with the event bubbling up. — Carson D, Jul 25 '19 at 19:59
@Juke how would i use the call() function to specify that I only want the value of the element I'm clicking on? — Carson D, Jul 25 '19 at 20:03
You haven't provided enough code. My hunch is that the code you are executing to attach your click handler is getting executed each time you append a new form. And since the selector for that is a generic `"input"`, you're re-adding the click handler on existing inputs. You really should make a jsfiddle for this, and we'd (a) see the issue right away without having to rely on a description, and (b) be able to tweak it and provide your fix for you directly. How are you applying the click handler for newly added forms? — Marc, Jul 25 '19 at 20:04
Great. You've now told us how you apply the click handler. But that will only apply to _existing_ inputs on the page at the time that it's executed. So each time you append another input, you're probably re-executing that code. Right? Because if you're not re-executing that code, then how are the newly added inputs getting wired up to respond to clicks? I still think you're not supplying enough code. jsfiddle.net is your friend. — Marc, Jul 25 '19 at 20:10
@Marc here's the link. Let me know if you have any other questions. https://jsfiddle.net/crduling/dczup26h/36/ — Carson D, Jul 26 '19 at 02:00

Marc · Accepted Answer · 2019-07-26T19:26:33.600

You were doing exactly what I described in the comments above. Every single time that button was clicked, you were scanning the page for EVERY input button on the page, and attaching a new click handler to EVERY SINGLE ONE (those that already had a click handler were getting yet another duplicate handler on each pass). So, for example, after adding 3 forms to the page, the very first set of radios had gotten the click event attached 3 times, and that's why you were getting multiple alerts for every set of radio buttons except the last set you added.

The fix is to attach the click event only to the two new radio buttons you're adding, i.e., the ones that haven't already had a click handler attached. So you have to scope your selectors like I do below.

Here's the important part of your code that I changed:

let newHtml = "<div>...radio buttons...</div>"; //removed for brevity
/*
  use "appendTo()" instead of "append()"
    appendTo() returns the newly appended element which is what we want for this
    append() returns the container the new element was appended to (not what we want here)
*/
let appended = $(newHtml).appendTo("#display-polls-container");

//then attach the click handler ONLY to the radio buttons
//found within the newly appended element
$(appended).find("input:radio").click(function() {
    alert($(this).val())
});

There's a working example here https://jsfiddle.net/wa172ztg/

How to select input value of only one appended element

1 Answers1