Есть ли способ очистить поля формы для формы, которая имеет идентификатор?

Question

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

HTML-форма:

<form action="" method="post" id="add">
    <legend>Add Mobile</legend>
    <ol>
        <li>
        <label for="add_name">name</label>
            <input type="text" name="name" id="add_name"></input>
        </li>
        <li>
            <label for="add_model">model</label>
            <input type="text" name="model" id="add_model"></input>
        </li>
        <li>
            <label for="add_color">color</label>
            <input type="text" name="color" id="add_color"></input>
        </li>                               
    </ol>
    <button type="button" onclick="addMobile()">Submit</button>
    <button type="reset">Cancel</button>
</form>

jQuery:

// clear out form fields
$('#add input[name="name"]').val('');
$('#add input[name="model"]').val('');
$('#add input[name="color"]').val('');

Есть лиспособ написать селектор так, чтобы все входные данные типа «текст» в форме с идентификатором «add» были очищены?

9/22/2019 edit: ФормаПоля очищаются с помощью jQuery как часть функции addMobile() в вызове AJAX.Итак, если добавление прошло успешно, часть логики .done должна очистить поля формы.Назначение кнопки «Отмена» - дать пользователю возможность при желании очистить поля.

Answer 1

Если вы добавите класс к входным тегам, которые хотите очистить, это будет довольно просто, как показано ниже.Вы также можете использовать условные случаи для очистки значений внутри форм.

HTML-код:

<form action="" method="post" id="add">
    <legend>Add Mobile</legend>
    <ol>
        <li>
        <label for="add_name">name</label>
            <input type="text" class="clearMe" name="name" id="add_name" value="rarara"/>
        </li>
        <li>
            <label for="add_model">model</label>
            <input type="text" class="clearMe" name="model" id="add_model" value="bababa"/>
        </li>
        <li>
            <label for="add_color">color</label>
            <input type="text" class="clearMe" name="color" id="add_color" value="tataata"/>
        </li>                               
    </ol>
    <button type="button" onclick="addMobile()">Submit</button>
    <button type="reset">Cancel</button>
</form>

Jquery:

$('.clearMe').val('');

jsfiddle .

Answer 2

Я закончил тем, что использовал это: $('#add').trigger('reset');

См. Эту ссылку , в частности ответ @ user768680 от 17 марта 13 года в 18: 45.

Answer 3

Удалить атрибут type = "reset".Поскольку этот атрибут предотвращает вас.

Этот метод назначает желаемое значение всем текстовым полям в указанной вами форме.

<form action="" method="post" id="add">
    <legend>Add Mobile</legend>
    <ol>
        <li>
        <label for="add_name">name</label>
            <input type="text" name="name" id="add_name"></input>
        </li>
        <li>
            <label for="add_model">model</label>
            <input type="text" name="model" id="add_model"></input>
        </li>
        <li>
            <label for="add_color">color</label>
            <input type="text" name="color" id="add_color"></input>
        </li>                               
    </ol>
    <button type="button" onclick="addMobile()">Submit</button>
    <button onClick="ClearTextInputs('add')">Cancel</button>
</form>

<script>
function ClearTextInputs(formId){
    //$("#"+formId+" input:text").val("You Value"); //New Value
      $("#"+formId+" input:text").val(""); //Remove value
    }
</script>