Ways to prevent the checked value from being continually added to the input text box

Question

Ways to prevent the checked value from being continually added to the input text box

I am currently working on a project that involves integrating radio button values with an input field.

The purpose of the input field is to enter a name, while the radio buttons are meant for selecting the gender. The default text in the input field should be "My Name", and when a user selects a radio button, it should append the text "I am a {radio button value}".

While I have made some progress, I am facing the following challenges:

When toggling between radio buttons, the text keeps adding up unnecessarily.
By default, it displays "I am a undefined" instead of "My Name."
How can I ensure that the user has selected a gender before submitting the form?

<input type="radio" id="single" name="sex" value="Boy">Boy &nbsp;  &nbsp; |  &nbsp;&nbsp;
<input type="radio" id="single" name="sex" value="Girl">Girl     
<br><br><br><br>
<p></p>

Jquery Script

function displayVals() {
var gender = $("input[type='radio']:checked").val();
var prefix = "I am a";

var checkedValue = $("p").html("<b>I am a </b> " + " " + gender );

var userInput = $("input[type='text']");
userInput.val(userInput.val() + prefix + " " + gender);

}

$("input[type='radio']").change(displayVals);
displayVals();

Link to the jsfiddle copy is

http://jsfiddle.net/ssbrbsfp/2/

Your assistance is greatly appreciated.

jquery html css

Answer 1

Answer №1

For a demonstration, you can view a functional fiddle here: http://jsfiddle.net/ssbrbsfp/6/

To prevent duplicate output, refrain from appending input.val again:

input.val(b + " " + a);

Prior to filling the input and paragraph, check if the value is undefined:

if(a != undefined)
{
    $( "p" ).html( "<b>I am a </b> " + " " + a );
    var input = $("input[type='text']");
    input.val(b + " " + a);
}
else
{
    $( "p" ).html( "<b>I am a </b> ");
}

To validate before submitting:

$(".SubmitButton").click(function () {
    if($("input[type='radio']:checked").val() == undefined)
    {

        alert("You must choose a sex");
        return false;
    }
});

I included this on the submit button for demonstration purposes, but it should ideally be placed in the form submit event.

Answer 2

For a demonstration, you can view a functional fiddle here: http://jsfiddle.net/ssbrbsfp/6/

To prevent duplicate output, refrain from appending input.val again:

input.val(b + " " + a);

Prior to filling the input and paragraph, check if the value is undefined:

if(a != undefined)
{
    $( "p" ).html( "<b>I am a </b> " + " " + a );
    var input = $("input[type='text']");
    input.val(b + " " + a);
}
else
{
    $( "p" ).html( "<b>I am a </b> ");
}

To validate before submitting:

$(".SubmitButton").click(function () {
    if($("input[type='radio']:checked").val() == undefined)
    {

        alert("You must choose a sex");
        return false;
    }
});

I included this on the submit button for demonstration purposes, but it should ideally be placed in the form submit event.

Answer 3

Answer №2

At the beginning, the function displayVals(); is executed when the DOM is ready without any radio button selected, causing the input text to receive the value of "undefined". Then, on every radio change, the old value is added. Check out the code snippet below for a better understanding:

function displayVals() {
  var a = $("input[type='radio']:checked").val();
  var b = "I am a";

  var checkedValue = $("p").html("<b>I am a </b> " + " " + a);

  var input = $("input[type='text']");
  //you want to add only the value of radio each time.
  input.val(a);
}

$("input[type='radio']").change(displayVals);
//why execute this one on dom ready??
//displayVals();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" onblur="this.placeholder = 'my name'" onfocus="this.placeholder = ''" placeholder="my name" name="name" id="my name" class="InputText">
<input type="submit" value="Submit" class="SubmitButton">

<br>

<input type="radio" id="single" name="sex" value="Boy">Boy &nbsp; &nbsp; | &nbsp;&nbsp;
<input type="radio" id="single" name="sex" value="Girl">Girl

<br>
<br>
<br>
<br>
<p></p>
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>

Answer 4

At the beginning, the function displayVals(); is executed when the DOM is ready without any radio button selected, causing the input text to receive the value of "undefined". Then, on every radio change, the old value is added. Check out the code snippet below for a better understanding:

function displayVals() {
  var a = $("input[type='radio']:checked").val();
  var b = "I am a";

  var checkedValue = $("p").html("<b>I am a </b> " + " " + a);

  var input = $("input[type='text']");
  //you want to add only the value of radio each time.
  input.val(a);
}

$("input[type='radio']").change(displayVals);
//why execute this one on dom ready??
//displayVals();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" onblur="this.placeholder = 'my name'" onfocus="this.placeholder = ''" placeholder="my name" name="name" id="my name" class="InputText">
<input type="submit" value="Submit" class="SubmitButton">

<br>

<input type="radio" id="single" name="sex" value="Boy">Boy &nbsp; &nbsp; | &nbsp;&nbsp;
<input type="radio" id="single" name="sex" value="Girl">Girl

<br>
<br>
<br>
<br>
<p></p>
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>

Answer 5

Answer №3

Let's make some improvements:

Optimize the input text definition by removing unnecessary onblur and onfocus attributes as placeholder already provides similar functionality.
Eliminate the call to displayVals() at the end of the script for a cleaner code structure.
Simplify the reassignment of the input value by removing the unnecessary input.val() +.
Enhance validation by utilizing the required keyword in the definition of both input radio tags.

Answer 6

Let's make some improvements:

Optimize the input text definition by removing unnecessary onblur and onfocus attributes as placeholder already provides similar functionality.
Eliminate the call to displayVals() at the end of the script for a cleaner code structure.
Simplify the reassignment of the input value by removing the unnecessary input.val() +.
Enhance validation by utilizing the required keyword in the definition of both input radio tags.

Ways to prevent the checked value from being continually added to the input text box

Answer №1

Answer №2

Answer №3

Similar questions

Two elements occupy the rest of the vertical space

Is there a way to restrict the number of times I can utilize slideToggle function?

DjangoPDFViewer

execute a function after submitting the form

What is the reason for the initial DOM operation taking significantly longer than subsequent ones?

What is the reason for the error message saying "The prefix 'h' for the element 'h:head' is not bound"?

Effortlessly find data in an HTML table and showcase the results instantly without

What is the best way to vertically align my image for perfect centering?

Having trouble with your jQuery animation on a div?

What is the reason why the `td` element is not being added to the final

I want to utilize an Ajax/JQuery filled dropdown to dynamically alter the user interface without the need for additional server-side requests

Challenge with modal dialog scrolling on iPad and iPhone

Concealing divisions on a website with CSS styling

Determine through code if a CSS file is being utilized

What measures can be taken to prohibit a user from accessing a client-side HTML file using express?

CSS uses color parameters in the same way

What is the best way to retrieve the date value from ngx-daterangepicker-material?

Prevent the page from automatically scrolling back to the top when a user clicks on a "read more"

rails/jquery/ajax: The completion function is not being triggered

JavaScript jQuery not starting up