Change Value of Input and Submit Form in JavaScript

Change value of input and submit form in JavaScript

You could do something like this instead:

<form name="myform" action="action.php" onsubmit="DoSubmit();">
    <input type="hidden" name="myinput" value="0" />
    <input type="text" name="message" value="" />
    <input type="submit" name="submit" />
</form>

And then modify your DoSubmit function to just return true, indicating that "it's OK, now you can submit the form" to the browser:

function DoSubmit(){
  document.myform.myinput.value = '1';
  return true;
}

I'd also be wary of using onclick events on a submit button; the order of events isn't immediately obvious, and your callback won't get called if the user submits by, for example, hitting return in a textbox.

How to change an input value from JavaScript before submit a form

Prevent the form from being submitted using preventDefault method of submit button click, change the value of the input and submit the form.

<form action="someaction" method="post" id="form">
    <input type="hidden" id="input_example" name="input_example" value="">
    <button type="submit" id="show-selected" class="btn btn-primary">Submit</button>
</form>

<script>
    document.getElementById("show-selected").addEventListener("click", function (event) {
        event.preventDefault();
        document.getElementById("input_example").value = "abc";
        document.getElementById("form").submit();
    });
</script>

Change input text value in before submitting form

<form action="" id="form_id">
    <input type="text" name="change_value" id="change_value">
    <input type="text" name="d" id="d">
    <input type="submit" name="">

</form>    

$("#form_id").on("submit", function (e) {
        e.preventDefault();//stop submit event
        var self = $(this);//this form
        $("#change_value").val("deneme");//change input
        $("#form_id").off("submit");//need form submit event off.
        self.submit();//submit form
    });

Submit form only if value of input change

To only update the user document if there are any changes, you'll need to compare the values inside the document with the values from the form. Something like this:

//Updating User other details on submit
const db = firebase.firestore().collection("profiles");
db.doc(user.uid).get()
  .then(doc => {
    if (doc.exists) {
      var updates = {};
      if (doc.data().phonenumber != this.profile.phonenumber) updates["phonenumer"] = this.profile.phonenumber;
      if (doc.data().fulladdress != this.profile.fullAddress) updates["fulladdress"] = this.profile.fullAddress;
      if (doc.data().zipcode != this.profile.zipcode) updates["zipcode"] = this.profile.zipcode;

      if (Object.keys(updates).length > 0) {
        db.doc(user.uid).update(updates)
      }

The changes I made here:

1. Your code loaded all user profiles, while the above only load the profile of the current user.
2. Build an updates object with only the values that have changed.
3. Only update the database if there are any changes.

Change the form value on submit javascript

You can use the onsubmit function:

document.getElementById('searchform').onsubmit = function() {
    var txt = document.getElementById('s');
    txt.value = "dog";
}

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>
  );
}

change input value before submit form using jQuery

I would do this serverside, but if you want it clientside you can also accomplish it like this:

$('#id_email').keyup(function() {
    $('#id_username').val($(this).val());
});

How do you change a html text after form submission?

Add return false to the processInputs() function

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="design.css">
        <title>Plan <B></B></title>
    </head>

    <body>
        <h1>Plan B</h1>
        <form onsubmit="return processInputs()">
            <label for="tnumber">Team Number:</label>
            <input type="text" id="tnumber" name="tnumber"><br><br>
            <input type="submit" value="Submit">
        </form>
        <p>Results:</p>
        <p id="results">something</p>
    </body>

    <script type="text/javascript">

        //Processing Inputs
        function processInputs(){
            document.getElementById("results").innerHTML = "77%";
            return false;
        }
    </script>

</html>

---

Related Topics