cyborgv7 cyborgv7 - 22 days ago 6
HTML Question

HTML Onclick event (Unexpected token })

i am currently having an issue with an onclick event i have racked my brains and unable to find the issue

index.html

<table id="WIP" class="table" width="80%">
<tr><th colspan="6">Please Enter Your Parts In Progress</th></tr>
<tr>
<th>Station</th>
<th>Current WIP</th>
<th>Enter WIP</th>
<th>Save WIP</th>
</tr><tr>
<div id="10001DIV">
<th>Cutter</th>
<td># Of WIP</td>
<td><input name="10001WIP" type="text"></td>
<td><button type="button" onclick="SaveWIP({div:document.getElementById("10001DIV").value,num:document.getElementById("10001WIP").value})">WIP</button></td>
</div>
</tr>
</table>

<script>
function SaveWIP(e) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("10001DIV").innerHTML = this.responseText;
}
};

xhttp.open("GET", "getuser.php?q="+e.num+"",true);
xhttp.send();

}
</script>


Any help would be appreciated

Answer

I recommend you only pass the id's instead, and then, in your function use querySelector('...').value

If you add in id to your input, you can use getElementById()

Side note, the document.getElementById('10001DIV').value won't work since that element is not an input, it is a div

function SaveWIP(e) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("10001DIV").innerHTML = this.responseText;
    }
  };
  
  xhttp.open("GET", "getuser.php?q="+document.querySelector('[name="'+e.num+'"]').value+"",true);
  xhttp.send();
}
<table  id="WIP" class="table" width="80%">
<tr><th colspan="6">Please Enter Your Parts In Progress</th></tr>
<tr>
<th>Station</th>
<th>Current WIP</th>
<th>Enter WIP</th>
<th>Save WIP</th>
</tr><tr>
<div id="10001DIV">
<th>Cutter</th>
<td># Of WIP</td>
<td><input name="10001WIP" type="text"></td>
<td><button type="button" onclick="SaveWIP({div:'10001DIV',num:'10001WIP'})">WIP</button></td>
</div>
</tr>
</table>

Comments