Переключатель с «другим» текстовым полем, неправильно вводящим значение с использованием JavaScript - PullRequest
1 голос
/ 26 января 2011

Я создаю форму, используя элементы управления html-формой и javascript, чтобы упростить некоторые процессы в работе.Я временно выложил форму онлайн здесь .

В одном разделе формы у меня есть текстовое поле, связанное с переключателем.Другие переключатели в разделе правильно отображают свои значения, когда кнопка «Дисплей» нажата в нижней части страницы, а переключатель с текстовым полем - нет.Кажется, что я не правильно присваиваю значение текстового поля значению переключателя.Что я делаю не так?

Вот javascript:

<script LANGUAGE="JavaScript" type="text/javascript">

function display() {
  for (var i=0; i < document.form2.paymenttype.length; i++)
   {
   if (document.form2.paymenttype[i].checked)
      {
      var radio_paymenttype_val = document.form2.paymenttype[i].value;
      }
   }

  for (var i=0; i < document.form2.contracts.length; i++)
   {
   if (document.form2.contracts[i].checked)
      {
      var radio_contracts_val = document.form2.contracts[i].value;
      }
   }

  DispWin = window.open('','NewWin', 'toolbar=no,status=no,scrollbars=yes,width=800,height=600')

  message = "<h2>Royalty Advance Payment Letter</h2>";
  message += "<hr />";
  message += "<span STYLE=\'font-family: Garamond\'>";
  message += "<p>" + document.form2.agentfirstname.value + "&nbsp;" + document.form2.agentlastname.value + "<br />";
  message += document.form2.agencyname.value + "<br />";
  message += document.form2.agentaddress1.value + "<br />";
  message += document.form2.agentaddress2.value + "<br />";
  message += document.form2.agentcity.value + ",&nbsp;" + document.form2.agentstate.value + "&nbsp;" + document.form2.agentzip.value + "<br />";
  message += document.form2.agentcountry.value + "<br />";
  message += "</p>";
  message += "<p>Dear&nbsp;" + document.form2.agentfirstname.value + ",</p>";
  message += "<p>Please find enclosed a check in the amount of&nbsp;$";
  message += document.form2.paymentamount.value + "&nbsp;representing the amount due upon&nbsp;";
  message += radio_paymenttype_val + "&nbsp;";
  message += document.form2.authorfirstname.value + "&nbsp;";
  message += document.form2.authorlastname.value + "'s&nbsp;<em>";
  message += document.form2.booktitle.value + "</em>.";
  message += radio_contracts_val + "</p>";
  message += "<p>Regards,<br /><br /><br /><br />My Name<br />Associate Editor</p>";
  message += "</span>";

  DispWin.document.write(message);
}
</script>

А вот HTML-код для этого раздела:

  <div class="required">
    <fieldset>

    <legend>Payment Type:</legend>
      <label for="payment_sig" class="labelRadio"><input type="radio" name="paymenttype" id="payment_sig" class="inputRadio" value="signature for" /> Signature</label>
      <label for="payment_danda" class="labelRadio"><input type="radio" name="paymenttype" id="payment_danda" class="inputRadio" value="delivery and acceptance of" /> Delivery & Acceptance</label>
      <label for="payment_pub" class="labelRadio"><input type="radio" name="paymenttype" id="payment_pub" class="inputRadio" value="publication of" /> Publication</label>
      <label for="payment_pbpub" class="labelRadio"><input type="radio" name="paymenttype" id="payment_pbpub" class="inputRadio" value="paperback publication of" /> Paperback Publication</label>

      <label for="payment_otherlabel" class="labelRadio"><input type="radio" name="paymenttype" id="payment_otherlabel" class="inputRadio" onclick="this.form.payment_other.focus()" onfocus="this.form.payment_other.focus()" value="" checked="checked"  /> Other:</label>
      <input type="text" name="payment_other" id="payment_other" class="inputText" value="" />
      <small>Remember, this text will be in the middle of a sentence. This text should always end in "of" or "for."</small>
    </fieldset>
  </div>

Ответы [ 2 ]

1 голос
/ 26 января 2011

Ваш первый цикл for проходит и находит значение правильной выбранной радиосвязи, но в случае «other» вам не будет назначено значение. Вам необходимо определить, когда выбрано другое, а затем присвоить radio_paymenttype_val значение текстового поля. Что-то с эффектом:

for (var i=0; i < document.form2.paymenttype.length; i++)
{
  if (document.form2.paymenttype[i].checked)
  {
    // assuming "other" is the only case where this radio's value property would be empty.
    var radio_paymenttype_val = (document.form2.paymenttype[i].value != ''
                              ? document.form2.paymenttype[i].value
                              : document.form2.payment_other.value);
  }

}


Обновление

Так что извините за задержку (взял ваше поле формы и побежал с ним). Это (я считаю) то, что вы ищете. Некоторые вещи на заметку:

  • Я не делаю никакой проверки формы. Это то, что вы, вероятно, хотите возиться, и может быть довольно простым. В событии .click() просто отметьте что-то вроде следующего (или вы можете получить более подробно):

    если ($ ( '# agentfirstname'). Вал () == '') {
    оповещение («Отсутствует имя»);
    возвращение;
    }

  • Также я использую что-то совершенно новое в jQuery, templates . Это делает это проще, чем var+='html html'+var+'html'; (как вы можете наблюдать в теге <script> с идентификатором «FormTemplate»).
  • Наконец, я проверил это на FF4, Chrome4 и IE8, и оно должно работать, но дайте мне знать, если это не так, в какой среде вы используете.

В любом случае, вот код, надеюсь, это поможет!

Поместите внутрь <head> элемент вашего документа

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<Script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript">
  $(function(){
    // bind to the "display" button ('.' means this is a class name reference)
    $('.inputSubmit').click(function(e){
      // build up the template values
      var tmplData = [{
        agentFirstName: $('#agentfirstname').val(),
        agentLastName: $('#agentlastname').val(),

        agencyName: $('#agencyname').val(),
        agentAddr1: $('#agentaddress1').val(),
        agentAddr2: $('#agentaddress2').val(),
        agentCity: $('#agentcity').val(),
        agentState: $('#agentstate').val(),
        agentZip: $('#agentzip').val(),

        paymentAmount: '$'+$('#paymentamount').val(),
        paymentType: $('input[name="paymenttype"]:checked').val() != '' ? $('input[name="paymenttype"]:checked').val() : $('#payment_other').val(),

        authorFirstName: $('#authorfirstname').val(),
        authorLastName: $('#authorlastname').val(),
        bookTitle: $('#booktitle').val(),
        contracts: $('input[name="contracts"]:checked').val()
      }];

      // create the template
      var template = $('#FormTemplate').template('letter');

      // Create a fake div we can push the template to and pass off to popup
      var tmplDiv = document.createElement('div');
      $(tmplDiv).attr('id','TemplateDiv').css('display','none');

      // Write the template and push it off
      $.tmpl('letter', tmplData).appendTo(tmplDiv);

      // create the window and populate it with the template
      var hWindow = window.open('','NewWin', 'toolbar=no,status=no,scrollbars=yes,width=800,height=600');
      hWindow.document.write(tmplDiv.innerHTML);

      // stop any further action
      e.preventDefault();
    });
  });
</script>

Поместите внутрь <body> элемент вашего документа:

<script id="FormTemplate" type="text/x-jquery-tmpl">
  <html>
    <head>
      <title>Letter</title>
    </head>
    <body>
      <h2>Royalty Advance Payment Letter</h2>
      <hr />
      <span type="font-family:Garamond;">
        <p>
          ${agentFirstName} ${agentLastName}<br />
          ${agencyName}<br />
          ${agentAddr1}<br />
          ${agentAddr2}<br />
          ${agentCity}, ${agentState} ${agentZip}<br />
        </p>
        <p>
          Dear ${agentFirstName},
        </p>
        <p>
          Please find enclosed a check in the amount of ${paymentAmount} representing the amount due upon ${paymentType}
          ${authorFirstName} ${authorLastName}'s <em>${bookTitle}</em>.
          ${contracts}
        </p>
        <p>
          Regards,<br />
          <br />
          <br />
          <br />
          Margaret Maloney<br />
          Associate Editor
        </p>
      </span>
    </body>
  </html>
</script>
0 голосов
/ 26 января 2011

Не могли бы вы просто установить onblur () для payment_other, чтобы установить значение параметра радио?

<input type="text" name="payment_other" id="payment_other" class="inputText" value="" onblur="document.getElementById('payment_otherlabel').value=this.value;" />

Тогда, если оно будет установлено, оно автоматически скопирует значение в параметр радио.Затем, когда вызывается ваша функция Display (), я думаю, что значение будет установлено.

(Понял, что пропустил точку с запятой в конце оператора onblur = "".)
Есть ли у васпробовал это еще?

...