2013-05-29 9 views
6

Czy jest możliwe pobranie html formularza ze zaktualizowanymi atrybutami wartości za pomocą funkcji .html()?Jak uzyskać formularz html() za pośrednictwem jQuery zawierający zaktualizowane atrybuty wartości?

The (uproszczony) HTML:

<form> 
    <input type="radio" name="some_radio" value="1" checked="checked"> 
    <input type="radio" name="some_radio" value="2"><br><br> 
    <input type="text" name="some_input" value="Default Value"> 
</form><br> 
<a href="#">Click me</a> 

JQuery:

$(document).ready(function() 
{ 
    $('a').on('click', function() { 
     alert($('form').html()); 
    }); 
}); 

Oto przykład tego, co próbuję zrobić: http://jsfiddle.net/brLgC/2/

Po zmianie wartości wejście i naciśnięcie "kliknij mnie" nadal zwraca kod HTML z wartościami domyślnymi.

Jak mogę po prostu uzyskać zaktualizowany HTML przez jQuery?

+0

Nie sądzę, ponieważ wartości nigdy nie są ustawiane za pomocą JS, są one zwracane jako takie, które są zakodowane jako. Zawsze możesz użyć '.serialize()' – tymeJV

+0

, ponieważ ostrzegasz rzeczywisty kod HTML ... to, co wpisujesz, nie jest dodawane do kodu HTML budującego stronę. prawdopodobnie będziesz musiał zrobić pętlę przez każdy element, zdobyć html i wartość, i połączyć go. – PlantTheIdea

Odpowiedz

6

Jeśli naprawdę musi mieć HTML, trzeba rzeczywiście zaktualizować „wartość” przypisywać ręcznie: http://jsfiddle.net/brLgC/4/

$(document).ready(function() 
{ 
    $('a').on('click', function() { 
     $("input,select,textarea").each(function() { 
      if($(this).is("[type='checkbox']") || $(this).is("[type='checkbox']")) { 
      $(this).attr("checked", $(this).attr("checked")); 
      } 
      else { 
       $(this).attr("value", $(this).val()); 
      } 
     }); 
     alert($('form').html()); 
    }); 
}); 
+0

Domyślam się, że to jedyne rozwiązanie wtedy ... jednak myślę, że to trochę trudniejsze z przyciskami radiowymi i polami wyboru ... – santacruz

+0

Zaktualizowane rozwiązanie dla radia i pola wyboru. Ta sama zasada, z wyjątkiem użycia sprawdzonego atrybutu zamiast wartości. Pewnie, że jest brudny, ale zwykle nazywa się .html(). – CodingIntrigue

+0

Po prostu zaktualizowałem skrzypce, aby działało ... http://jsfiddle.net/brLgC/5/ – santacruz

5

odpowiedź RGraham nie pracował dla mnie, więc modyfikować go:

$("input, select, textarea").each(function() { 
    var $this = $(this); 

    if ($this.is("[type='radio']") || $this.is("[type='checkbox']")) { 
     if ($this.prop("checked")) { 
      $this.attr("checked", "checked"); 
     } 
    } else { 
     if ($this.is("select")) { 
      $this.find(":selected").attr("selected", "selected"); 
     } else { 
      $this.attr("value", $this.val()); 
     } 
    } 
}); 
+0

znakomity - to odpowiednio obsługuje pola nietekstowe – Tahbaza

0

Prace Lachlana są "prawie" doskonałe. Problem polega na tym, że formularz zostaje zapisany, a następnie przywrócony, a następnie ponownie zapisany w radiu, a pola wyboru nie odznaczają i zamiast tego po prostu kontynuują składanie. Prosta poprawka poniżej.

Powiązane problemy