CODEWITHSUNDEEP
javascripthtml
Viral Bhoot
Viral Bhoot

Reputation: 357

Here I want to add button value in textbox

I want to add button value in text box. When I select "call", the value will be "call" in textbox and suppose when I select "meeting", the value will be "meeting" in textbox.

My problem is, when I select the value is coming multiple and also page is redirecting. I could not find solution. Thanks in advanced.

My code:

Javascript:

<script type="text/javascript">
function moveValue(num) {
    var txt = document.getElementById("subject").value;
    txt = txt + num;
    document.getElementById("subject").value = txt;
    }
</script>

Html:

<div class="form-group">
                    <label class="col-lg-2 control-label">Subject<span class="text-danger">*</span></label>
                    <div class="col-lg-10">
                        <input type="text" id="subject" class="form-control holiday_name"  name="holiday_name" required>
                    </div>
                </div>

<div class="form-group row">
                    <button type="submit" class="btn btn-default col-md-2" value="Call" onclick="moveValue(this.value)"><i class="fa fa-phone"></i>&nbsp;Call</button>
                    <button type="submit" class="btn btn-default col-md-2" value="Meeting" onclick="moveValue(this.value)"><i class="fa fa-group"></i>&nbsp;Meeting</button>
                    <button type="submit" class="btn btn-default col-md-2" value="Task" onclick="moveValue(this.value)"><i class="fa fa-tasks"></i>&nbsp;Task</button>
                    <button type="submit" class="btn btn-default col-md-2" value="Deadline" onclick="moveValue(this.value)"><i class="fa fa-flag"></i>&nbsp;Deadline</button>
                    <button type="submit" class="btn btn-default col-md-2" value="Email" onclick="moveValue(this.value)"><i class="fa fa-envelope"></i>&nbsp;Email</button>
                    <button type="submit" class="btn btn-default col-md-2" value="Lunch" onclick="moveValue(this.value)"><i class="fa fa-cutlery"></i>&nbsp;Lunch</button>

                </div>

Upvotes: 0

Views: 77

Answers (3)

dfsq
dfsq

Reputation: 193261

My problem is, when I select the value is coming multiple and also page is redirecting.

Because you submit the form. Note, that you have buttons as type submit. Change them to just button and it will not attempt to send form for server processing.

<button type="button" class="btn btn-default col-md-2" value="Call" onclick="moveValue(this.value)"><i class="fa fa-phone"></i>&nbsp;Call</button>

Upvotes: 3

jlocker
jlocker

Reputation: 1488

You should just set the value of subject as num which is passing from the onclick event.

function moveValue(num) {
  var txt = document.getElementById("subject").value;
  //txt = txt + num; //remove this line because it will bind the values
  document.getElementById("subject").value = num;
  return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <label class="col-lg-2 control-label">Subject<span class="text-danger">*</span>
  </label>
  <div class="col-lg-10">
    <input type="text" id="subject" class="form-control holiday_name" name="holiday_name" required>
  </div>
</div>

<div class="form-group row">
  <button type="submit" class="btn btn-default col-md-2" value="Call" onclick="moveValue(this.value);"><i class="fa fa-phone"></i>&nbsp;Call</button>
  <button type="submit" class="btn btn-default col-md-2" value="Meeting" onclick="moveValue(this.value);"><i class="fa fa-group"></i>&nbsp;Meeting</button>
  <button type="submit" class="btn btn-default col-md-2" value="Task" onclick="moveValue(this.value);"><i class="fa fa-tasks"></i>&nbsp;Task</button>
  <button type="submit" class="btn btn-default col-md-2" value="Deadline" onclick="moveValue(this.value);"><i class="fa fa-flag"></i>&nbsp;Deadline</button>
  <button type="submit" class="btn btn-default col-md-2" value="Email" onclick="moveValue(this.value);"><i class="fa fa-envelope"></i>&nbsp;Email</button>
  <button type="submit" class="btn btn-default col-md-2" value="Lunch" onclick="moveValue(this.value);"><i class="fa fa-cutlery"></i>&nbsp;Lunch</button>

</div>

Upvotes: 0

prompteus
prompteus

Reputation: 1032

First you have to remove the submit attribute in the buttons, so it won't redirect the page, here is a working code: https://jsfiddle.net/yrpwop7o/1/

And the correct version of the javascript code is:

window.moveValue = function(num) {
    var subject = document.getElementById("subject");
    subject.value = num;
}

Upvotes: 2

Related Questions