Set input value via onclick from button inside form:

Question

This question has two parts. The first takes precedence. Note I am new to HTML and JS, so please be verbose in your explanation.

1.) I have a form tag, inside which I have an input tag and a button, like so. The idea - which one may or may not be stylistically inclined to, is to have the user enter text, but bind it when clicking the button. This work:

<script>
var text;
</script>
<div>
  <form>
    <p>
      <label>Text goes below</label>
      <input id="in" type="text" placeholder="type stuff here">
    </p>
    <p>
      <button id = "aButton" onclick="text=document.getElementById('in').value"></button>
    </p>
  </form>
</div>

The problem is, onclick also just feels like refreshing the page, meaning the user can no longer see what they have written down.

So question one is: how to stop this behavior (e.g. onclick only binds to the value and does not refresh the page so the text stays in the input field)

note: autocomplete="off" doesn't work

question two is how one would do this via event listening?

@Deadlock `francis?`. Nope. I do not want to make this any more complicated than possible. What I typed should work in theory, and no point did I specify reset the page. It still boggles me that there are so many different languages to get stuff done for web-dev — SumNeuron, Nov 02 '16 at 11:40

Akshay Soam · Accepted Answer · 2016-11-02T12:00:34.487

This code is working...

You were using button... that was causing the form to get posted... You need to use <input type="button">

I have placed your code to be called after click in a function and called that function.

<script>
    var text;

    function clickme() {
        text=document.getElementById('in').value;

        console.log(text);
    }
</script>
<div>
    <form>
        <p>
          <label>Text goes below</label>
          <input id="in" type="text" placeholder="type stuff here">
        </p>

        <p>
          <input type="button" value="Click Me" onclick="clickme()"></input>
        </p>
    </form>
</div>

Second part : Doing it via event listening

To do that via event listening you need to add following piece of code.

I'm using jQuery for that. Even if you don't know jQuery, i would say it's pretty much self explantory.

$('#id_of_your_button').click(function () {
    //the code which you want to execute
});

//Consider using jquery... it handles cross browser issues well and makes things simpler

//or without jquery
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {

});

Note

If you are adding event handler's via listening to event, you need to remember that you are adding the event handler code after the window load event.

$(window).load(function () {

    $('#id_of_your_button').click(function () {
        //the code which you want to execute
    });

});

This is done to ensure that before attaching any handler to element, that particular element is present in DOM and loaded.

why the dollar sign? I get that # is short (I think) for getElementById, but $? — SumNeuron, Nov 02 '16 at 11:46
actually $ sign is used for jquery and # symbol is used when we are trying to find the element by it's id... **P.S.** Try your hands on jquery... it will makes things simpler than plain javascript — Akshay Soam, Nov 02 '16 at 11:48

score 0 · Answer 2 · answered Nov 02 '16 at 11:29

0

You should change your code as follows:

<button id = "aButton" onclick="return funcText()"></button>

<script>
  var text;
  function funcText() {
    text = document.getElementById('in').value;
    return false;
  }
</script>

This will prevent the page refresh but I don't know how to do this via event listening...

answered Nov 02 '16 at 11:29

Anshul Sanghi

84
2
9

Ok... why? Also, in my actual code I do have a function. Doesn't solve the problem... – SumNeuron Nov 02 '16 at 11:31
see, when you do `onclick="return func()"`, whatever the function has returned is then returned to the onclick listener. And you set up your function to return false so ultimately, onclick gets false as returned value so that stops the propogation of the event and the page doesn't reload but your javascript code is still executed... – Anshul Sanghi Nov 02 '16 at 11:34
Also, can you update your question with your actual code? – Anshul Sanghi Nov 02 '16 at 11:36
Well I uploaded the MWE... the actual code has two input fields, a function setValueFromId(toSet, id), etc. This is all that is needed though? – SumNeuron Nov 02 '16 at 11:37
See Akshay's answer right above mine. He set the type="button" preventing the default behavior of a button. That is a much simpler solution :) – Anshul Sanghi Nov 02 '16 at 11:41
try two functions, then it does not. – SumNeuron Nov 02 '16 at 11:42
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/127176/discussion-between-anshul-sanghi-and-sumneuron). – Anshul Sanghi Nov 02 '16 at 11:46

Set input value via onclick from button inside form:

2 Answers2

Linked

Related