How to define 'action' according to values entered in text bars?

user_11462274 0
Viewed 24

I would like the <form action to be set according to the link values I set in text bars (input) with name chart4, chart5 and chart6.

The idea is to put links in the text bars and when I press the button, this link opens in iframes.

I tried to do it as follows:

</body>
<input type="text" id="chart1" name="chart1"><br>
<input type="text" id="chart2" name="chart2"><br>
<input type="text" id="chart3" name="chart3"><br>
<input type="text" id="chart4" name="chart4"><br>
<input type="text" id="chart5" name="chart5"><br>
<input type="text" id="chart6" name="chart6"><br>
<p></p>
<form method="post" action= chart4.value target="iframe1">
<input type="submit" value="I Frame 1" />
<form method="post" action= chart5.value target="iframe2">
<input type="submit" value="I Frame 2" />
<form method="post" action= chart6.value target="iframe3">
<input type="submit" value="I Frame 3" />
</form>
<iframe name="iframe1" width="350" height="282"></iframe>
<iframe name="iframe2" width="350" height="282"></iframe>
<iframe name="iframe3" width="350" height="282"></iframe>
<p></p>

But in the test nothing happens, how to proceed?

Complete script if necessary.

<html>

<head>
<script language="JavaScript"><!--
function refreshIt() {
   if (!document.images) return;
   document.images['Gráfico1'].src = chart1.value;
   document.images['Gráfico2'].src = chart2.value;
   document.images['Gráfico3'].src = chart3.value;
   setTimeout(refreshIt,500); // refresh every 0.5 secs
}
//--></script>
</head>

<body onLoad=" setTimeout(refreshIt,500)">

</body>
<input type="text" id="chart1" name="chart1"><br>
<input type="text" id="chart2" name="chart2"><br>
<input type="text" id="chart3" name="chart3"><br>
<input type="text" id="chart4" name="chart4"><br>
<input type="text" id="chart5" name="chart5"><br>
<input type="text" id="chart6" name="chart6"><br>
<p></p>
<form method="post" action= chart4.value target="iframe1">
<input type="submit" value="I Frame 1" />
<form method="post" action= chart5.value target="iframe2">
<input type="submit" value="I Frame 2" />
<form method="post" action= chart6.value target="iframe3">
<input type="submit" value="I Frame 3" />
</form>
<iframe name="iframe1" width="350" height="282"></iframe>
<iframe name="iframe2" width="350" height="282"></iframe>
<iframe name="iframe3" width="350" height="282"></iframe>
<p></p>
<img src="https://logospng.org/download/betfair/logo-betfair-fundo-laranja-1024.png" name="Gráfico1">
<img src="https://logospng.org/download/betfair/logo-betfair-fundo-laranja-1024.png" name="Gráfico2">
<img src="https://logospng.org/download/betfair/logo-betfair-fundo-laranja-1024.png" name="Gráfico3">
</html>
iframe html javascript
1 Answers

action= chart4.value sets the action of the form to the value of #chart4, which at the time is nothing, so there is no action.

Instead, set the action of the iframes inside the refreshIt function. 

<html>

<head>
<script language="JavaScript"><!--
function refreshIt() {
   if (!document.images) return;
   document.images['Gráfico1'].src = chart1.value;
   document.images['Gráfico2'].src = chart2.value;
   document.images['Gráfico3'].src = chart3.value;
   iframe1.action = chart4.value;
   iframe2.action = chart5.value;
   iframe3.action = chart6.value;
   setTimeout(refreshIt,500); // refresh every 0.5 secs
}
//--></script>
</head>

<body onLoad=" setTimeout(refreshIt,500)">
<input type="text" id="chart1" name="chart1"><br>
<input type="text" id="chart2" name="chart2"><br>
<input type="text" id="chart3" name="chart3"><br>
<input type="text" id="chart4" name="chart4"><br>
<input type="text" id="chart5" name="chart5"><br>
<input type="text" id="chart6" name="chart6"><br>
<p></p>
<form method="post" target="iframe1">
<input type="submit" value="I Frame 1" />
<form method="post" target="iframe2">
<input type="submit" value="I Frame 2" />
<form method="post" action= chart6.value target="iframe3">
<input type="submit" value="I Frame 3" />
</form>
<iframe name="iframe1" width="350" height="282"></iframe>
<iframe name="iframe2" width="350" height="282"></iframe>
<iframe name="iframe3" width="350" height="282"></iframe>
<p></p>
<img src="https://logospng.org/download/betfair/logo-betfair-fundo-laranja-1024.png" name="Gráfico1">
<img src="https://logospng.org/download/betfair/logo-betfair-fundo-laranja-1024.png" name="Gráfico2">
<img src="https://logospng.org/download/betfair/logo-betfair-fundo-laranja-1024.png" name="Gráfico3">
</body>

</html>

However, I don't recommend using a setTimeout to update the action of the forms. It's better to use an event listener that updates the action everytime the user enters something into the inputs. This reduces the need for useless operations for the browser.

In our case, we can delegate an input event listener to all input fields that calls the refreshIt function. With this approach we don't need the setTimeout at all.

<html>

<head>
<script language="JavaScript"><!--
function refreshIt() {
   if (!document.images) return;
   document.images['Gráfico1'].src = chart1.value;
   document.images['Gráfico2'].src = chart2.value;
   document.images['Gráfico3'].src = chart3.value;
   form1.action = chart4.value;
   form2.action = chart5.value;
   form3.action = chart6.value;
}

//--></script>
</head>

<body>
<input type="text" id="chart1" name="chart1"><br>
<input type="text" id="chart2" name="chart2"><br>
<input type="text" id="chart3" name="chart3"><br>
<input type="text" id="chart4" name="chart4"><br>
<input type="text" id="chart5" name="chart5"><br>
<input type="text" id="chart6" name="chart6"><br>
<script>
document.querySelectorAll('input').forEach(e => e.addEventListener('input', refreshIt));
</script>
<p></p>
<form method="post" id="form1" target="iframe1">
<input type="submit" value="I Frame 1" />
</form>
<form method="post"  id="form2" target="iframe2">
<input type="submit" value="I Frame 2" />
</form>
<form method="post" id="form3" action= chart6.value target="iframe3">
<input type="submit" value="I Frame 3" />
</form>
<iframe name="iframe1" width="350" height="282"></iframe>
<iframe name="iframe2" width="350" height="282"></iframe>
<iframe name="iframe3" width="350" height="282"></iframe>
<p></p>
<img src="https://logospng.org/download/betfair/logo-betfair-fundo-laranja-1024.png" name="Gráfico1">
<img src="https://logospng.org/download/betfair/logo-betfair-fundo-laranja-1024.png" name="Gráfico2">
<img src="https://logospng.org/download/betfair/logo-betfair-fundo-laranja-1024.png" name="Gráfico3">

</body>

</html>

user_142512210
Related