Update a javascript variable with the value in form-text field

Question

I create a D3 bar chart that where the input data is from a range of generation inside a json file. I want to create a form with two text fields where i can insert the range and then update the chart.

The first form update the ST variabll and update the page, that is OK. The next step is update the range os the charts but without refresh the page, so the form1 should be "static". I try to repeat the same procedure for the myfor2 and the variables are not updated.

 <form name="myform1" action="#" method="get" style="position: relative; top:10px;width:300px;margin-left:-70px;" > 
Input the St number<br />
<input type="text" name="StNumber" id="StNumber" value="9" /><br />
<input type="submit" value="Set Value" /><br /> 
</form>

<form name="myform2" action="#" method="get" style="position: relative; top:10px"> 
Input the start generation<br />
<input type="text" name="GenStart" id="GenStart" value="2000" /><br />
Input the final generation<br />
<input type="text" name="GenFinal" id="GenFinal" value="2400" /><br />
<input type="submit" value="Set Value" /><br /> 
</form>

Function that update the form one, that is ok:

function setValue(){ 
      var url=window.location+'';
      if(url.indexOf('?StNumber=')){
        var StNumber=parseInt(url.split('?StNumber=')['1']);
      if(StNumber>0 && isNaN(StNumber)==false){
          document.getElementById('StNumber').value = StNumber;
          StID = String(StNumber);
        }
        }else{
          StID = "9";
       }

      } 

    setValue();

Any sugestion!

Regards

http://jsfiddle.net/bnACW/425/

I need to update the javascript variables independently. in myform1 I update the StID and set the value the variable are saved; Then: in the myfor2 I update the endGen or StartGen or even the two at the same time ad set and the variablesare updated as the chart that need this two variables.

please tell me clearly what you need are show js fiddle

Dinesh
– Dinesh

2014-01-22 11:58:24 +00:00
Commented Jan 22, 2014 at 11:58 — Dinesh
– Dinesh, Commented Jan 22, 2014 at 11:58
I update with more information and the jsfiddle

user2920033
– user2920033

2014-01-22 12:12:09 +00:00
Commented Jan 22, 2014 at 12:12 — user2920033
– user2920033, Commented Jan 22, 2014 at 12:12
Hey u need to change the textbox values using jquery

Dinesh
– Dinesh

2014-01-22 12:16:08 +00:00
Commented Jan 22, 2014 at 12:16 — Dinesh
– Dinesh, Commented Jan 22, 2014 at 12:16

rrr · Accepted Answer · 2014-01-22 12:04:27Z

1

If I understood correct, you just want to perform a JS action when the second button is pressed. Right now the second button is submitting your form because the input value of the button is set to "submit", change it to "button" to prevent the form submission, then you can add an onclick event and fire the desired function.

<input type="button" value="Set Value" onclick="setValue()" /><br />

Hope this helps!

answered Jan 22, 2014 at 12:04

rrr

3031 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2920033 Over a year ago

So, in yor opinion the solution is: create a new function that update the myform changed the tyoe and add onclick opition? This will solve the problems with the refresh?

rrr Over a year ago

Yes, the page is refreshing because you are submitting the form, despite the fact that the action is set to "#", by changing the input type to "button" and then using an onlclick the page won't get refreshed anymore and you will be able to perform any js variable update on the client side.

user2920033 Over a year ago

I do this and nothing happens in my page, any suggestion?

rrr Over a year ago

Does the setValue function gets fired?

Collectives™ on Stack Overflow

Update a javascript variable with the value in form-text field

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related