Change Form Values After Submit Button Pressed

Change form values after submit button pressed

I'm curious about your statement that the submit handler didn't work for you. It does for me. I've used it for years to fill in hidden fields before sending forms in; should work for other form fields as well.

Example (live copy):

HTML:

<form id='theForm'
    action='http://www.google.com/search'
    method='GET' target='_new'>
      <label>Search for:
        <input type='text' name='q' id='txtSearch'></label>
      <input type='submit' id='btnSearch' value='Search'>

JavaScript:

window.onload = function() {

  document.getElementById('theForm').onsubmit = function() {
    var txt = document.getElementById('txtSearch');
    txt.value = "updated " + txt.value;
  };
};​

Tested and working on IE6 and IE7 on Windows, and Chrome, Firefox, and Opera on Linux.

---

Update: Based on your comment below, you're using jQuery. Works fine using jQuery for everything as well:

$('#theForm').submit(function() {
  var txt = $('#txtSearch');
  txt.val("updated " + txt.val());
});

Live example Tested and working on the same set of browsers. This version uses a more open search rather than an id, and also still works.

Change submit button value

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/

How to change, using React, the value of a form input after clicking the submit button

Before returning textField value from useReducer you can update the value of text using setText. Like this. Working Demo

import React, { useReducer, useState } from "react";

export default function App() {
  const [text, setText] = useState(0);

  console.log(text);
  function handleChange(e) {
    e.preventDefault();
    setText(e.target.value);
  }

  function onSubmit(e) {
    e.preventDefault();
    setTextField();
  }

  const [textField, setTextField] = useReducer((textField) => {
    textField = text;
    if (textField === 1) {
      textField = 1;
    } else if (textField % 2 === 0) {
      textField = textField / 2;
    } else if (textField % 2 !== 0) {
      textField = textField * 3 + 1;
    }
    setText(textField);
    return textField;
  }, 0);

  return (
    <div>
      <form onSubmit>
        <h1>{textField}</h1>
        <input type="text" value={text} onChange={handleChange} />
        <button className="button" onClick={onSubmit}>
          Collatz it!
        </button>
      </form>
    </div>
  );
}

Observe value changes when submit button pressed in Angular

For this you can pass the form instead of its value to 'updateInfo' function and process it there. If user change the control value its state becomes 'dirty' from 'touched/pristine' and we can filter controls based on that.

Change in html:

<button type="button" class="btn btn-primary" (click)="updateInfo(infoForm)">Update
        </button>

Change in *.ts file:

updateInfo(info: NgForm) {
    const changedValues = Object.keys(info.controls)
      .filter(key => info.controls[key].dirty === true)
      .map(key => {
        return { control: key, value: info.controls[key].value }
      });
    console.log(changedValues);
  }

Get the input value after pressing submit button in JavaScript

You need to add an event listener for your button and then console.log the result.

Try this:

var btn = document.getElementById('submit');btn.addEventListener('click', func);
function func() {  console.log(document.getElementById("number").value)}

<input type="number" id="number" name="number" value="2"><input type="submit" id="submit">

Change form action based on submit button

There are two typos:

• obtn instead of obutn
• oEbtn instead of oEbutn

Another suggestion is to use closest("form") to get the form that contains the clicked button.

$(".obutn").click(function() {
    $(this).closest("form").attr("action", "/shop/products.php");     
});
$(".oEbutn").click(function() {
    $(this).closest("form").attr("action", "/shop/extras.php");       
});

$("form").on("submit", function () {
    alert($(this).attr("action"));
});

JSFIDDLE

---

Related Topics