Javascript value not visible in input field value

Question

I have two forms on my page, and I want to pass the data from one input field to another input field using javascript. If the radio input is checked in the first form, the input value should get this value.

My forms:

<form name="news-form" action="p" method="post">
            <section id="section-list" style="">            
                <hr class="solid">
                
                <?php
                    $text = "";
                    $headline = "";
                    $shortdescription = "";
                    $description = "";
                    $linktext = "";
                    $link = "";
                    $newsID = "";

                    $xml=simplexml_load_file($xmlurl)or die("Kann keine Verbindung zu $xmlurl aufbauen");

                    foreach($xml->children() as $news):
                    $newsID = $news->ID;
                ?>
                <div name="idsection" title ="<?php echo $newsID; ?>">
                <section>
                    <div class="divID">
                        <label class="label-idnumber">Eintrag Nummer: <?php echo $news->ID; ?> </label>
                        <input id="NewsID"  type="radio" name="NewsID" value="<?php echo $newsID; ?>"></input>
                    </div>
                </section>
                .
                .
                .
                .
                .
</form>


<form name="newsEntryBea-form" action="" method="post">
            <section id="section-bea" style="">         
                <hr class="solid">          

                <section>
                    <div style="float:left;">
                        <label for="idnumberBea" class="label-header">Eintrag Nummer</label>
                        <input id="idnumberBea" name="idnumberBea" type="text" value="" readonly> </input>
                    </div>
                </section>
                .
                .
                .
                .
                .
</form>

My script code:

<script>
    function inputToggle(e) {

        var sectionnumbers = document.getElementsByName('idsection');   
        var sectionnumber;  
        var idnumbers = document.getElementsByName('NewsID');
        var idnumber;
        
        for(var i = 0; i < idnumbers.length; i++){
            if(idnumbers[i].checked){
                idnumber = idnumbers[i].value;
                
                for(var i = 0; i < sectionnumbers.length; i++){
                    sectionnumber = sectionnumbers[i].title;
                    
                    if(sectionnumber === idnumber){
                        document.getElementsByName('idnumberBea').value = idnumber;     
                        console.log("Mein Text im Feld idnumberBea: " + document.getElementsByName('idnumberBea').value);
                    }
                }                               
                console.log("Meine NewsID Nummer: " + idnumber);
            }
        }
    }
</script>

So in the console I get all my values correctly shown, but in the HTML form the value is not displayed.

Can anybody tell what is wrong here?

mohsen Zare · Accepted Answer · 2021-01-08 16:05:49Z

1

when you use getElementsByName it get element as an array so you should select the element you want in array like below code document.getElementsByName('idnumberBea')[0].value

var idnumber="hello world"
document.getElementsByName('idnumberBea')[0].value = idnumber;

<input type="text" name="idnumberBea">

answered Jan 8, 2021 at 16:05

mohsen Zare

3861 silver badge10 bronze badges

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

Comments

Maik Lowrey · Accepted Answer · 2021-01-08 16:18:44Z

0

You have built a loop inside a loop. in the inner loop you declare variable i again. give here another variable name. then i would think it is better to use let instead of var. To prevent a scope problem in such a case.

answered Jan 8, 2021 at 16:18

Maik Lowrey

17.8k8 gold badges54 silver badges101 bronze badges

Comments

Benja Oliva · Accepted Answer · 2021-01-08 16:32:39Z

First of all, you should check you HTML structures of forms, like closing well the objects and check the input tags and how to use them, couse you are closing them when you should not.

Here is what i got with static values, you have to change the values fields with your php variables:

var radioInput_form1 = document.getElementById('NewsID')
var inputText_form2 = document.getElementById('idnumberBea')

radioInput_form1.addEventListener('click', function(){
    inputText_form2.value = radioInput_form1.value
})

<form name="news-form" action="p" method="post">
            <section id="section-list" style="">            
                <hr class="solid">
                
                <div name="idsection" title ="The Title"></div>
                <section>
                    <div class="divID">
                        <label class="label-idnumber">Eintrag Nummer: 15 </label>
                        <input id="NewsID"  type="radio" name="NewsID" value="15">
                    </div>
                </section>
                .
                .
                .
                .
                .
                </section>
</form>


<form name="newsEntryBea-form" action="" method="post">
            <section id="section-bea" style="">         
                <hr class="solid">          

                <section>
                    <div style="float:left;">
                        <label for="idnumberBea" class="label-header">Eintrag Nummer</label>
                        <input id="idnumberBea" name="idnumberBea" type="text" value="" readonly>
                    </div>
                </section>
               </section>
</form>

Collectives™ on Stack Overflow

Javascript value not visible in input field value

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related