javascriptを使用してボタンの値を変更する

Question

javascriptを使用して連絡先フォームの送信ボタンの値を変更しようとしましたが、うまくいかなかった。送信ボタンの値は変更されません。ここ

はHTMLである：ここ

<input type="text" name="name" class="dream-search" placeholder="your name"> <span>and I want to</span> 
     <select name="dropdown" class="verb-dropdown"> 
      <option value="" disabled selected>opta</option> 
      <option value="b">optb</option> 
      <option value="c">optc</option> 
      <option value="d">optd</option> 
      <option value="e">opte</option> 
      <option value="others">others</option> 
     </select>.</p><br> 
     <p><span>Please contact me</span> <input type="text" name="email" class="dream-search" placeholder="your email"><span>and</span> 
      <input type="text" name="telephone" class="dream-search" placeholder="your phone"><br> 
      <textarea name="message" placeholder="..."></textarea><br> 
      <input id="submit" name="submit" type="submit" value="Send" class="button round"></a> 
      <div id="contactResponse"></div> 

はjavascriptのです：

<script> 
    $("#contactForm").submit(function(event) 
    { 
     /* stop form from submitting normally */ 
     event.preventDefault(); 

     /* get some values from elements on the page: */ 
     var $form = $(this), 
      $submit = $form.find('button[type="submit"]'), 
      name_value = $form.find('input[name="name"]').val(), 
      dropdown_value = $form.find('textarea[name="dropdown"]').val(), 
      email_value = $form.find('input[name="email"]').val(), 
      telephone_value = $form.find('textarea[name="telephone"]').val(), 
      message_value = $form.find('textarea[name="message"]').val(), 
      url = $form.attr('action'); 

     /* Send the data using post */ 
     var posting = $.post(url, { 
          name: name_value, 
          dropdown: dropdown_value, 
          email: email_value, 
          telephone: telephone_value, 
          message: message_value 
         }); 

     posting.done(function(data) 
     { 
      /* Put the results in a div */ 
      $("#contactResponse").html(data); 

      /* Change the button text. */ 
      document.getElementById("submit").value="Thank You"; 


      /* Disable the button. */ 
      $submit.attr("disabled", true); 
     }); 
    }); 
</script> 

アップデート：とにかくあなたの助けを

<script> 
$("#contactForm").submit(function(event) 
{ 
    /* stop form from submitting normally */ 
    event.preventDefault(); 

    /* get some values from elements on the page: */ 
    var $form = $(this), 
     $submit = $form.find('input[type="submit"]'), 
     name_value = $form.find('input[name="name"]').val(), 
     dropdown_value = $form.find('textarea[name="dropdown"]').val(), 
     email_value = $form.find('input[name="email"]').val(), 
     telephone_value = $form.find('textarea[name="telephone"]').val(), 
     message_value = $form.find('textarea[name="message"]').val(), 
     url = $form.attr('action'); 

    /* Send the data using post */ 
    var posting = $.post(url, { 
         name: name_value, 
         dropdown: dropdown_value, 
         email: email_value, 
         telephone: telephone_value, 
         message: message_value 
        }); 

    posting.done(function(data) 
    { 
     /* Change the button text. */ 
     $($submit).attr("value","Thank you"); 


     /* Disable the button. */ 
     $submit.attr("disabled", true); 
    }); 
}); 

ありがとう！私はここでいくつかのコードを学ぶためにまだ進んでいます。

Answer 1

チェックライン

$submit = $form.find('button[type="submit"]'), 

あなたは<button>を持っていない、あなたは<input type="submit">を持っています。これにその行を変更してみてください。私の変化に対応し

$submit = $form.find('input[type="submit"]'), 

ライブデモ：JavaScriptを使用して

$("#contactForm").submit(function(event) 
 
    { 
 
     /* stop form from submitting normally */ 
 
     event.preventDefault(); 
 

 
     /* get some values from elements on the page: */ 
 
     var $form = $(this), 
 
      $submit_old = $form.find('button[type="submit"]'); 
 
      $submit_new = $form.find('input[type="submit"]'); 
 
      console.log($($submit_old).attr("value")); //lundefined 
 
      console.log($($submit_new).attr("value")); //log value "Send" 
 
     
 
      /* change value */ 
 
      $($submit_new).attr("value", "New value!"); 
 
      console.log($($submit_new).attr("value")); //log value "New value!" 
 
     /* Send the data using post */ 
 
     return false //only for demo, add here your code 
 
     
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="contactForm"> 
 

 
<input type="text" name="name" class="dream-search" placeholder="your name"> <span>and I want to</span> 
 
     <select name="dropdown" class="verb-dropdown"> 
 
      <option value="" disabled selected>opta</option> 
 
      <option value="b">optb</option> 
 
      <option value="c">optc</option> 
 
      <option value="d">optd</option> 
 
      <option value="e">opte</option> 
 
      <option value="others">others</option> 
 
     </select>.</p><br> 
 
     <p><span>Please contact me</span> <input type="text" name="email" class="dream-search" placeholder="your email"><span>and</span> 
 
      <input type="text" name="telephone" class="dream-search" placeholder="your phone"><br> 
 
      <textarea name="message" placeholder="..."></textarea><br> 
 
      <input id="submit" name="submit" type="submit" value="Send" class="button round"></a> 
 
      <div id="contactResponse"></div> 
 
      </form>

Answer 2

：

あなたが .val('YourValue')にを使用することができます jqueryで

document.getElementById("submit").value="New text"; 

Answer 3

要素の値を変更するs。あなたのケースでは

： $('input#submit').val('Thank You');

Answer 4

最初の問題は、あなたが実際フォームタグを持っていなかったということです。

<form id="contactForm"> 

また、イベントを追加する前に、DOMが準備完了するのを待ってください。メインのDOM要素にの機能を使用すると、これを行うことができます。 https://jsfiddle.net/hamz2v77/

Answer 5

あなたは

$('input[type="submit"]').prop('disabled', true); 
$("#submit").text("Thank you"); //update button value