Passing input id as jquery function paramenter

Question

I'm new to jQuery.

I am trying to create a reusable function that will replace the text of a input field.

I pass in the field I want to change as one parameter and the new text as another parameter.

I figured I would try it out with some radio buttons.

HTML

<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, 'All')" value="0" checked>All</label>
<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, 'Geo')" value="1">Geographical Area</label>
<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, '')" value="2">Specific User</label> 
<input type="text"id="txt_recipient" name="txt_recipient" value="All" />

JS

function replaceText(field, newtext) {
    document.getElementById(field).text(newtext);
};  

I originally toyed with the idea of

 function replaceText(field, newtext) {
          $(field).text(newtext);  
      };

but that didn't seem to work either. Help?

Answer 1

field is the actual element so just set the input value property.

function replaceText(field, newtext) {
    field.value = newtext;
}

DEMO: http://jsfiddle.net/039v0wst/1/

with jQuery

function replaceText(field, newtext) {
    $(field).val(newtext);
}

DEMO: http://jsfiddle.net/rgen7vLv/1/

Answer 2

It is no longer recommended to declare event handlers inline in the HTML attributes.

Using a more modern syntax, I'd include a data attribute that specifies the text in the destination, the update your target using the string from the data attribute.

 $('input[type="radio"]').change(function() { $("#txt_recipient").val($(this).data("text")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label> <input type="radio" name="optradio" data-text="All" value="0" checked>All</label> <label> <input type="radio" name="optradio" data-text="Geo" value="1">Geographical Area</label> <label> <input type="radio" name="optradio" data-text="" value="2">Specific User</label> <input type="text"id="txt_recipient" name="txt_recipient" value="All" /> 

Answer 3

First of all give unique names:

<input type="radio" name="optradio1" onClick="replaceText(txt_recipient, 'All')" value="0" checked>All</label>

Geographical Area

then js

$('input[name$="optradio1"]').val("newtext")

Answer 4

Can you pass the field id with ' '

Eg;

'txt_recipient' instead of 'txt_recipient