Change input value based on another input's value

I want to have a form which will have a couple of inputs, for example: name and url.

When the user enters their name, I'd like the url input to automatically have as a default their name with an underscore between words. So if they type in as their name pedro kinkybottom then automatically set as the default in the url input would be pedro_kinkybottom.

I'm using cakephp if anyone happens to know a particularly cakey way to do this that'd be cool but otherwise any help at all wou开发者_如何学Gold be most welcome.

You'd probably want to do this in JavaScript and not in PHP. Even though you may be more familiar with the latter, the user experience would be better with the former and the overall design simpler (since the page wouldn't need to refresh).

You essentially need to do two things:

1. Set the value of an input in response to an event on another input.
2. Replace space characters with underscore characters.

For the second part, take a look at JavaScript's replace function. It's pretty robust and lets you do a lot of string manipulation. Definitely worth trying it out yourself.

For the first part, here's an example with jQuery:

$('#inputName').change(function() {
  $('#inputURL').val($('#inputName').val());
});

This would set the value of inputURL to the value of inputName any time the value of inputName changes. For the string replacement, you'd modify it similar to this:

$('#inputName').change(function() {
  $('#inputURL').val($('#inputName').val().replace(' ', '_'));
});

Note that the change event will be fired when the control loses focus. If you want to to happen as-you-type then try the keyup event. There are other events as well.

Add a keyup event to the name field that will update the url field:

<form>
    <input type="text" id="name" />
    <input type="text" id="url" />
</form>

...and the js:

addEvent(document.getElementById('name'), 'keyup', function () {
   document.getElementById('url').value = this.value.replace(' ', '_');
});


function addEvent(ele, evnt, funct) {
  if (ele.addEventListener) // W3C
    return ele.addEventListener(evnt,funct,false);
  else if (ele.attachEvent)  // IE
    return ele.attachEvent("on"+evnt,funct);
}

http://jsfiddle.net/XKEh5/

If you're only going to do some trivial stuff like this, then you'll be fine with plain old javascript. If you're going to be doing a lot of this sort of thing, plus any effects like fading out elements or whatnot, I suggest you look in to mootools or jQuery.

Here is an edited version of the above answer. There was an issue with the "value.replace(' ', '_');" where it would only take the space out between the first two words typed in. This code snippet below does it for all.

<script language="javascript" type="text/javascript">

addEvent(document.getElementById('name'), 'keyup', function () {    
   document.getElementById('url').value = this.value.split(' ').join('');    
});    

function addEvent(ele, evnt, funct) {

  if (ele.addEventListener) // W3C    
    return ele.addEventListener(evnt,funct,false);

  else if (ele.attachEvent)  // IE    
    return ele.attachEvent("on"+evnt,funct);

}

</script>