cyborgv7 cyborgv7 - 11 months ago 79
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 Source

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>