JQuery $ (это) .find (Селектор), возвращающиеся это

У меня есть форма, определенная как этот

<form name="NewForm"> 
    <td hidden>New</td> 
    <td><input name="name" type="text"></td> 
    <td><input name="url" type="url"></td> 
    <td><input type="submit" value="New"></td> 
    <td><input type="reset" value="Cancel"></td> 
</form>

по представить я называю

function submitForm(event,data) 
{ 
    console.log($(this)); 


    var valid = true; 
    var changed = false 

    var input = $(this).find("input[name='name']"); 

    console.log("Name"); 
    console.log(input); 
    console.log(input.val()); 
    console.log(input.prop('defaultValue')); 
}

консоль затем сообщает

Object { 0: <form>, context: <form>, length: 1 } 
Name 
Object { length: 0, prevObject: Object, context: <form>, selector: "input[name='name']" } 
undefined 
undefined

Почему я не выбираю первый вход в форме под названием name?

EDIT: Весь код файла

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
</head> 

<body> 
    <div> 
     <select id="SystemActive"> 
      <option value="Y">Active</option> 
      <option value="N">Deleted</option> 
     </select> 
     <button id="SystemRefresh">Refresh</button><br> 
     <table id="SystemTable" class="resultsGrid"> 
      <thead> 
       <tr> 
        <th hidden>ID</th> 
        <th>Name</th> 
        <th>URL</th> 
       </tr> 
       <tr > 
        <form name="NewForm"> 
         <td hidden>New</td> 
         <td><input name="name" type="text"></input></td> 
         <td><input name="url" type="url"></input></td> 
         <td><input type="submit" value="New"></input></td> 
         <td><input type="reset" value="Cancel"></input></td> 
        </form> 
       </tr> 
      </thead> 
     </table> 
    </div> 
    <script> 
     $(function() { 
      $("form").submit(submitForm) 
     }); 

     function submitForm(event,data) 
     { 
      console.log($(event.target)); 


      var valid = true; 
      var changed = false 

      var input = $(this).find("input[name=name]"); 
      console.log("Name"); 
      console.log(input); 
      console.log($(input).val()); 
      input = $(this).find("input[name='name']"); 
      console.log("Name2"); 
      console.log(input); 
      console.log($(input).val()); 
      input = $(this).find("input[name='name']"); 
      console.log("Name3"); 
      console.log(input.attr('name')); 

      event.preventDefault(); 
      return false; 
     } 

    </script> 

</html>

источник

2017-02-06 MikeT

Поскольку 'вход [имя = 'Name'] 'не является такой же, как' вход [имя = 'имя'] ' – Adam

пытался как форму и селектор в верхнем и нижнем регистре, не имеет значения к результату – MikeT

чувствительность к регистру делает разницу. Единственная причина, по которой вы используете код, не будет работать, потому что «это» не та форма, которую вы считаете. Как вызывается 'submitForm'? – Adam

Проблема в том, что form не является допустимым дочерним элементом tr тега. Только td или th может быть дочерним элементом тега tr. Браузер пытается восстановить ваш сломанный HTML и делает это неправильно (в отношении того, что вы изначально планировали), поэтому код работает не так, как ожидалось.

Либо переместить форму тег вне table элемента, или гнездо его внутри td

Просто щелкните правой кнопкой мыши и inspect ваш отправить элемент, и вы увидите, что браузер отремонтировали ваш form тег быть элементом без детей.

источник

2017-02-06 18:52:21 Adam

Хорошо поймать @Adam. –

Вы действительно выбрать первый входной элемент с именем «имя» с заявлением var input = $(this).find("input[name='name']");. Он работает так, как ожидалось. См. Ниже, где я могу выбрать первый элемент ввода с именем «имя» и распечатать его атрибуты.

$('[name="NewForm"]').submit(function(event) { 
 
    var input = $(this).find("input[name='name']"); 
 
    console.log(input.attr('name')); 
 
    event.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="NewForm"> 
 
    <td hidden>New</td> 
 
    <td><input name="name" type="text"></td> 
 
    <td><input name="url" type="url"></td> 
 
    <td><input type="submit" value="New"></td> 
 
    <td><input type="reset" value="Cancel"></td> 
 
</form>

источник

2017-02-06 17:50:15 VHS

Чтобы дать OP рабочий фрагмент. Как иначе я бы показал рабочую демонстрацию. – VHS

Не используйте 'onclick' для привязки обработчика отправки к форме - используйте событие' submit'. И если вы используете событие 'submit', вы можете получить доступ к этому элементу' form' (который OP уже продемонстрировал). – Adam

@ Адам, извините, я не обратил на это внимания раньше. Я обновил свой ответ. – VHS

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

 <form name="NewForm"> 
     <table id="SystemTable" class="resultsGrid"> 
      <thead> 
       <tr> 
        <th hidden>ID</th> 
        <th>Name</th> 
        <th>URL</th> 
       </tr> 
       <tr > 

         <td hidden>New</td> 
         <td><input name="name" type="text" /></td> 
         <td><input name="url" type="url" /></td> 
         <td><input type="submit" value="New" /></td> 
         <td><input type="reset" value="Cancel" /></td> 

       </tr> 
      </thead> 
      </table> 
     </form>

источник

2017-02-06 18:48:35

Опоры сэр, ты показал путь. –

и последним отверстием , который имеет дополнительное пространство, он должен быть –

На самом деле это разметка. Вы помещаете form внутри tr. Переместите form перед table и закройте его после, и код должен работать нормально.

Обновленный код, который работает на этом JSFiddle: https://jsfiddle.net/xq940hf1/

источник

2017-02-06 18:52:23

вы можете объяснить, почему это проблема? – MikeT

@MikeT см. Http://stackoverflow.com/questions/12634715/which-dom-elements-can-be-child-of-tr. Браузеры, как правило, делают все возможное, чтобы помочь, но часто они не достигают того, на что можно надеяться. –

JQuery $ (это) .find (Селектор), возвращающиеся это

ответ

Смежные вопросы