When form submit replace it with inputs value. JavaScript

Question

I have this small form here:

<form action="prekiu-uzsakymas" method="get">
                        <input type="text" name="ticket" value="8888">
                        <input type="submit" value="Panaudoti kuponą">
                    </form>

What I want to do is, when I click submit, the form should be hidden and only the input should appear:

<input type="text" name="ticket" value="8888">

How can I achieve this with javascript ?

What do you mean by "The form should be hidden"? Should the submit button be hidden? Should the ticket input be detached from the form, the form removed, and the ticket input be reattached? Do you want to duplicate the input and attach the duplicate elsewhere? — Zach, Jun 07 '16 at 20:44

score 0 · Accepted Answer · answered Jun 07 '16 at 20:44

Looks like you just want to remove the button. First, give the form and button an ID, then attach to the submit event, where you can do whatever you want to do before submission happens:

jQuery("#my-form-id").submit(function() {
    jQuery("#my-button-id").remove(); // or .css("display", "none")
});

score 0 · Answer 2 · edited May 23 '17 at 10:34

In Pure JavaScript, you can remove elements by using the code on the following answer by Johan Dettmar https://stackoverflow.com/a/18120786/886393

Here is a working plunker for your exact case.https://plnkr.co/edit/1HdgiSE770KKghq8DzbS?p=preview

You can define the prototypes for element and nodelist.

Element.prototype.remove = function() {
  this.parentElement.removeChild(this);
};
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
  for (var i = this.length - 1; i >= 0; i--) {
    if (this[i] && this[i].parentElement) {
      this[i].parentElement.removeChild(this[i]);
    }
  }
};

When form submit replace it with inputs value. JavaScript

2 Answers2