Изменение значения кнопки с помощью 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> 

Update:

<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"]'), 

Live Demo с моим изменением:

$("#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

Использование JavaScript:

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

Answer 3

С jquery вы можете использовать .val('YourValue') для изменить значение элемента s.

В вашем случае: $('input#submit').val('Thank You');

Answer 4

Первая проблема заключается в том, что вы не имели фактическую формы тега.

<form id="contactForm"> 

Кроме того, не забудьте дождаться готовности DOM перед добавлением какого-либо события. Вы можете сделать это, используя функцию на вашем основном элементе DOM.

$(document).ready(function() { [...] }); 

Вот скрипка с решением Вас главной проблемой: https://jsfiddle.net/hamz2v77/

Answer 5

вы можете использовать опции сильфонных

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