Select-box mit "Andere" option zur Anzeige der input-text-Feld. Wie man Wert für die formularübergabe mit jquery?

Ich habe ein Formular mit der folgenden select-box:

<fieldset id="workers_comp_info">
  <p>
    <label for="i_n_r_reason">Reason why Workers Comp Insurance is not required:</label>
    <select name="i_n_r_reason" id="i_n_r_reason">
      <option value="No employees">No employees</option>
      <option value="1-2 employees">1-2 employees</option>
      <option value="Other">Other(Specify reason)</option>
    </select>
    <input id="other_reason" name="other_reason" type="text" placeholder="Other Reason" />
  </p>
</fieldset>

Ich geschrieben habe die folgende jquery-code zu verstecken, der "other_reason" Textfeld, wenn "Andere" ausgewählt wird, in der select-box.

$('#i_n_r_reason').change(function() {
  $('#other_reason').toggle($(this).val()=='Other');
}).change();

Erstelle ich ein jquery-Methode genannt SubmitForm. Ich will etwas schreiben wie dieses:

function SubmitForm() {
  if ($('#i_n_r_reason').val()=='Other')
    ('#i_n_r_reason').val = ('#other_reason').val
  ('#account_form').submit();
}

Wenn der Benutzer wählt 'Andere', das Textfeld wird angezeigt, für Sie geben Sie einen Grund. Ich möchte diesem Grund überschreiben "Andere", wenn der Benutzer das Formular sendet. Aber es ist nicht passiert mit diesem code. Irgendwelche Vorschläge?

InformationsquelleAutor user338413 | 2010-09-15

xar Antwort hat einige süße Funktionalität, aber es nicht erreichen, das ursprüngliche Ziel, und ersetzen Sie den Wert von #i_n_r_reason mit dem Wert #other_reason, wenn "Andere" ausgewählt ist. Ich legte Sie alle zusammen unten.

<html>
<head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.4.4");
    </script>
    <script type="text/javascript">
        $(function(){
            //initially hide the textbox
            $("#other_reason").hide();
            $('#i_n_r_reason').change(function() {
              if($(this).find('option:selected').val() == "Other"){
                $("#other_reason").show();
              }else{
                $("#other_reason").hide();
              }
            });
            $("#other_reason").keyup(function(ev){
                var othersOption = $('#i_n_r_reason').find('option:selected');
                if(othersOption.val() == "Other")
                {
                    ev.preventDefault();
                    //change the selected drop down text
                    $(othersOption).html($("#other_reason").val()); 
                } 
            });
            $('#form_id').submit(function() {
                var othersOption = $('#i_n_r_reason').find('option:selected');
                if(othersOption.val() == "Other")
                {
                    //replace select value with text field value
                    othersOption.val($("#other_reason").val());
                }
            });
        });
    </script>
</head>
<body>
<form action="http://www.perfectweb.com/resources/post.php" id="form_id" method="post">
    <fieldset id="workers_comp_info">
      <p>
        <label for="i_n_r_reason">Reason why Workers Comp Insurance is not required:</label>
        <select name="i_n_r_reason" id="i_n_r_reason">
          <option value="No employees">No employees</option>
          <option value="1-2 employees">1-2 employees</option>
          <option value="Other">Other(Specify reason)</option>
        </select>
        <input id="other_reason" name="other_reason" type="text" placeholder="Other Reason" />
      </p>
    </fieldset>
    <input id="form_submit" type="submit" value="submit" />
</form>
</body>
</html>

InformationsquelleAutor perfectweb

<html>
<head>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            //initially hide the textbox
            $("#other_reason").hide();
            $('#i_n_r_reason').change(function() {
              if($(this).find('option:selected').val() == "Other"){
                $("#other_reason").show();
              }else{
                $("#other_reason").hide();
              }
            });
            $("#other_reason").keyup(function(ev){
                  var othersOption = $('#i_n_r_reason').find('option:selected');
                  if(othersOption.val() == "Other"){
                    ev.preventDefault();
                    //change the selected drop down text
                    $(othersOption).html($("#other_reason").val()); 


                  } 
            });
        });
    </script>
</head>
<body>
    <fieldset id="workers_comp_info">
      <p>
        <label for="i_n_r_reason">Reason why Workers Comp Insurance is not required:</label>
        <select name="i_n_r_reason" id="i_n_r_reason">
          <option value="No employees">No employees</option>
          <option value="1-2 employees">1-2 employees</option>
          <option value="Other">Other(Specify reason)</option>
        </select>
        <input id="other_reason" name="other_reason" type="text" placeholder="Other Reason" />
      </p>
    </fieldset>
</body>
</html>

Also im Grunde, was es tut, ist :

Wenn das dropdown verändert, den Wert bewerten. Wenn es "die Anderen", dann zeigen Sie das Textfeld, und anderes ausblenden.

Für den zweiten Teil, nach dem Absenden des Formulars, bewerten Sie den Wert der ausgewählten drop-down. Wenn es "Andere", dann verhindern Sie das Formular Absenden, stattdessen ändern Sie den text der ausgewählten drop-down-Liste den Wert aus dem Textfeld.

Ich denke, der code ist ziemlich erklärbar. Hoffe, das hilft.

BEARBEITET

Vielen Dank, das zeigen und verstecken, nicht wirklich zu verbergen scheinen die box. Die option ich bin mit mit dem toggle() funktioniert jedoch. Und es scheint nicht, dass ich außer Kraft setzen können Sie den Wert einer select-box.
Der code funktioniert gut hier. Ich habe gerade aktualisiert meine Antwort und zeigen den ganzen code.

InformationsquelleAutor xar

0
```
function SubmitForm() {
  if ($('#i_n_r_reason').val()=='Other')
    ('#i_n_r_reason').val = ('#other_reason').val
  ('#account_form').submit();
}
```
ist, dass Sie eine exakte Kopie Ihrer aktuellen code? oder eine schnelle umschreiben? es gibt so viele Dinge fehlen!!

ich bin nicht sicher, können Sie den Wert einer select box auf etwas, dass isn ' T eine option. was Sie tun können, ist ein verstecktes Feld, in dem der Wert der wählen Sie oder den Wert Ihrer extra Textfeld.

so, in Ihrem change () - Funktion auf Ihrem wählen. setzen Sie den Wert des versteckten Feldes, um den Wert der wählen Sie mit so etwas wie:
```
$('#MyHiddenField').val($(this).val());
```
und in Ihrem Formular-submit-Funktion, dies zu tun:
```
if ($('#i_n_r_reason').val()=='Other'){
 $('#MyHiddenField').val($('#MyHiddenField').val());
}
```
Ich bin mit einem versteckten Feld, aber ich bin jetzt mit einem Problem von greifen Sie den Wert aus. Ich werde post die Frage schon wieder mit dem neuen code.
gerade die Bearbeitung dieser Frage mit Ihrem neuen code.

InformationsquelleAutor Patricia

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.