Accessing HTML elements in JavaScript

Question

I am trying to pass parameters from a PHP to a JavaScript, and this is the way I do this:

my php file:

<div>
    <textarea name="text" cols="80" rows="2">
     <?= $note['note'] ?>
    </textarea>
    <p type="hidden" name="request_id" value="<?= $request_id ?>" >
    <p type="hidden" name="cve" value="<?= $cve ?>" >
    <p type="hidden" name="note_id" value="<?= $note['note_id'] ?>" >
    <p type="hidden" name="status" value="<?= $note['status'] ?>" >
    <button class="add-note">Save</button>  
</div>

My JavaScript function:

$(function() {
    $(".add-note").click(function(){
        tr = $(this).parent();
        tds = tr.children();
        note = $(tds[0]).text();
        request_id = $(tds[1]).value;
        cve = $(tds[2]).value;
        note_id = $(tds[3]).value;
        status = $(tds[4]).value;
        alert(note);
    });
});

The result is I get the value Save when I get the text of note, that is, the text of the buttom itself, instead of the text placed in the textarea. I get nothing for the rest of the values.

I wanted to approach this with a classic form, but the thing is that I need the current value of a textarea, that why I am using JavaScript, but I am not accessing properly to the HTML elements...

Thank you very much.

Your p tags are unclosed, so this must create the wrong structure. I also think you want to replace the p tags with <input type="hidden" />... — somethinghere
– somethinghere, Commented Feb 15, 2016 at 17:27
I agree with @somethinghere and also consider to use var for the variable in javascript. Es. var tr = $(this).ciao(); var tds = tr.miao; — Vixed
– Vixed, Commented Feb 15, 2016 at 17:30
@Vixed Maybe even use some better variable names - this is really confusing. We are no longer in the nineties where every byte was so precious :) — somethinghere
– somethinghere, Commented Feb 15, 2016 at 17:30
@somethinghere I was talking about it just a week ago on linkedin: take a look here — Vixed
– Vixed, Commented Feb 15, 2016 at 17:35
Yeah, I used input because the value of p wouldn't work like that, with the input it does. I also used .val() for extracting the text of the textareaelement and it works perfectly ;) — aDoN
– aDoN, Commented Feb 16, 2016 at 9:07

Carl Wilson · Accepted Answer · 2016-02-15 17:40:10Z

1

<div>
    <textarea name="text" cols="80" rows="2" id="texta">
     <?= $note['note'] ?>
    </textarea>
    <p type="hidden" name="request_id" id="request_id" value="<?= $request_id ?>" >
    <p type="hidden" name="cve" id="cve" value="<?= $cve ?>" >
    <p type="hidden" name="note_id" id="note_id" value="<?= $note['note_id'] ?>" >
    <p type="hidden" name="status" id="status" value="<?= $note['status'] ?>" >
    <button class="add-note">Save</button>  
</div>  

 $(function() {
    $(".add-note").click(function(){
        note = $('#texta').val();
        request_id = $('#request_id'.val();
        cve = $('#cve').val();
        note_id = $('#note_id').val();
        status = $('#status').val();
        alert(note);
    });
});

answered Feb 15, 2016 at 17:40

Carl Wilson

548 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Collector · Accepted Answer · 2016-02-15 17:36:14Z

1

Instead of value use data-xx properties meant exactly for that

  <p type="hidden" name="request_id" data-request="<?= $request_id ?>" >

and extract using

request_id = $(tds[1]).data('request');

answered Feb 15, 2016 at 17:36

Collector

2,1044 gold badges23 silver badges40 bronze badges

Collectives™ on Stack Overflow

Accessing HTML elements in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related