Change placeholder text

JavaScript
1

I have a couple of radio buttons, and when either one is clicked I need to control what the placeholder value of an input text field is, so basically the radio button decides what the placeholder text is.

I have got something else working when the radio button is clicked, but not sure how to do it for the placeholder text.

This is that

if ($("input[name='rdio']:checked").val() == 'resort')
genderValue= "resort"

And this is my form

<form name="myForm">
<input type="radio" name="rdio" value="resort" checked onclick="clear_form_elements(this.form)"> Resort  <input type="radio" name="rdio" value="hotel" onclick="clear_form_elements(this.form)"> Hotel
<input type="text"
onkeyup="ajaxFunction(this.value);" name="username" placeholder="" class="text" id="myMessage" />
</form>

Another bug is that when you click the second radio button, the first one moves to the left, then check the left one and the right one moves, very untidy and cant find any solution for it and have used every keyword possible in google.

2

Do you mean something like this?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

<body>
<form name="myForm">
  <input class="radio-buttons" type="radio" name="rdio" id ="resort" value="resort" checked>
  <label for="resort">Resort</label>
  <input class="radio-buttons" type="radio" name="rdio"id="hotel" value="hotel">
  <label for="hotel">Hotel</label>
  <input type="text" name="username" placeholder="" class="text" id="myMessage">
</form>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$( "#myMessage" ).attr('placeholder',$('.radio-buttons:checked').val())
$( ".radio-buttons" ).click(function() {
  $( "#myMessage" ).attr('placeholder',$(this).val())
});
</script>


</body>
</html>
1 Like
3

Hi Paul,
Thank you again.

Umm what Im looking to do is when they click the ‘Resort’ radio button, the placeholder text is say “Cancun, Barcelona, London, Phuket…”

And then if they click the ‘Hotels’ radio button the placeholder text is “Royal Plaza Resort Cancun”

Both are hints to what to type

4

You could store the hints in a data attribute and then do much the same as before.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

<body>
<form name="myForm">
  <input class="radio-buttons" data-hint="Cancun, Barcelona, London, Phuket..." type="radio" name="rdio" id ="resort" value="resort" checked>
  <label for="resort">Resort</label>
  <input class="radio-buttons" data-hint="Royal Plaza Resort Cancun" type="radio" name="rdio"id="hotel" value="hotel">
  <label for="hotel">Hotel</label>
  <input type="text" name="username" placeholder="" class="text" id="myMessage">
</form>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$( "#myMessage" ).attr('placeholder',$('.radio-buttons:checked').data('hint'))
$( ".radio-buttons" ).click(function() {
  $( "#myMessage" ).attr('placeholder',$(this).data('hint'))
});
</script>


</body>
</html>
5

Oh I see, yes that’s neat, didn’t know about data-hint and it working like that.

That’ll do the trick, thank you Paul, learn something new every visit.

Cheers

6

Works really well thank you Paul, have you ever had a problem where 2 radio buttons together left and right, and when you click one of them the other moves, only slightly but its as if there an area around it when its selected so it then pushes the other over, and then same for the other when that is selected.

7

I’d need to see an example but I guess some browsers might add something extra in the checked state causing the difference. It’s more likely that your missing labels are also part of the problem as the white-space in between the text and checkbox may cause problems.

Make sure you have a label for the text and then set the labels and inputs to display:inline-block.

If you have a reduced example demonstrating your problem I’ll take another look.

8

The ‘data’ attribute is an attribute that you can attach ‘data’ to that you can use later or modify as required. You create your own name as in my example ‘hint’ and then you can store and access data that may be needed later on.

You can create any name (in lowercase) as long as it starts with ‘data-’. e.g. data-my-code=“this is my data”.

9

Morning Paul, well it maybe morning depending where you are.

I have put the page I’m working on on the live server, but its a bit all over the place at the mo.

The area I’m working on is the block down the page a bit where you will see the two radio buttons for ‘Resort’ or ‘Hotel’, and if you try the radio buttons you will see they move.

Like you say though maybe I haven’t done it correct with using labels,

dev area

10

Hi,

You’ve applied margins to the checked input here.

input:checked {
    outline: 1px solid red;
    margin-right: 4px;
    margin-left: 6px;
    margin-top: 2px;
    margin-bottom: 2px;
}

That means when it is unchecked you will get no margins and hence the jump. Remove those styles or apply them to all radios regardless of checked or not.:slight_smile:

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.