根据外部javascript文件中的单选按钮单击更改输入文本

Question

This is my code:

<div id="title">
    <label class="" id="title-text" for="title">Hello World</label>
    <input type="text" name="doc-title" value="" id="title" autocomplete="off">
</div>
<div id="title-select">
    <input type="radio" name="title_format" class="title-format" id="title-format-0" value="0" checked="checked"><label for="title-format-0">Title 1</label><br>
    <input type="radio" name="title_format" class="title-format" id="title-format-1" value="1"> <label for="title-format-1">Title 2</label><br>
    <input type="radio" name="title_format" class="title-format" id="title-format-2" value="2"> <label for="title-format-2">Title 3</label>
</div>

What i need is,

1. when a radio item is clicked, it should display the respective title. Say when radio button 2 is clicked, "Title 2" should get updated for label and input elements above.

2. This needs to be done in an EXTERNAL JS FILE!

3. The 2 DIV blocks mentioned above are actually placed in separate PHP files and are heavily cascaded. So need a pure JS fix.

Currently what i have in my external file is this (ext file is getting called properly):

$('input[name=title_format]').click(function()  {
    $('input[name=doc-title]').value('Title changed to 2');
};

Ofcourse this code seems completely useless. Hope somebody helps me here.

PS: I am an absolute noob in js/jquery so please excuse if this is a simple fix. I would prefer simple javascript fix for this if possible. Else JQuery, which i understand is by including jquery-2.1.1.min.js file before my js file.

Answer 1

try this: html:

<div id="title">
        <label class="" id="title-text" for="title">Hello World</label>
        <input type="text" name="doc-title" value="" id="title" autocomplete="off">
    </div>
    <div id="title-select">
        <input type="radio" name="title_format" value="title3" onclick="changeTheText(this.value);" class="title-format" id="title-format-0" value="0" checked="checked"><label for="title-format-0">Title 1</label><br>
        <input type="radio" name="title_format" value="title3" onclick="changeTheText(this.value);" class="title-format" id="title-format-1" value="1"> <label for="title-format-1">Title 2</label><br>
        <input type="radio" name="title_format" value="title3" onclick="changeTheText(this.value);" class="title-format" id="title-format-2" value="2"> <label for="title-format-2">Title 3</label>
    </div>

javascript:

function changeTheText(theValue)
{
  document.getElementById('title').value = theValue;
}

Answer 2

WORKING FIDDLE

You forgot to close the click function. Also make a document ready function. Or else it does not know which element its about.

$(document).ready(function(){
    $('[name=title_format]').click(function()  {
        $('[name=doc-title]').val('Title changed to '+$(this).val());
    });
});

EDIT: now changes the input text to the value of the radio button.

Answer 3

Assuming the files are loading correctly, try ...

Change .value to .val

Answer 4

here is your html code(just added jquery cdn and external JS file)

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jack.js"></script>

<div id="title">
    <label class="" id="title-text" for="title">Hello World</label>
    <input type="text" name="doc-title" value="" id="title" autocomplete="off">
</div>
<div id="title-select">
    <input type="radio" name="title_format" class="title-format" id="title-format-0" value="0" checked="checked"><label for="title-format-0">Title 1</label><br>
    <input type="radio" name="title_format" class="title-format" id="title-format-1" value="1"> <label for="title-format-1">Title 2</label><br>
    <input type="radio" name="title_format" class="title-format" id="title-format-2" value="2"> <label for="title-format-2">Title 3</label>
</div>

and your external javascript code jack.js

$(document).ready(function(){
    $("input:radio[name=title_format]").click(function() {

        var idVal = $(this).attr("id");
        var value = $("label[for='"+idVal+"']").text();

        $('input[name=doc-title]').val(value);
    });
});

Answer 5

Is correct to use .val .

In your example there is an error at the end JS, you miss a ) .

http://jsfiddle.net/m05rkdsa/

Answer 6

try this

js file

$(document).ready(function(){
  $('#title-select .title-format').click(function()  {
   var title=$(this).next().text();
   $('#title :input').val(title);
});
})

html script registration

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js-file.js"></script>