changing value of input does not work in jquery

Question

I'm trying to change input value using its id in jquery but it does not work and neither return any message of error in the console.

I also have done some console.log in order to verify if the data are not empty and they are not

Below is my script

   $('.changer_etat').click(function(){
        var id_etat = $(this).closest('tr').find('span.id_etat').text();
        var date_depart = $(this).closest('tr').find('span.date_depart').text();
        var date_fin = $(this).closest('tr').find('span.date_fin').text();
        var etat_programme = $(this).closest('tr').find('span.etat_programme').text();
        $('#date_depart').val(date_depart);
        console.log(date_fin);
        console.log(id_etat);
        console.log(etat_programme);
    });

I've tried many thing. Like

$('#date_depart').attr('value',date_depart)

but this not work, I also tried with append method with no success

All searches made on that website or on google does not permitted me to find an issue.

Edit :

Below is the php part with all rows and there class

` <?php while ($historique = mysql_fetch_assoc($liste_historique)): ?>
                <tr>
                    <td style="text-align: center">
                        <img src="../<?php echo fetchImageProgramme($historique['id_objectif']) ?>">
                    </td>
                    <td style="vertical-align: middle">
                        <span class="id_etat"><?php echo $historique['id_record'] ?></span>
                        <?php echo $historique['nom_programme'] ?>
                    </td>
                    <td style="text-align: center;vertical-align: middle">
                        <span class="date_depart"><?php echo date('d-m-Y', strtotime($historique['date_depart'])) ?></span>
                    </td>
                    <td style="text-align: center;vertical-align: middle">
                        <span class="date_fin"><?php echo date('d-m-Y', strtotime($historique['date_fin'])) ?></span>
                    </td>
                    <td style="text-align: center;vertical-align: middle">
                        <span class="etat_programme"><?php echo $historique['etat_programme'] ?></span>
                        <?php echo echoEtatProgramme($historique['etat_programme']) ?>
                    </td>
                    <td style="vertical-align:middle">
                        <a class="uibutton icon add" href="#" style="width:160px;text-align: left">Créer un programme</a><br><a class="uibutton icon edit changer_etat" href="#" style="width:160px;text-align: left">Changer l'état</a>
                    </td>
                </tr>
            <?php endwhile; ?>`

And there is the form with the Id I want to fill

<div id="changer_etat" style="display:none" title="Changer l'état de mon programme">
        <table class="noborder" style="width:400px">
            <tr>
                <td style="width:200px;text-align: right;font-weight: bold">
                    Date de début :
                </td>
                <td>
                    <input type="date_debut" class="" id="date_depart">
                </td>
            </tr>
            <tr>
                <td style="width:200px;text-align: right;font-weight: bold">
                    Date de fin :
                </td>
                <td>
                    <input type="date_fin" class="datepicker">
                </td>
            </tr>

            <tr>
                <td style="width:200px;text-align: right;font-weight: bold">
                    État :
                </td>
                <td>
                    <select name="etat" >
                        <option value="1">
                            En attente
                        </option>
                        <option value="2">
                            Commencé
                        </option>
                        <option value="3">
                            Terminé
                        </option>
                    </select>
                </td>
            </tr>
        </table>

are you using any external library. <input type="date_debut"/> It needs to be type="text" ? — Venkata Krishna
– Venkata Krishna, Commented Oct 30, 2013 at 18:32
yes sir, I've modified all by text, but it does not work. I've also tried in javascript directly document.getElementById('date_depart').value = date_depart it does not work, I also did alert(date_depart); it return the good value. — user2506760
– user2506760, Commented Oct 30, 2013 at 18:46

Venkata Krishna · Accepted Answer · 2013-10-30 19:51:47Z

1

Don't set its attribute. Use .val()

$('#date_depart').val(date_depart)

EDIT:

The problem with the above DOM is that there are 2 input fields with the same ID. That makes the html invalid. You cannot have two elements wit the same ID.

edited Oct 30, 2013 at 19:51

answered Oct 30, 2013 at 18:20

Venkata Krishna

15.2k5 gold badges45 silver badges57 bronze badges

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

7 Comments

user2506760 Over a year ago

that is what I do please have a look at my script in the beginning, but it does not work

Venkata Krishna Over a year ago

@user2506760 what is #date_depart? An input field?

user2506760 Over a year ago

date_depart is the input id of the field I want to fill

Venkata Krishna Over a year ago

@user2506760 - what does console.log(date_depart) give you?

user2506760 Over a year ago

it return to me that string '01-08-2013'

|

Collectives™ on Stack Overflow

changing value of input does not work in jquery

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related