Textfield inside Div

I have this

<div id="mainDiv">
    <input type="text" value="Here is the text" />
</div>
<input type="button" value="Push" onclick="changeText()">

When I push the button I want to change the value from textfield.

Only this value I want to be changed because in m开发者_如何学Goy page there are a lot of textfields but those values must remain unchanged.

---

try this

<div id="mainDiv"> 
<input type="text" value="Here is the text" /> 
</div> 
<input type="button" value="Push" onclick="document.getElementById('mainDiv').children[0].value='asd'">

---

Well then, maybe this will help:

<script>
    function changeText() {
        var tf = document.getElementById('mainDiv').childNodes[0];
        tf.value = 'some text';
    }
</script>


<div id="mainDiv"><input type="text" value="Here is the text" /></div>
<input type="button" value="Push" onclick="changeText();">

---

Are you looking for something like this? Basically toggles the input to static text?

Live Demo

function changeText(){
    var mainDiv = $("#mainDiv");
    mainDiv.text(mainDiv.children('input').val()); 
}

If you have multiple input fields per div this solution will work,

Live Demo 2

function changeText(){
    var mainDiv = $("#mainDiv"),
        inputText = "";

    if(mainDiv.children('input').length > 0){
        mainDiv.children('input').each(function(){
          inputText += $(this).val();  
        });
        mainDiv.text(inputText); 
    }
}

---

Try to bind the id of the textbox with the id of the substring with a code like this:

<div id="mainDiv"> <input type="text" value="Here is the text" id="input-324" /> </div> <input type="button" value="Push" onclick="changeText(this.id.replace("button-", ""))" id="button-324" >

<script>
    function changeText(id) {
        document.getElementById(id).value='myvalue';
    }
</script>