CODEWITHSUNDEEP
javascriptajax
Kelvin
Kelvin

Reputation: 585

Change submit button value

It may take a long time to complete the call.php and get the return value, how can I change the submit button's value to "Processing … " while the call.php is being executed?

Submit button with id "submit_btn", there is no change to the script

$('#submit_btn').val('Processing …')

AJAX code

$(document).ready(function(){
    $('#form1').submit(function(e) {
        e.preventDefault();
        $('#submit_btn').val('Processing ...');
      $.ajax({
        cache: false, 
        type: "POST", 
        dataType: "json",
            data: $('#form1').serialize(),
        url: $('#form1').attr('action'),
        complete: function (HttpRequest, textStatus) {
                $('#submit_btn').val('Create');
      }});
      return false;
  });
});

HTML

<form action="call.php" method="POST" id="form1" name="form1">
        <input type="text" name="campname" id="campname">
        <textarea id="longdesc" name="longdesc"></textarea>
        <input type="text" name="vercode" id="vercode" />
        <input type="submit" value="Create" id="submit_btn" />
</form>

Upvotes: 2

Views: 8021

Answers (5)

Marcel Kraan
Marcel Kraan

Reputation: 107

For my this was the one that worked in a page with many forms with the same name and id

$(this).find("#submit").val("Saved");

Upvotes: 0

Kelvin
Kelvin

Reputation: 585

For simple form from single HTML file, $('#submit_btn').val('Processing …').button('refresh'); is work but NOT in multiple jQuery page.

HTML

<form action="test.php" method="POST" id="form1" name="form1">
    <fieldset>
        <input type="text" name="field1" id="field1" />
        <input type="button" value="Button" name="btn01" id="btn01" />
        <input type="submit" value="Submit" id="submit_btn" />
    </fieldset>
</form>

AJAX

$(document).ready(function () {

    $('#form1').submit(function (e) {
        e.preventDefault();
        $('#submit_btn').val('Processing …').button('refresh');
        $.ajax({
            type: "POST",
            dataType: "json",
            data: $('#form1').serialize(),
            url: $('#form1').attr('action'),
            complete: function (HttpRequest, textStatus) {
                $('#submit_btn').val('Submit').button('refresh');
            }
        });
        return false;
    });
});

Demo page: http://jsfiddle.net/yckelvin/C6kzr/

For multiple jQuery page, $('#submit_btn').prev().text("Processing …") must be used instead.

HTML

<!-- HOME Page -->
<div data-role="page" id="page1">
    <div data-theme="b" data-role="header" data-position="fixed">   <a href="#menu" data-icon="bars" class="ui-btn-left">Menu</a>

    </div>
    <!-- Panel Page ---->
    <div data-role="panel" id="menu" data-display="overlay">
        <ul data-role="listview">
            <li><a href="#formpage" data-prefetch="false">Goto Form Page</a>

            </li>
        </ul>
        <p><a data-role="button" data-rel="close">Close</a>

        </p>
    </div>
</div>
<!-- Form Page -->
<div data-role="page" id="formpage" data-add-back-btn="true">
    <div data-role="content">
        <form action="test.php" method="POST" id="form1" name="form1">
            <fieldset>
                <input type="text" name="field1" id="field1" />
                <input type="button" value="Button" name="btn01" id="btn01" />
                <input type="submit" value="Submit" id="submit_btn" />
            </fieldset>
        </form>
    </div>
</div>

AJAX

$(document).ready(function () {

    $('#form1').submit(function (e) {
        e.preventDefault();
        $('#submit_btn').prev().text("Processing ...").delay( 1000 );
        $.ajax({
            type: "POST",
            dataType: "json",
            data: $('#form1').serialize(),
            url: $('#form1').attr('action'),
            complete: function (HttpRequest, textStatus) {
                $('#submit_btn').prev().text('Submit');
            }
        });
        return false;
    });
});

Demo page: http://jsfiddle.net/yckelvin/V5mSv/

Upvotes: 2

NoSense
NoSense

Reputation: 959

I'm not very sure, but why don't try to change the value with jQuery on click?

Something like:

$('#submit_btn').click(function(){
   $(this).val("your value")
})

... or just change in your code the submit with click :)

--------------EDIT(based on the author code)----------------

The value of the button don't change because the jquery you use style the basic submit input by applying a span over it. So on click You will have to change the text in this span.

Here is a DEMO

Upvotes: 2

brandonscript
brandonscript

Reputation: 72955

Use $ajax's beforeSend option:

$.ajax({
    cache: false, 
    type: "POST", 
    beforeSend: function() { ... },
    ...

Upvotes: 1

underscore
underscore

Reputation: 6887

$(document).ready(function(){
    $('#submit_btn').click(function(e) {
        e.preventDefault();
        $(this).val('Processing ...'); // this did the trices 
      $.ajax({
        cache: false, 
        type: "POST", 
        dataType: "json",
            data: $('#form1').serialize(),
        url: $('#form1').attr('action'),
        complete: function (HttpRequest, textStatus) {
                $('#submit_btn').val('Create');
      }});
      return false;
  });
});

WORKING DEMO

Upvotes: 0

Related Questions