I seem to be facing a bit of a challenge with a task I've been working on.
My goal is to have multiple forms (six in total) utilize a JavaScript method that I have created. These forms contain text input values which need to be checked, then passed to a PHP file where AJAX is used to update the page with either a confirmation or an error message.
For this illustration, I'll focus on just two forms. Here they are:
<div class="trade_info_1">
<h2>Market #1</h2>
<form action="" method="POST">
<ul>
<li>
<label for="market_1">Market: </label><input type="text" name="market_1" id="market_1" />
</li>
<li>
<button type="button" name="button1" id="button1" onclick="check_update_selection()">Update Market!</button>
</li>
</ul>
<input type="hidden" name="market_number" id="market_number" value="1" />
<div id="market_1_output">output</div>
</form>
</div>
<div class="trade_info_2">
<h2>Market #2</h2>
<form action="" method="POST">
<ul>
<li>
<label for="market_2">Market: </label><input type="text" name="market_2" id="market_2" />
</li>
<li>
<button type="button" name="button2" id="button2" onclick="check_update_selection()">Update Market!</button>
</li>
</ul>
<input type="hidden" name="market_number" id="market_number" value="2" />
<div id="market_2_output">output</div>
</form>
</div>
The next step involves using AJAX to update the page. Below is the existing JavaScript method:
function check_update_selection()
{
if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log('Market value: ' + document.getElementById('market_number').value);
if(document.getElementById('market_number').value == 1)
{
var market = document.getElementById('market_1').value;;
var market_number = 1;
var html_element = 'market_1';
}
else if(document.getElementById('market_number').value == 2)
{
var market = document.getElementById('market_1').value;
var market_number = 2;
var html_element = 'market_2';
}
xhr.open('POST', 'update_market.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
var obj = {market: market};
xhr.send("data=" + JSON.stringify(obj));
xhr.onreadystatechange=function()
{
if (xhr.readyState==4)
{
if(market_number == 1)
{
document.getElementById("market_1_output").innerHTML = xhr.responseText;
}
else if(market_number == 2)
{
document.getElementById("market_2_output").innerHTML = xhr.responseText;
}
}
}
I won't delve into the PHP code as all it does is echo the word "TEST".
The functionality works flawlessly for the first form. However, there seems to be an issue with the second form, as it updates the data from the first form instead. Upon inspecting with console.log(), I noticed that every time I submit the second form, it submits the fields from the first form.
Am I going about this correctly, or is there something important I may have overlooked?
Additionally, I'm currently learning JavaScript, so my expertise in the language isn't extensive. Feel free to point out any errors I may have made.
Thank you for taking the time to read this.