如何避免重複將選中的值添加到輸入文本框

我正在處理一個項目，我要將單選按鈕值添加到輸入字段。如何避免重複將選中的值添加到輸入文本框

輸入欄是添加名稱，單選按鈕用於選擇性別。默認情況下，它應該是輸入字段上的「我的名字」，並且當用戶檢查單選按鈕時，它應該添加文本「我是{單選按鈕值}」。

我已經成功地做一些這一點，但問題是：

當我打開它不斷添加文本的單選按鈕，它看起來愚蠢。
默認情況下，它顯示值「我是一個未定義的」，它應該是「我的名字」
如何驗證用戶在提交時選擇了性別？

<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腳本

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']"); 
input.val(input.val() + b + " " + a); 

} 

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

鏈接到小提琴的例子是

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

感謝您的幫助。

來源

2014-12-02 iSqware

這裏工作小提琴：http://jsfiddle.net/ssbrbsfp/6/

爲了避免重複的結果，不reappend的input.val它：

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

檢查填充輸入前的值是否未定義以及p：

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> "); 
}

要驗證之前提交：

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

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

我把它放在提交按鈕向您展示的行爲，但你應該把它放在表單提交事件。

來源

2014-12-02 16:20:17

謝謝，它的作品很棒。不過，我想讓用戶輸入他們的名字，然後選擇性別。所以它會是「Isqware」和「我是男孩」 – iSqware 2014-12-02 16:28:46

只需添加一個輸入文本？ http://jsfiddle.net/ssbrbsfp/9/ – 2014-12-02 16:32:36

Thansk Mathieu，但是當我在文本框中輸入我的名字時，當我點擊性收音機按鈕時，它刪除我的名字並用「我是男孩/我填充輸入文本字段我是一個女孩「我想保留這個名字。感謝您的幫助和努力。 – iSqware 2014-12-02 16:51:03

首先你在沒有收音機的情況下在dom上執行功能displayVals();，因此輸入文本得到未定義的值。其次，您每次都會在無線電廣播中添加舊值。看看這裏：

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>

來源

2014-12-02 16:19:20

OK，有幾件事情：

取下輸入文本定義onblur和onfocus，placeholder已經表現那樣。
在腳本的末尾刪除調用displayVals()
中的input.val
用於驗證的reassignation取出input.val() +，您可以將關鍵字required添加至定義要麼是input radio標籤，要麼兩者兼而有之。

來源

2014-12-02 16:29:47 delCano

如何避免重複將選中的值添加到輸入文本框

回答

相關問題