CODEWITHSUNDEEP
javascriptjqueryhtml
rOcKiNg RhO
rOcKiNg RhO

Reputation: 631

display values after submission

i have a form in html with two submit buttons either one is enabled. if user is filling the form submit is enabled and the other button is diasbled. when user clicks submit button other button gets enabled and displays all the field values with read only .when the 2nd button is clicked values are enterd in databse, using jquery or javascript is it possible

$('input[type="text"]').each(function(){
            $(this).attr('readonly','readonly');
});

Upvotes: 0

Views: 88

Answers (2)

Flater
Flater

Reputation: 13803

If I read your question correctly, the first button does not actually submit the form?

$("#firstbutton").click(function() {
    $("#myForm input").attr("readonly", "readonly"); //this makes the input fields readonly

    $("#secondbutton").attr("disabled","disabled"; //this enable the second button

    $(this).removeAttr('disabled'); //this disables the #firstbutton
}

Make sure that:

  • On page load, the second button is already disabled.
  • If you have dropdownlists in your form, you'll have to set those readonly as well, as they are not <input> but <select> items.
  • the firstbutton should not be of type="submit", it should either be of type="button" or be a <button> tag instead.
  • Your secondbutton can be a regular submit button, nothing fancy required. As long as your form posts to the correct actionlink, the form will be submitted fine.
  • Never use disabled attribute on your input fields. If you do, the form submit will ignore these fields and not post them as intended. You're already doing it right by using readonly.

Upvotes: 1

Mihai Matei
Mihai Matei

Reputation: 24276

$(document).ready(function(){
  $('#myForm').submit(function(e){
    e.preventDefault();

    $myForm = $(this);

    $myForm.find('input[type=submit]').attr('disabled','disabled');
    $myForm.find('input#other-button').attr('enabled','enabled');


    //do a $.post request
    $.post('/path/to/my-file.php',
           $myForm.serialize(),
           function(data){
             // make something after the post is complete
             $myForm.find("input[type=text]").attr('readonly','readonly');
           },
           'json');
  });
});

Upvotes: 0

Related Questions