CODEWITHSUNDEEP
javascripthtmlforms
astromax
astromax

Reputation: 6331

html output update on form submit

This should be a really simple one, but I can't seem to find a solution to this anywhere explicitly. I'm looking to do a javascript calculation (from a bunch of inputs in a form), for which I get two numbers. These numbers will then update the values of two html output elements within the same form. Here's a minimal working example of what I'm trying to do (if there is a better way of doing this I'm all ears):

<!DOCTYPE HTML PUBLIC "~//IETF//DTD HTML//EN">
<html>
<head>
<script>
function somecalc() {
    var a = parseFloat(document.forms["form1"]["id1"].value);
    var b = parseFloat(document.forms["form1"]["id2"].value);
    var c = parseFloat(document.forms["form1"]["id3"].value);
    var d = parseFloat(document.forms["form1"]["id4"].value);
    var out1 = a-b-c-d;
    var out2 = a+b+c+d;
    var outarr = [];
    outarr.push(out1);
    outarr.push(out2);
    return outarr;
}
</script>
</head>

<body>

  <form name="form1">
    <table>
      <tr>
        <td>
          Head1
        </td>
        <td>
          Head2
        </td>
        <td>
          Head3
        </td>
        <td>
          Head4
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" name="1" placeholder="Enter 1" id="id1" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="2" placeholder="Enter 2" id="id2" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="3" placeholder="Enter 3" id="id3" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="4" placeholder="Enter 4" id="id4" size="10" maxlength="10"/>
        </td>
      </tr>
    </table>
    <p><input type="submit" value="Run" onclick="somecalc();"></p>
    <table border="1">
      <tr>
        <td>
          Out1 = <output name="out1" for=""></output>
        </td>
      </tr>
      <tr>
        <td>
          Out2 =<output name="out2" for=""></output>
        </td>
      </tr>
    </table>
  </form>

</body>
</html>

How could I get the first element of outarr to fill in out1, and likewise, the second element of outarr to update out2 when the Run button is pressed?

Upvotes: 1

Views: 1762

Answers (3)

mikeLspohn
mikeLspohn

Reputation: 495

You could do something like this also. You could use document.querySelector or the method you use instead of document.getElementById I just did that for simplicities sake when trying to work through your code.

Generally javascript files are linked to external files instead of being declared in a script tag, but I suppose you could be doing this for homework or something where putting it all in the HTML makes it a little simpler. If you did seperate it out you would have to make a click handler such as in my code which is the btnRun.addEventListener('click', runClick); Also the e.preventDefault() prevents the default action of the submit button which is submitting the form via whatever action is stated (GET, POST, etc..)

Also Mozilla Developer Network has great resources for javascript syntax and examples if you don't know about it https://developer.mozilla.org/en-US/docs/Web/JavaScript

var btnRun = document.getElementById('run');

var out2 = document.getElementById('out2');
var out1 = document.getElementById('out1');

function runClick(e){
  e.preventDefault();   

  var output1, output2;
  var a = parseFloat(document.getElementById('id1').value);
  var b = parseFloat(document.getElementById('id2').value);
  var c = parseFloat(document.getElementById('id3').value);
  var d = parseFloat(document.getElementById('id4').value);


  output1 = a + b + c + d;
  output2= a - b - c - d;
  out1.innerText= output1;
  out2.innerHTML = output2;
}

btnRun.addEventListener('click',  runClick);

Upvotes: 1

robbmj
robbmj

Reputation: 16526

You can just set the value of out1 and out2 via the value property.

function somecalc() {
    var a = parseFloat(document.forms["form1"]["id1"].value);
    var b = parseFloat(document.forms["form1"]["id2"].value);
    var c = parseFloat(document.forms["form1"]["id3"].value);
    var d = parseFloat(document.forms["form1"]["id4"].value);
    var out1 = a-b-c-d;
    var out2 = a+b+c+d;
    document.forms["form1"]["out1"].value = out1;
    document.forms["form1"]["out2"].value = out2;
    return [out1, out2];
}
<!DOCTYPE HTML PUBLIC "~//IETF//DTD HTML//EN">
<html>
<body>
  <form name="form1">
    <table>
      <tr>
        <td>Head1</td><td>Head2</td><td>Head3</td><td>Head4</td>
      </tr>
      <tr>
        <td>
          <input type="text" name="1" placeholder="Enter 1" id="id1" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="2" placeholder="Enter 2" id="id2" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="3" placeholder="Enter 3" id="id3" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="4" placeholder="Enter 4" id="id4" size="10" maxlength="10"/>
        </td>
      </tr>
    </table>
    <p><input type="submit" value="Run" onclick="somecalc();"></p>
    <table border="1">
      <tr>
        <td>
          Out1 = <output name="out1" for=""></output>
        </td>
      </tr>
      <tr>
        <td>
          Out2 =<output name="out2" for=""></output>
        </td>
      </tr>
    </table>
  </form>
</body>
</html>

Upvotes: 1

argentum47
argentum47

Reputation: 2382

function somecalc() {
    var a, b, c, d, out1, out2;
    a= parseFloat(document.forms["form1"]["id1"].value);
    b = parseFloat(document.forms["form1"]["id2"].value);
    c = parseFloat(document.forms["form1"]["id3"].value);
    d = parseFloat(document.forms["form1"]["id4"].value);
    out1 = a-b-c-d;
    out2 = a+b+c+d;
    document.querySelector("output[name=out1]").innerHTML = out1
    document.querySelector("output[name=out2]").innerHTML = out2
}

Try this or you can 'id' s in your html like

<output id="out1" .. > and document.getElementById("out1").innerHTML = out1

Upvotes: 1

Related Questions