Есть ли простой способ (без перечисления их отдельно) в jquery для выбора всех элементов формы и только элементов формы.
Я не могу использовать children() и т.д., потому что форма содержит другой HTML.
например:
$("form").each(function(){
$(this, "input, textarea, select");
});
Изменить: Как указано в комментариях (Марио Авад и Брок Хенсли), используйте .find, чтобы получить детей
$("form").each(function(){
$(this).find(':input') //<-- Should return all input elements in that specific form.
});
также имеют коллекцию элементов, иногда это отличается от детей, например, когда тег формы находится в таблице и не закрыт.
var summary = [];
$('form').each(function () {
summary.push('Form ' + this.id + ' has ' + $(this).find(':input').length + ' child(ren).');
summary.push('Form ' + this.id + ' has ' + this.elements.length + ' form element(s).');
});
$('#results').html(summary.join('<br />'));<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="A" style="display: none;">
<input type="text" />
<button>Submit</button>
</form>
<form id="B" style="display: none;">
<select><option>A</option></select>
<button>Submit</button>
</form>
<table bgcolor="white" cellpadding="12" border="1" style="display: none;">
<tr><td colspan="2"><center><h1><i><b>Login
Area</b></i></h1></center></td></tr>
<tr><td><h1><i><b>UserID:</b></i></h1></td><td><form id="login" name="login" method="post"><input
name="id" type="text"></td></tr>
<tr><td><h1><i><b>Password:</b></i></h1></td><td><input name="pass"
type="password"></td></tr>
<tr><td><center><input type="button" value="Login"
onClick="pasuser(this.form)"></center></td><td><center><br /><input
type="Reset"></form></td></tr></table></center>
<div id="results"></div>Следующий код помогает получить детали элементов из конкретной формы с идентификатором формы,
$('#formId input, #formId select').each(
function(index){
var input = $(this);
alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
}
);
Следующий код помогает получить детали элементов из всех форм, которые находятся на странице загрузки,
$('form input, form select').each(
function(index){
var input = $(this);
alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
}
);
Нижеприведенный код помогает получить детали элементов, которые находятся на странице загрузки, даже если элемент не находится внутри тега,
$('input, select').each(
function(index){
var input = $(this);
alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
}
);
ПРИМЕЧАНИЕ.. Мы добавляем больше тегов тегов элементов, которые нам нужны в списке объектов, как показано ниже,
Example: to get name of attribute "textarea",
$('input, select, textarea').each(
function(index){
var input = $(this);
alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
}
);
Если у вас есть дополнительные типы, отредактируйте селектор:
var formElements = new Array();
$("form :input").each(function(){
formElements.push($(this));
});
Все элементы формы теперь находятся в массиве formElements.
Для записи. Следующий фрагмент может помочь вам получить информацию о тегах ввода, текстовой области, выбрать, кнопку, через заголовок temp при наведении на них.
$( 'body' ).on( 'mouseover', 'input, textarea, select, button, a', function() {
var $tag = $( this );
var $form = $tag.closest( 'form' );
var title = this.title;
var id = this.id;
var name = this.name;
var value = this.value;
var type = this.type;
var cls = this.className;
var tagName = this.tagName;
var options = [];
var hidden = [];
var formDetails = '';
if ( $form.length ) {
$form.find( ':input[type="hidden"]' ).each( function( index, el ) {
hidden.push( "\t" + el.name + ' = ' + el.value );
} );
var formName = $form.prop( 'name' );
var formTitle = $form.prop( 'title' );
var formId = $form.prop( 'id' );
var formClass = $form.prop( 'class' );
formDetails +=
"\n\nFORM NAME: " + formName +
"\nFORM TITLE: " + formTitle +
"\nFORM ID: " + formId +
"\nFORM CLASS: " + formClass +
"\nFORM HIDDEN INPUT:\n" + hidden.join( "\n" );
}
var tempTitle =
"TAG: " + tagName +
"\nTITLE: " + title +
"\nID: " + id +
"\nCLASS: " + cls;
if ( 'SELECT' === tagName ) {
$tag.find( 'option' ).each( function( index, el ) {
options.push( el.value );
} );
tempTitle +=
"\nNAME: " + name +
"\nVALUE: " + value +
"\nTYPE: " + type +
"\nSELECT OPTIONS:\n\t" + options;
} else if ( 'A' === tagName ) {
tempTitle +=
"\nHTML: " + $tag.html();
} else {
tempTitle +=
"\nNAME: " + name +
"\nVALUE: " + value +
"\nTYPE: " + type;
}
tempTitle += formDetails;
$tag.prop( 'title', tempTitle );
$tag.on( 'mouseout', function() {
$tag.prop( 'title', title );
} )
} );
jQuery сохраняет ссылку на элемент формы JS vanilla, и это содержит ссылку на все дочерние элементы формы. Вы можете просто взять ссылку и продолжить:
var someForm = $('#SomeForm');
$.each(someForm[0].elements, function(index, elem){
//Do something here.
});
var $form_elements = $("#form_id").find(":input");
Все элементы, включая кнопку отправки, теперь находятся в переменной $form_elements.
Просто добавьте другой способ:
$('form[name=' + formName + ']').find(':input')
Это моя любимая функция, и она работает для меня как шарм!
Он возвращает объект со всеми для ввода, выбора и данных textarea.
И он пытается получить имя объекта путем поиска элементов name else Id else class.
var All_Data = Get_All_Forms_Data();
console.log(All_Data);
/ / -------------------------------------------
function Get_All_Forms_Data(Element)
{
Element = Element || '';
var All_Page_Data = {};
var All_Forms_Data_Temp = {};
if(Element != '')
{
$(Element).find('input,select,textarea').each(function(i){
All_Forms_Data_Temp[i] = $(this);
});
}
else
{
$('input,select,textarea').each(function(i){
All_Forms_Data_Temp[i] = $(this);
});
}
$.each(All_Forms_Data_Temp,function(){
var input = $(this);
var Element_Name;
var Element_Value;
if((input.attr('type') == 'submit') || (input.attr('type') == 'button'))
{
return true;
}
if((input.attr('name') !== undefined) && (input.attr('name') != ''))
{
Element_Name = input.attr('name').trim();
}
else if((input.attr('id') !== undefined) && (input.attr('id') != ''))
{
Element_Name = input.attr('id').trim();
}
else if((input.attr('class') !== undefined) && (input.attr('class') != ''))
{
Element_Name = input.attr('class').trim();
}
if(input.val() !== undefined)
{
if((input.attr('type') == 'radio') || (input.attr('type') == 'checkbox'))
{
Element_Value = jQuery('input[name="'+Element_Name+'"]:checked').val();
}
else
{
Element_Value = input.val();
}
}
else if(input.text() != undefined)
{
Element_Value = input.text();
}
if(Element_Value === undefined)
{
Element_Value = '';
}
if(Element_Name !== undefined)
{
var Element_Array = new Array();
if(Element_Name.indexOf(' ') !== -1)
{
Element_Array = Element_Name.split(/(\s+)/);
}
else
{
Element_Array.push(Element_Name);
}
$.each(Element_Array,function(index, Name)
{
Name = Name.trim();
if(Name != '')
{
All_Page_Data[Name] = Element_Value;
}
});
}
});
return All_Page_Data;
}
Функция JQuery serialize function позволяет легко получить все элементы формы.
Демо: http://jsfiddle.net/55xnJ/2/
$("form").serialize(); //get all form elements at once
//result would be like this:
single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
Попробуйте что-то вроде этого:
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { s: term } );
// Put the results in a div
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
});
</script>
Обратите внимание на использование ввода []
все входы:
var inputs = $("#formId :input");
все кнопки
var button = $("#formId :button")
Попробуйте эту функцию
function fieldsValidations(element) {
var isFilled = true;
var fields = $("#"+element)
.find("select, textarea, input").serializeArray();
$.each(fields, function(i, field) {
if (!field.value){
isFilled = false;
return false;
}
});
return isFilled;
}
И используйте его как
$("#submit").click(function () {
if(fieldsValidations('initiate')){
$("#submit").html("<i class=\"fas fa-circle-notch fa-spin\"></i>");
}
});
Наслаждайтесь :)