Jquery erhält Formularfeldwert

74

Ich verwende eine JQuery-Vorlage, um dynamisch mehrere Elemente auf derselben Seite zu generieren. Jedes Element sieht so aus

<div id ="DynamicValueAssignedHere">
    <div class="something">Hello world</div>
    <div class="formdiv">
        <form name="inpForm">
            <input type="text" name="FirstName" />
            <input type="submit" value="Submit" />
        </form>
    </div>
</div>

Ich möchte Jquery verwenden, um das Formular beim Absenden zu verarbeiten. Ich möchte auch die Formularwerte auf ihre vorherigen Werte zurücksetzen, falls etwas schief gehen sollte. Meine Frage ist: Wie kann ich mit Jquery den Wert des Eingabefelds ermitteln? Zum Beispiel kann ich den Wert des div mit der Klasse "etwas" erhalten, indem ich es tue

var something = $(#DynamicValueAssignedHere).children(".something").html();

In ähnlicher Weise möchte ich den Wert des Textfelds abrufen können. Im Moment habe ich es versucht

var text = $(#DynamicValueAssignedHere).children(".formdiv").findnext('input[name="FirstName"]').val();

aber es scheint nicht zu funktionieren

javascript jquery João Pimentel Ferreira
quelle
3
Ausnahmsweise könnte einfaches Javascript einfacher sein: $('input')[0].form.FirstName.valueZugriff auf den Wert des Feldes
cnlevy

Antworten:

139

Sie müssen verwenden value attribute, um seinen Wert zu erhalten

<input type="text" name="FirstName" value="First Name" />

Versuchen - 

var text = $('#DynamicValueAssignedHere').find('input[name="FirstName"]').val();
Dipak
quelle
7
@curiouspanda: Nur ein Tipp. Wenn die "Name" -Werte eindeutig sind, müssen Sie $ ('# DynamicValueAssignedHere') nicht verwenden. Gehen Sie einfach direkt mit $ ('input [name = "FirstName"]'). Val (). Ich bevorzuge immer noch die Verwendung von IDs, um mit Komponenten umzugehen.
Davidbuzatto
3
@davidbuzatto - Namenswerte sind nicht eindeutig. Nur die ID für das äußerste Div ist eindeutig. Dipaks Lösung funktionierte jedoch.
Hier sind einige Informationen und eine Geige dipaksblogonline.blogspot.in/2018/05/…
Dipak
51

Es kann viel einfacher sein als das, was Sie tun.

HTML:

<input id="myField" type="text" name="email"/>

JavaScript:

// getting the value
var email = $("#myField").val();

// setting the value
$("#myField").val( "new value here" );
Davidbuzatto
quelle
Ich kann keine ID für das Feld verwenden, da meine Seite mehrere Formulare mit denselben Elementen enthalten kann (ich verwende JQuery-Repeater-Vorlagen)
@curiouspanda: Ok, also kannst du das mit Dipaks Ansatz machen. Selbst wenn Sie die Repeater-Vorlagen verwenden, können Sie mit eindeutigen IDs arbeiten und möglicherweise ein Präfix für jede Feldsatz-Komponenten-ID festlegen.
Davidbuzatto
@curiouspanda haben dynamische IDs etwas gemeinsam?
undefiniert
Das sollte die Antwort sein. viel sauberer.
Laycat
Wie wäre es, wenn ich den Wert von einem Formular auf einer anderen Seite erhalten sollte?
Lina
10

Ein alternativer Ansatz, ohne nach dem Feld HTML zu suchen:

var $form = $('#' + DynamicValueAssignedHere).find('form');
var formData = $form.serializeArray();
var myFieldName = 'FirstName';
var myFieldFilter = function (field) {
  return field.name == myFieldName;
}
var value = formData.filter(myFieldFilter)[0].value;
Lucas Moeskops
quelle
2 

$("form").submit(function(event) {
    
      var firstfield_value  = event.currentTarget[0].value;
     
      var secondfield_value = event.currentTarget[1].value; 
     
      alert(firstfield_value);
      alert(secondfield_value);
      event.preventDefault(); 
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" >
<input type="text" name="field1" value="value1">
<input type="text" name="field2" value="value2">
</form>
Erweitern Sie das Snippet

Milan Krushna
quelle
1
Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich dabei, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage in Zukunft für Leser beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen. Bitte versuchen Sie auch, Ihren Code nicht mit erklärenden Kommentaren zu überfüllen, da dies die Lesbarkeit sowohl des Codes als auch der Erklärungen beeinträchtigt!
Auf Wiedersehen StackExchange
1

Wenn Sie die ID der Eingänge kennen, müssen Sie nur diese verwenden:

var value = $("#inputID").val();
Severiano
quelle
1 
var textValue = $("input[type=text]").val()

Dadurch werden alle Werte aller Textfelder abgerufen. Sie können Methoden wie Kinder, Erstkinder usw. verwenden, um sie zu verbessern. Wie bei Formular $ ('form [name = form1] input [type = text]') Einfachere Verwendung von IDs für das Targeting von Elementen, aber wenn es rein dynamisch ist, können Sie alle erhalten Eingabewerte durchlaufen dann mit JS.

Alex Reynolds
quelle
0

Sie können diese Zeilen ausprobieren:

$("#DynamicValueAssignedHere .formdiv form").contents().find("input[name='FirstName']").prevObject[1].value
user3563774
quelle
0

Sie können jeden Eingabefeldwert von erhalten $('input[fieldAttribute=value]').val()

Hier ist ein Beispiel

displayValue = () => {

  // you can get the value by name attribute like this
  
  console.log('value of firstname : ' + $('input[name=firstName]').val());
  
  // if there is the id as lastname
  
  console.log('value of lastname by id : ' + $('#lastName').val());
  
  // get value of carType from placeholder  
  console.log('value of carType from placeholder ' + $('input[placeholder=carType]').val());

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="formdiv">
    <form name="inpForm">
        <input type="text" name="firstName" placeholder='first name'/>
        <input type="text" name="lastName" id='lastName' placeholder='last name'/>
        
        <input type="text" placeholder="carType" />
        <input type="button" value="display value" onclick='displayValue()'/>
        
    </form>
</div>
Erweitern Sie das Snippet

NuOne
quelle