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

使用jquery，您可以使用.val('YourValue')更改元素的值。

在你的情况下： $('input#submit').val('Thank You');

Answer 2

检查行

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

你没有<button>，你有<input type="submit">。尝试将该行更改为：

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

我的更改现场演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

使用Javascript：

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

Answer 4

第一个问题是您没有实际的表单标记。

<form id="contactForm">

此外，在添加任何事件之前，请务必等待DOM准备就绪。您可以使用主DOM元素上的 ready 函数来完成此操作。

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

以下是解决您主要问题的方法：https://jsfiddle.net/hamz2v77/

Answer 5

您可以使用以下方式选项

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

使用javascript更改按钮值

5 个答案: