Как сбросить тело формы в модальном окне начальной загрузки?

Вопрос и ответы заставили меня придумать это решение: Типная карта объекта . Вот код. Тестовый пример:

import static org.junit.Assert.*;

import java.util.ArrayList;
import java.util.List;

import org.junit.Test;


public class TypedMapTest {
    private final static TypedMapKey KEY1 = new TypedMapKey( "key1" );
    private final static TypedMapKey> KEY2 = new TypedMapKey>( "key2" );

    @Test
    public void testGet() throws Exception {

        TypedMap map = new TypedMap();
        map.set( KEY1, null );
        assertNull( map.get( KEY1 ) );

        String expected = "Hallo";
        map.set( KEY1, expected );
        String value = map.get( KEY1 );
        assertEquals( expected, value );

        map.set( KEY2, null );
        assertNull( map.get( KEY2 ) );

        List list = new ArrayList ();
        map.set( KEY2, list );
        List valueList = map.get( KEY2 );
        assertEquals( list, valueList );
    }
}

Класс ключа:

public class TypedMapKey {
    private String key;

    public TypedMapKey( String key ) {
        this.key = key;
    }

    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + ( ( key == null ) ? 0 : key.hashCode() );
        return result;
    }

    @Override
    public boolean equals( Object obj ) {
        if( this == obj ) {
            return true;
        }
        if( obj == null ) {
            return false;
        }
        if( getClass() != obj.getClass() ) {
            return false;
        }
        TypedMapKey other = (TypedMapKey) obj;
        if( key == null ) {
            if( other.key != null ) {
                return false;
            }
        } else if( !key.equals( other.key ) ) {
            return false;
        }
        return true;
    }

    @Override
    public String toString() {
        return key;
    }
}

TypedMap.java:

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;

public class TypedMap implements Map {
    private Map delegate;

    public TypedMap( Map delegate ) {
        this.delegate = delegate;
    }

    public TypedMap() {
        this.delegate = new HashMap();
    }

    @SuppressWarnings( "unchecked" )
    public  T get( TypedMapKey key ) {
        return (T) delegate.get( key );
    }

    @SuppressWarnings( "unchecked" )
    public  T remove( TypedMapKey key ) {
        return (T) delegate.remove( key );
    }

    public  void set( TypedMapKey key, T value ) {
        delegate.put( key, value );
    }

    // --- Only calls to delegates below

    public void clear() {
        delegate.clear();
    }

    public boolean containsKey( Object key ) {
        return delegate.containsKey( key );
    }

    public boolean containsValue( Object value ) {
        return delegate.containsValue( value );
    }

    public Set> entrySet() {
        return delegate.entrySet();
    }

    public boolean equals( Object o ) {
        return delegate.equals( o );
    }

    public Object get( Object key ) {
        return delegate.get( key );
    }

    public int hashCode() {
        return delegate.hashCode();
    }

    public boolean isEmpty() {
        return delegate.isEmpty();
    }

    public Set keySet() {
        return delegate.keySet();
    }

    public Object put( Object key, Object value ) {
        return delegate.put( key, value );
    }

    public void putAll( Map m ) {
        delegate.putAll( m );
    }

    public Object remove( Object key ) {
        return delegate.remove( key );
    }

    public int size() {
        return delegate.size();
    }

    public Collection values() {
        return delegate.values();
    }

}

23
задан ASPiRE 9 November 2018 в 06:49
поделиться

9 ответов

В Bootstrap 3 вы можете сбросить форму после закрытия модального окна следующим образом:

$('.modal').on('hidden.bs.modal', function(){
    $(this).find('form')[0].reset();
});
78
ответ дан bart 9 November 2018 в 06:49
поделиться

Я пошел с немного измененной версией ответа @ shibbir:

// Clear form fields in a designated area of a page
$.clearFormFields = function(area) {
  $(area).find('input[type="text"],input[type="email"],textarea,select').val('');
};

Вызывается так:

$('#my-modal').on('hidden', function(){
  $.clearFormFields(this)
});
7
ответ дан Mark Berry 9 November 2018 в 06:49
поделиться

Просто найди свою форму и очисти, прежде чем она откроется!

    $modal = $('#modal');
    $modal.find('form')[0].reset();
0
ответ дан user3127109 9 November 2018 в 06:49
поделиться

Просто установите пустые значения для полей ввода, когда модальное скрывается.

$('#Modal_Id').on('hidden', function () {
   $('#Form_Id').find('input[type="text"]').val('');
});
0
ответ дан Gayashan Perera 9 November 2018 в 06:49
поделиться

Вы можете сделать функцию JavaScript, чтобы сделать это:

$.clearInput = function () {
        $('form').find('input[type=text], input[type=password], input[type=number], input[type=email], textarea').val('');
};

, а затем вы можете вызывать эту функцию каждый раз, когда ваш модал скрыт:

$('#Your_Modal').on('hidden', function () {
        $.clearInput();
});
15
ответ дан Nate 9 November 2018 в 06:49
поделиться

Ответ Марка Берри работал отлично здесь. Я просто добавляю, чтобы разделить предыдущий код:

$.clearFormFields = function(area) {
  $(area).find('input[type="text"],input[type="email"],textarea,select').val('');
};

на:

$.clearFormFields = function(area) {
                $(area).find('input#name').val('');
                $(area).find('input#phone').val("");
                $(area).find('input#email').val("");
                $(area).find('select#topic').val("");
                $(area).find('textarea#description').val("");
            };
1
ответ дан Leye Odumuyiwa 9 November 2018 в 06:49
поделиться

Если вы используете ajax для загрузки модального тела таким способом и хотите иметь возможность перезагрузить его содержимое

<a data-toggle="modal" data-target="#myModal" href="./add">Add</a>
<a data-toggle="modal" data-target="#myModal" href="./edit/id">Modify</a>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Content will be loaded here -->
        </div>
    </div>
</div>

используйте

<script>
    $(function() {
        $('.modal').on('hidden.bs.modal', function(){
            $(this).removeData('bs.modal');
        });
    });
</script>
3
ответ дан TachikomaGT 9 November 2018 в 06:49
поделиться

Приведенное ниже решение решило мою проблему, а также сохранило значения по умолчанию

$('body').on('hidden.bs.modal', '.modal', function () { 
  $(this).find('input[type="text"],input[type="email"],textarea,select').each(function() { 
    if (this.defaultValue != '' || this.value != this.defaultValue) {
         this.value = this.defaultValue; 
    } else { this.value = ''; }
  }); 
}); 
-1
ответ дан Adrian Iorgu 9 November 2018 в 06:49
поделиться

Это отклонение от необходимости сбрасывать тело до исходного содержимого. Это не касается формы, но я чувствую, что она может быть полезна. Если исходный контент содержал тонну html, очень трудно выстроить html и сохранить его в переменной. Javascript не переносит разрывы строк, которые допускает VS 2015 / что угодно. Поэтому я сохраняю оригинальную тонну html в модальном по умолчанию, например, при загрузке страницы:

var stylesString = $('#DefaultModal .modal-body').html();

, что позволяет мне повторно использовать этот контент, когда нажата оригинальная кнопка по умолчанию для модального режима (есть другие кнопки, которые показывают другое содержимое в том же виде). ​​

$("#btnStyles").click(function () {
    //pass the data in the modal body adding html elements
    $('#DefaultModal .modal-body').html(stylesString);
 $('#DefaultModal').modal('show');
})

Если бы я поместил предупреждение для переменной styleString, она бы содержала бесконечную строку всех html без разрывов, но делала это для меня и не пускала в редактор VS.

Вот как это выглядит в Visual Studio внутри модального по умолчанию. Сохраненный в строковой переменной, будь то автоматический (.html) или вручную в VS, это будет одна большая строка:

<div class="modal-body" id="modalbody">


    <div class="whatdays"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">All Styles</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/ballroom.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Ballroom</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/blues.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Blues</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/contra.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Contra</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/countrywestern.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Country</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/english-country.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">English Country</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/israeli.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Israeli</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/lindyhop.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Lindy Hop/Swing</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/miscvariety.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Misch/Variety</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/neo-square.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Neo-Square</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/polka.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Polka</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/salsa.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Salsa</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/scottish.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Scottish</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/square.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Square</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/tango.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Tango</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/waltz.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Waltz</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/wcswing.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">WCS</span></div>
    <div class="whatdays" style="background-image: url('../../Responsive/zyedeco-gator.jpg');background-size: 100% 100%;"><span style="background-color:black;color:white;padding:4px 4px 4px 4px;border:2px solid yellow;">Zydeco/Cajun</span></div>
0
ответ дан JustJohn 9 November 2018 в 06:49
поделиться
Другие вопросы по тегам:

Похожие вопросы: