jQuery를 사용하여 다단계 양식 재설정
다음과 같이 코드화된 표준 재설정 버튼이 있는 양식이 있습니다.
<input type="reset" class="button standard" value="Clear" />
문제는 해당 양식이 다단계 정렬이므로 사용자가 단계를 채우고 나중에 돌아오면 지우기 버튼을 클릭할 때 다양한 필드의 '기억된' 값이 재설정되지 않는다는 것입니다.
저는 jQuery 함수를 첨부하여 모든 필드를 루프하고 '수동으로' 클리어하면 된다고 생각합니다.저는 이미 양식 내에서 jQuery를 사용하고 있지만, 이제 막 속도를 내고 있기 때문에 각 필드를 ID로 개별적으로 참조하는 것 외에는 어떻게 해야 할지 잘 모르겠습니다. 이는 그다지 효율적이지 않은 것 같습니다.
도움이 필요한 TIA입니다.
2012년 3월에 업데이트됨.
그래서 제가 처음 이 질문에 답을 한 지 2년 후에 저는 그것이 거의 엉망으로 변했다는 것을 다시 보게 되었습니다.저는 그것이 가장 많이 투표된 + 승인된 것이기 때문에 제가 그것으로 돌아가서 제 대답을 진정으로 정확하게 할 때라고 생각합니다.
참고로, 원래 포스터가 요청한 것이 아니기 때문에 Titi의 대답은 틀렸습니다. 네이티브 재설정() 방법을 사용하여 양식을 재설정할 수 있는 것은 맞지만, 이 질문은 이러한 방법으로 재설정할 경우 양식에 남아 있는 기억된 값을 지우려고 합니다.이것이 "수동" 재설정이 필요한 이유입니다.저는 대부분의 사람들이 구글 검색에서 이 질문을 받고 정말로 리셋() 방법을 찾고 있다고 생각하지만 OP가 말하는 특정 경우에는 작동하지 않습니다.
제 원래 대답은 다음과 같습니다.
// not correct, use answer below
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
이는 OP를 포함한 많은 경우에 효과가 있을 수 있지만 코멘트와 다른 답변에서 지적한 바와 같이 모든 값 속성에서 라디오/체크박스 요소를 삭제합니다.
더 정확한 답변(완벽하지는 않음)은 다음과 같습니다.
function resetForm($form) {
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox')
.removeAttr('checked').removeAttr('selected');
}
// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name
:text,:radio등. 선택기 자체는 jQuery에 의해 나쁜 관행으로 간주됩니다. 그들은 결국 다음을 평가합니다.*:text그래야 하는 것보다 훨씬 더 오래 걸리죠저는 화이트리스트 접근 방식을 선호하며 원래 답변에 사용했으면 좋았을 것입니다. 든쨌지, 다을으써로를 으로써.input선택기의 일부와 양식 요소의 캐시를 추가하면 여기서 가장 성능이 좋은 답변이 될 것입니다.
선택 요소에 대한 사용자의 기본값이 공백 값을 갖는 옵션이 아닌 경우 이 답변에는 여전히 몇 가지 결함이 있을 수 있지만, 이는 확실히 얻을 수 있는 것처럼 일반적이며 사례별로 처리해야 합니다.
이렇게 하면 됩니다.
$('#myform')[0].reset();
더 많은 정보
정myinput.val('')다음과 같은 입력이 있는 경우 "에뮬레이트"를 100% 에뮬레이트하지 않을 수 있습니다.
<input name="percent" value="50"/>
출에게 전화하기myinput.val('')기본값이 50인 입력에서는 빈 문자열로 설정하는 반면, 호출은myform.reset()초기 값인 50으로 재설정됩니다.
파올로의 수락된 답변에 큰 문제가 있습니다.고려 사항:
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
라인은 또한 모든 항목을 삭제합니다.value확인란 및 라디오 단추에 할당됩니다.그래서 (나처럼) 당신이 다음과 같은 일을 한다면,
<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />
승인된 답변을 사용하면 입력 내용이 다음과 같이 변환됩니다.
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
웁스 - 저는 그 값을 사용하고 있었습니다.
다음은 확인란과 라디오 값을 유지하는 수정된 버전입니다.
// Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val('');
// De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');
jQuery 플러그인
jQuery 플러그인을 만들어 필요한 곳 어디서나 쉽게 사용할 수 있도록 했습니다.
jQuery.fn.clear = function()
{
var $form = $(this);
$form.find('input:text, input:password, input:file, textarea').val('');
$form.find('select option:selected').removeAttr('selected');
$form.find('input:checkbox, input:radio').removeAttr('checked');
return this;
};
이제 전화를 걸어 사용할 수 있습니다.
$('#my-form').clear();
양식을 지우는 것은 보기만큼 간단하지 않고 약간 까다롭습니다.
jQuery 양식 플러그인을 사용하고 clearForm 또는 resetForm 기능을 사용할 것을 제안합니다.그것은 대부분의 코너 케이스를 처리합니다.
주로 하는 일은:
$('#formDiv form').get(0).reset()
또는
$('#formId').get(0).reset()
document.getElementById('frm').reset()
여기 시작할 수 있는 것이 있습니다.
$('form') // match your correct form
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank
물론 확인란/라디오 단추가 있는 경우 이 단추도 포함하도록 수정하고 설정해야 합니다..attr({'checked': false});
편집 Paolo의 답변이 더 간결합니다.나는 그것에 대해 몰랐기 때문에 내 대답은 더 말이 많습니다.:input선택자, 그리고 저는 단순히 체크된 속성을 제거할 생각도 하지 않았습니다.
유효성 검사 플러그인을 사용하는 것이 좋습니다!양식 재설정은 간단합니다.
var validator = $("#myform").validate();
validator.resetForm();
저는 이것이 잘 작동한다고 생각합니다.
$(":input").not(":button, :submit, :reset, :hidden").each( function() {
this.value = this.defaultValue;
});
기본적으로 제공된 솔루션 중 어떤 것도 나를 기쁘게 하지 않습니다. 몇몇 사람들이 지적했듯이 그들은 양식을 재설정하는 대신 비웁니다.
그러나 다음과 같은 몇 가지 Javascript 속성이 있습니다.
- 텍스트 필드의 기본값
- 기본 확인란 및 라디오 단추에 대해 선택됨
- default선택사항선택
페이지가 로드될 때 필드의 값을 저장합니다.
jQuery 플러그인을 작성하는 것은 이제 사소한 일입니다. (조급한 사람들에게는...여기 http://jsfiddle.net/kritzikratzi/N8fEF/1/) 데모가 있습니다.
플러그인 코드
(function( $ ){
$.fn.resetValue = function() {
return this.each(function() {
var $this = $(this);
var node = this.nodeName.toLowerCase();
var type = $this.attr( "type" );
if( node == "input" && ( type == "text" || type == "password" ) ){
this.value = this.defaultValue;
}
else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
this.checked = this.defaultChecked;
}
else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){
// we really don't care
}
else if( node == "select" ){
this.selectedIndex = $this.find( "option" ).filter( function(){
return this.defaultSelected == true;
} ).index();
}
else if( node == "textarea" ){
this.value = this.defaultValue;
}
// not good... unknown element, guess around
else if( this.hasOwnProperty( "defaultValue" ) ){
this.value = this.defaultValue;
}
else{
// panic! must be some html5 crazyness
}
});
}
} )(jQuery);
사용.
// reset a bunch of fields
$( "#input1, #input2, #select1" ).resetValue();
// reset a group of radio buttons
$( "input[name=myRadioGroup]" ).resetValue();
// reset all fields in a certain container
$( "#someContainer :input" ).resetValue();
// reset all fields
$( ":input" ).resetValue();
// note that resetting all fields is better with the javascript-builtin command:
$( "#myForm" ).get(0).reset();
메모 몇 개...
- 저는 새로운 html5 양식 요소에 대해 알아보지 않았습니다. 일부는 특별한 처리가 필요할 수 있지만 동일한 아이디어가 효과가 있을 것입니다.
- 를 직접. 요를직참야합니다해조접소.
$( "#container" ).resetValue()작하지않다습을 사용합니다. 항상 사용합니다.$( "#container :input" )대신. - 위에서 언급했듯이, 여기 데모가 있습니다: http://jsfiddle.net/kritzikratzi/N8fEF/1/
jQuery 없이도 이 문제가 더 쉽게 해결될 수 있습니다.
일반 자바스크립트에서 이것은 다음과 같이 간단합니다.
document.getElementById('frmitem').reset();
저는 항상 jQuery를 사용하여 코딩을 향상시키고 속도를 높이지만 실제로는 더 빠르지 않을 때가 있다는 것을 기억하려고 노력합니다.그런 경우에는 다른 방법을 사용하는 것이 좋습니다.
저는 프랜시스 루이스의 멋진 해결책을 약간 변형시켰습니다.이 솔루션에서는 드롭다운 선택 항목을 공백으로 설정하지 않습니다.(대부분의 사람들이 "지우기"를 원할 때, 그들은 아마도 모든 가치를 비우고 싶어할 것입니다.)이거는 이거랑 같이..find('select').prop("selectedIndex", -1).
$.fn.clear = function()
{
$(this).find('input')
.filter(':text, :password, :file').val('')
.end()
.filter(':checkbox, :radio')
.removeAttr('checked')
.end()
.end()
.find('textarea').val('')
.end()
.find('select').prop("selectedIndex", -1)
.find('option:selected').removeAttr('selected')
;
return this;
};
사용하기만 하면 됩니다.jQuery Trigger event 예:
$('form').trigger("reset");
그러면 확인란, 라디오 버튼, 텍스트 상자 등이 재설정됩니다.기본적으로 양식이 기본 상태로 전환됩니다.간단히 말해서#ID, Class, element에의 에.jQuery선택자
저는 보통 양식에 숨겨진 리셋 버튼을 추가합니다.필요한 경우: $('#$). 클릭:
가장 많이 투표한 답변 수정$(document).ready()상황:
$('button[type="reset"]').click(function(e) {
$form = $(this.form);
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
e.preventDefault();
});
이것은 나에게 효과가 있었고, 폭약 응답은 선택된 필드를 재설정하지 않았고, 그의 것을 가져갔고, 여기 내 편집이 있습니다.
// Use a whitelist of fields to minimize unintended side effects.
$(':text, :password, :file', '#myFormId').val('');
// De-select any checkboxes, radios and drop-down menus
$(':input,select option', '#myFormId').removeAttr('checked').removeAttr('selected');
//this is for selecting the first entry of the select
$('select option:first', '#myFormId').attr('selected',true);
저는 파올로 베르간티노 솔루션을 사용하고 있습니다. 훌륭하지만 몇 번의 수정도 없이...특히 ID 대신 양식 이름으로 작업합니다.
예:
function jqResetForm(form){
$(':input','form[name='+form+']')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
}
이제 내가 그것을 사용하고 싶을 때 할 수 있습니다.
<span class="button" onclick="jqResetForm('formName')">Reset</span>
보시는 바와 같이, 이는 어떤 형태로든 작동하며, 제가 CSS 스타일을 사용하여 단추를 만들고 있기 때문에 클릭해도 페이지가 새로 고쳐지지 않습니다.다시 한번 당신의 의견에 파올로에게 감사드립니다.유일한 문제는 양식에 기본값이 있는 경우입니다.
저는 아래 솔루션을 사용했고 그것은 저에게 효과가 있었습니다(전통적인 자바스크립트와 jQuery를 혼합).
$("#myformId").submit(function() {
comand="window.document."+$(this).attr('name')+".reset()";
setTimeout("eval(comando)",4000);
})
저는 단지 PHP의 중간자일 뿐이고, JQuery와 같은 새로운 언어에 뛰어들기가 조금 귀찮지만, 다음은 간단하고 우아한 해결책이 아닐까요?
<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />
다른 목적을 가진 두 개의 제출 단추가 없는 이유를 알 수 없습니다.그렇다면 간단하게:
if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }
기본값이 무엇이든 간에 값을 다시 정의하면 됩니다.
제가 상당히 큰 양식(50개 이상의 필드)에서 사용한 방법은 AJAX로 양식을 다시 로드하는 것입니다. 기본적으로 서버에 다시 호출하고 기본값으로 필드를 반환하는 것입니다.이렇게 하면 JS로 각 필드를 파악한 다음 기본값으로 설정하는 것보다 훨씬 쉽습니다.또한 기본값을 서버의 코드와 같은 한 곳에 보관할 수 있습니다.이 사이트에서도 계정 설정에 따라 기본값이 달라 JS로 보낼 걱정이 없었습니다.제가 처리해야 할 유일한 작은 문제는 AJAX 통화 후 초기화가 필요한 몇 가지 제안 필드였지만, 큰 문제는 아니었습니다.
이 모든 대답은 좋지만 가장 쉬운 방법은 가짜 리셋입니다. 링크와 리셋 버튼을 사용하는 것입니다.
실제 리셋 버튼을 숨기기 위해 CSS를 추가하면 됩니다.
input[type=reset] { visibility:hidden; height:0; padding:0;}
그런 다음 다음 링크에 다음과 같이 추가합니다.
<a href="javascript:{}" onclick="reset.click()">Reset form</a>
<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->
이것이 도움이 되길 바랍니다!a.
<script type="text/javascript">
$("#edit_name").val('default value');
$("#edit_url").val('default value');
$("#edit_priority").val('default value');
$("#edit_description").val('default value');
$("#edit_icon_url option:selected").removeAttr("selected");
</script>
여기에 확인란을 새로 고치고 다음을 선택합니다.
$('#frm').find('input:text, input:password, input:file, textarea').val('');
$('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh");
$('#frm').find('select').val('').selectmenu('refresh');
저도 같은 문제를 겪고 있었고 파올로의 직책이 저를 도와주었지만, 한 가지를 조정해야 했습니다.ID가 지정된 고급 색인 검색 양식에는 입력 필드만 포함되어 있으며 세션에서 값을 가져옵니다.어떤 이유에서인지 다음과 같은 것이 저에게 효과가 없었습니다.
$("#advancedindexsearch").find("input:text").val("");
이 후에 경고를 표시하면 값이 올바르게 제거되었지만 나중에 값이 다시 교체된 것으로 확인되었습니다.저는 여전히 어떻게 또는 왜 그런지 모르지만, 다음 대사가 저에게 도움이 되었습니다.
$("#advancedindexsearch").find("input:text").attr("value","");
Paolo의 대답은 데이트 상대를 선택하는 사람들을 설명하지 않습니다. 이것을 다음에 추가하십시오.
$form.find('input[type="date"]').val('');
저는 파올로 베르간티노의 원래 대답을 약간 개선했습니다.
function resetFormInputs(context) {
jQuery(':input', context)
.removeAttr('checked')
.removeAttr('selected')
.not(':button, :submit, :reset, :hidden')
.each(function(){
jQuery(this).val(jQuery(this).prop('defautValue'));
});
}
이런 식으로, 저는 어떤 상황 요소라도 함수에 전달할 수 있습니다.전체 양식 또는 특정 필드 집합만 재설정할 수 있습니다. 예:
resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set
또한 입력의 기본값이 유지됩니다.
새로운 html5 입력 유형에서도 작동하는 제 솔루션은 다음과 같습니다.
/**
* removes all value attributes from input/textarea/select-fields the element with the given css-selector
* @param {string} ele css-selector of the element | #form_5
*/
function clear_form_elements(ele) {
$(ele).find(':input').each(function() {
switch (this.type) {
case 'checkbox':
case 'radio':
this.checked = false;
default:
$(this).val('');
break;
}
});
}
승인된 답변을 보완하기 위해 SELECT2 플러그인을 사용하는 경우 select2 스크립트를 호출하여 모든 select2 필드를 변경해야 합니다.
function resetForm(formId){
$('#'+formId).find('input:text, input:password, input:file, select, select2, textarea').val('');
$('#'+formId).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
$('.select2').select2();
}
"전화" 및 전자 메일과 같은 새로운 입력 유형에 맞게 Paolo의 답변을 약간 업데이트하면 다음 코드 조각에서도 해당 유형을 선택할 수 있습니다.
function resetForm(form) {
form.find('input:text, input[type=email], input[type=tel], input:password, input:file, select, textarea').val('');
form.find('input:radio, input:checkbox')
.removeAttr('checked').removeAttr('selected');
}
언급URL : https://stackoverflow.com/questions/680241/resetting-a-multi-stage-form-with-jquery
'programing' 카테고리의 다른 글
| 메인 스레드에서 작업을 수행하기 위한 GCD (0) | 2023.06.01 |
|---|---|
| 서버가 호스트 "localhost"(::1)에서 실행되고 포트 5432에서 TCP/IP 연결을 허용합니까? (0) | 2023.06.01 |
| VBA 내에서 Excel에서 시트의 데이터를 새로 고치는 중 (0) | 2023.06.01 |
| 루비 - 아직 배열이 아닌 경우 변수를 배열로 우아하게 변환합니다). (0) | 2023.06.01 |
| 아이폰처럼 HTML 텍스트 입력 상자에 클리어 버튼을 넣으려면 어떻게 해야 합니까? (0) | 2023.06.01 |