Two image submit buttons

JavaScript
1 
<form method="get" action="c.php">
<input type="submit" id="as" value="a_submit">
<input type="hidden" value="1" name="a" id="a">
<input type="hidden" value="1" name="b" id="b">
<input type="text" value="hello" name="myText">
<input type="submit" id="bs" value="b_submit">
</form>
<script>
document.getElementById('as').onclick = function() {
   document.getElementById('b').disabled= true;;
};
document.getElementById('bs').onclick = function() {
   document.getElementById('a').disabled = true;
};
</script>

The code above works fine.
if I click the 1st submit button, it will go to c.php?a=1&myText=hello.
if I click the 2nd submit button, it will go to c.php?b=1&myText=hello.

Now I like to change the 1st submit button and the 2nd submit button to image buttons.
The following is one of my trails for it.

<form method="get" action="c.php">
<img src="1stSubmit.png" id="as" type="submit"">
<input type="hidden" value="1" name="a" id="a">
<input type="hidden" value="1" name="b" id="b">
<input type="text" value="hello" name="myText">
<input type="submit" id="bs" value="b_submit">
<img src="2ndSubmit.png" id="bs" type="submit"">
</form>
<script>
document.getElementById('as').onclick = function() {
   document.getElementById('b').disabled= true;;
};
document.getElementById('bs').onclick = function() {
   document.getElementById('a').disabled = true;
};
</script>

But the trail above doesn’t work correctly, even the button each not clickable.
Can I make two image submit buttons which work correct with your help?

2

See https://www.w3schools.com/tags/att_input_type_image.asp.

2 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.