javascript empty post after ajax?

Question

I just wrote some javascript which should do that after I click on a button some labels in my table disappear and some input texts appears instead of labels, it´s all works, then I create a button which should do some stuff, all is done with JS, that button I create should posting through ajax, that works too, It post where I want it to be posted but in PHP file where my post should be, they are empty, they are posted there but all is empty but it shouldn't be empty and I don´t know why... here si code:

function vytvor () {
    var tlacidlo = document.getElementById("upravit");
    tlacidlo.style.display = 'none';
    var tabulka = document.getElementById("tabulka");
    var divPoh =  document.getElementById("pohlaviediv");
    var divMeno = document.getElementById("menodiv");
    var divPriez = document.getElementById("priezviskodiv");
    var divLog = document.getElementById("logindiv");
    var labelPoh = document.getElementById("pohlavie");
    var divMail = document.getElementById("maildiv");
    var divCislo = document.getElementById("cislodiv");
    labelPoh.style.display = 'none';
    var labelMen = document.getElementById("meno");
    labelMen.style.display = 'none';
    var labelPriez = document.getElementById("priezvisko");
    labelPriez.style.display = 'none';
    var labelLog = document.getElementById("login");
    labelLog.style.display = 'none';
    var labelMail = document.getElementById("mail");
    labelMail.style.display = 'none';
    var labelCislo = document.getElementById("cislo");
    labelCislo.style.display = 'none';
    var hodnotaPoh =  document.getElementById("pohlavie").textContent;
    var textPoh = document.createElement("input");
    textPoh.setAttribute("type", "text");
    textPoh.setAttribute("id", "pohlavie");
    textPoh.setAttribute("value", hodnotaPoh);
    var hodnotaMen =  document.getElementById("meno").textContent;
    var textMen = document.createElement("input");
    textMen.setAttribute("type", "text");
    textMen.setAttribute("id", "meno");
    textMen.setAttribute("value", hodnotaMen);
    var hodnotaPriez =  document.getElementById("priezvisko").textContent;
    var textPriez = document.createElement("input");
    textPriez.setAttribute("type", "text");
    textPriez.setAttribute("id", "priezvisko");
    textPriez.setAttribute("value", hodnotaPriez);
    var hodnotaLog =  document.getElementById("login").textContent;
    var textLog = document.createElement("input");
    textLog.setAttribute("type", "text");
    textLog.setAttribute("id", "login");
    textLog.setAttribute("value", hodnotaLog);
    var hodnotaMail =  document.getElementById("mail").textContent;
    var textMail = document.createElement("input");
    textMail.setAttribute("type", "text");
    textMail.setAttribute("id", "mail");
    textMail.setAttribute("value", hodnotaMail);
    var hodnotaCislo =  document.getElementById("cislo").textContent;
    var textCislo = document.createElement("input");
    textCislo .setAttribute("type", "text");
    textCislo .setAttribute("id", "cislo");
    textCislo .setAttribute("value", hodnotaCislo);
    var uloz = document.createElement("input");
    uloz.setAttribute("type", "button");
    uloz.setAttribute("value", "Ulož zmeny");
    uloz.setAttribute("onclick", "ukaz()");
    tabulka.appendChild(uloz);

    divPoh.appendChild(textPoh);


    divMeno.appendChild(textMen);
    divPriez.appendChild(textPriez);
    divLog.appendChild(textLog);
    divMail.appendChild(textMail);
    divCislo.appendChild(textCislo);
    tabulka.document.body.appendChild( divPoh);
    tabulka.document.body.appendChild( divMeno);
    tabulka.document.body.appendChild(divPriez);
    tabulka.document.body.appendChild( divLog);
    tabulka.document.body.appendChild( divMail);
    tabulka.document.body.appendChild( divCislo);
}

creating that inputs instead of labels (I know that it can be done much easily ) and this is my post function

function ukaz () {

    var  meno = $('#meno').val();
    var priezvisko= $('#priezvisko').val();
    var login = $('#login').val();
    var mail=$('#mail').val();
    var cislo=$('#cislo').val();

    $.post( "uloz.php", {
            'login':login,
            'meno':meno,
            'priezvisko':priezvisko,
            'mail':mail,
            'cislo':cislo
        });
         function (data) {
            $('#result').html(data);

        };


}

it´s being posted but everything is empty.. what am I missing?

 echo '<table  id="tabulka">';
                echo '<tr><td><label for="pohlavie" >Pohlavie:</label></td><td><div id="pohlaviediv"><label id="pohlavie" for="pohlavie">' . $pohlavie . '</label></div></td></tr>';
                echo '<tr><td><label for="meno" >Meno:</label></td><td> <div id="menodiv"><label id="meno" for="meno">' . $meno . '</label></div></td></tr>';

                echo '<tr><td><label for="priezvisko" >Priezvisko:</label></td><td><div id="priezviskodiv"> <label id="priezvisko" for="priezvisko">' . $priezvisko . '</label></div></td></tr>';

                echo '<tr><td><label for="login" >Login:</label></td><td><div id="logindiv"><label id="login" for="login">' . $login . '</label></div></td></tr>';
                echo '<tr><td><label for="mail" >E-mail:</label></td><td><div id="maildiv"><label id="mail" for="mail">' . $mail . '</label></div></td></tr>';
                echo '<tr><td><label for="cislo" >Tel. číslo:</label></td><td><div id="cislodiv"><label id="cislo" for="cislo">' . $cislo. '</label></div></td></tr>';
echo '</table>';

This is my table in html, isn´t the problem with adding those elements in javascript to html body ? and that elements appears on my page but there isn´t really set there and then my ajax method can´t get any value from it ?

yes on the begin on that php document I have echo $_POST["meno"]; at it prints nothing but it´s being posted here because in that php document I am updating my database acording what I send there and after I click on that button database is updated with empty values — eraz, Jan 07 '16 at 12:11
and I did stuff like this beffore I added to my table some rows and cells with insertrow and insert cells and then I made some button which posting values with id´s which was set in JS and it´s working, that´s why I am confused — eraz, Jan 07 '16 at 12:14

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

Using setAttribute() to modify certain attributes, most notably value in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use elt.value instead of elt.setAttribute('value', val). You should assign the value using value or val() functions instead of setAttribute(), e.g :

element.value = 'value';
//Or
$(element).val('value');

Take a look to the accepted answer in the following post setAttribute() doesn't work the way I expect it to.

Hope this helps.

edited May 23 '17 at 11:51

Community

1
1

answered Jan 07 '16 at 12:17

Zakaria Acharki

66,747
15
75
101

1

thanks for an answer but setAttribute is working I mean after label desappear and my input type text appear it does hove the value which I wanted it to have, but when i rewrite that and send click on the button which was created in that JS too, and it´s send through ajax post to uloz.php, it´s send there but it´s send there empty as I wrote nothing inside that input – eraz Jan 07 '16 at 12:23

score 0 · Answer 2 · answered Jan 07 '16 at 12:47

0

Okay so I solved it, The problem was that I gave to the inputs the same ID than the labels have, and labels has no value I guess or something like that so I tried to change name of ids for inputs in my JS and it´s working now.

answered Jan 07 '16 at 12:47

eraz

57
9

javascript empty post after ajax?

2 Answers2