The onsubmit event in Javascript activates the parent's onclick event

Question

The onsubmit event in Javascript activates the parent's onclick event

On my HTML page, I have a table with a form in each row. Clicking on the row should open a detail page, but clicking within the form should not trigger this action.

Here is an example of what my row looks like:

<tr onclick="window.parent.location.href='details.php?id=123';"><td><img /></td><td>text</td><td>price<br>
  <form method="post">
    <input type="number" name="size" value="1">
    <input type="submit" onsubmit="return confirm('Are you sure?');">
  </form>
</td></tr>

The desired behavior is that if I click in the size field or on the submit button, the detail page should not be called.

I have researched and found that event.stopPropagation() can be used for this purpose, but I am struggling to implement it using plain JavaScript. It seems like there should be a straightforward solution, but I haven't been able to figure it out yet.

javascript onclick submit onsubmit

Answer 1

Answer №1

Give it a shot

<tr onclick="window.parent.location.href='details.php?id=123';">
    <td><img /></td>
    <td>text</td>
    <td>price<br> 
        <form method="post" onsubmit="return confirm('Are you sure?');"> 
            <input type="number" name="size" value="1" onclick="event.stopPropagation()"> 
            <input type="submit" onclick="event.stopPropagation()"> 
        </form> 
    </td>
</tr>

Note: Make sure to remove the onsubmit attribute from the input element and add it to the form element instead. Thanks to @epascarello for pointing out this correction.

Answer 2

Give it a shot

<tr onclick="window.parent.location.href='details.php?id=123';">
    <td><img /></td>
    <td>text</td>
    <td>price<br> 
        <form method="post" onsubmit="return confirm('Are you sure?');"> 
            <input type="number" name="size" value="1" onclick="event.stopPropagation()"> 
            <input type="submit" onclick="event.stopPropagation()"> 
        </form> 
    </td>
</tr>

Note: Make sure to remove the onsubmit attribute from the input element and add it to the form element instead. Thanks to @epascarello for pointing out this correction.

Answer 3

Answer №2

Below is the correct answer

<tr onclick="var x = event.clientX;var y = event.clientY;if(document.elementFromPoint(x, y).tagName.toLowerCase()!='input'){window.parent.location.href='details.php?id=123'; }"><td><img /></td><td>text</td><td>price<br>
  <form method="post">
    <input type="number" name="size" value="1">
    <input type="submit" onclick="return confirm('Are you sure?');">
  </form>
</td>
</tr>

Answer 4

Below is the correct answer

<tr onclick="var x = event.clientX;var y = event.clientY;if(document.elementFromPoint(x, y).tagName.toLowerCase()!='input'){window.parent.location.href='details.php?id=123'; }"><td><img /></td><td>text</td><td>price<br>
  <form method="post">
    <input type="number" name="size" value="1">
    <input type="submit" onclick="return confirm('Are you sure?');">
  </form>
</td>
</tr>

Answer 5

Answer №3

I recently faced this issue myself and found a helpful post on it: How to prevent event propagation from parent div to child div

Here is a suggested solution:

var parent = document.getElementsByClassName("parent")[0];
var child = document.getElementsByClassName("child")[0];

parent.addEventListener("click", function(e) {
  alert("you clicked parent"); 
  if (e.target !== this) {
    return;
  }

  e.stopPropagation();
});

child.addEventListener("click", function(e) {
  alert("you clicked child"); 
  if (e.target !== this) {
    return;
  }

  e.stopPropagation();
});

.parent {
  width: 500px;
  height: 500px;
  background-color: red;
}
.child {
  width: 200px;
  height: 200px; 
  background-color: blue;
}

<div class="parent">
  <div class="child">
    
  </div>
</div>

If you want better readability, consider using a script with onclick element properties like so:

<tr onclick="changeLocation(e, 'details.php?id=123')"><td><img /></td><td>text</td><td>price<br>
  <form method="post">
    <input type="number" name="size" value="1">
    <input type="submit" onclick="return confirm('Are you sure?');">
  </form>
</td></tr>

<script>
function changeLocation(e, reference) {
      if (e.target !== this) {
        return;
      }

      e.stopPropagation();

    window.parent.location.href=reference;
}
</script>

You can also create a propagation event function for better handling:

<tr onclick="stopProp(this); window.parent.location.href='details.php?id=123';"><td><img /></td><td>text</td><td>price<br>
  <form method="post">
    <input type="number" name="size" value="1">
    <input type="submit" onclick="stopProp(this); return confirm('Are you sure?');">
  </form>
</td></tr>

<script>
function stopProp(e) {
      if (e.target !== this) {
        return;
      }

      e.stopPropagation();
}
</script>

Answer 6

I recently faced this issue myself and found a helpful post on it: How to prevent event propagation from parent div to child div

Here is a suggested solution:

var parent = document.getElementsByClassName("parent")[0];
var child = document.getElementsByClassName("child")[0];

parent.addEventListener("click", function(e) {
  alert("you clicked parent"); 
  if (e.target !== this) {
    return;
  }

  e.stopPropagation();
});

child.addEventListener("click", function(e) {
  alert("you clicked child"); 
  if (e.target !== this) {
    return;
  }

  e.stopPropagation();
});

.parent {
  width: 500px;
  height: 500px;
  background-color: red;
}
.child {
  width: 200px;
  height: 200px; 
  background-color: blue;
}

<div class="parent">
  <div class="child">
    
  </div>
</div>

If you want better readability, consider using a script with onclick element properties like so:

<tr onclick="changeLocation(e, 'details.php?id=123')"><td><img /></td><td>text</td><td>price<br>
  <form method="post">
    <input type="number" name="size" value="1">
    <input type="submit" onclick="return confirm('Are you sure?');">
  </form>
</td></tr>

<script>
function changeLocation(e, reference) {
      if (e.target !== this) {
        return;
      }

      e.stopPropagation();

    window.parent.location.href=reference;
}
</script>

You can also create a propagation event function for better handling:

<tr onclick="stopProp(this); window.parent.location.href='details.php?id=123';"><td><img /></td><td>text</td><td>price<br>
  <form method="post">
    <input type="number" name="size" value="1">
    <input type="submit" onclick="stopProp(this); return confirm('Are you sure?');">
  </form>
</td></tr>

<script>
function stopProp(e) {
      if (e.target !== this) {
        return;
      }

      e.stopPropagation();
}
</script>

Answer 7

Answer №4

Appreciation to everyone - I successfully implemented the approach suggested by sanketd617 and it performed as expected - my apologies for the oversight with the placement of onsubmit - in my actual code, it belongs within the form tag - I manually typed it out instead of copying and pasting since my code is a bit intricate.

I also experimented with Aricha's code but unfortunately, it did not yield the desired outcome for me - it still redirected to the detail-page, perhaps I made an error there as well. Similar attempts in the past have also fallen short for me.

However, the straightforward solution utilizing onclick="event.stopPropagation()" within the input elements' onclick attribute escaped my notice until now. Much thanks for shedding light on this.

Answer 8

Appreciation to everyone - I successfully implemented the approach suggested by sanketd617 and it performed as expected - my apologies for the oversight with the placement of onsubmit - in my actual code, it belongs within the form tag - I manually typed it out instead of copying and pasting since my code is a bit intricate.

I also experimented with Aricha's code but unfortunately, it did not yield the desired outcome for me - it still redirected to the detail-page, perhaps I made an error there as well. Similar attempts in the past have also fallen short for me.

However, the straightforward solution utilizing onclick="event.stopPropagation()" within the input elements' onclick attribute escaped my notice until now. Much thanks for shedding light on this.

The onsubmit event in Javascript activates the parent's onclick event

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

A straightforward method of transmitting data from JavaScript to the Python back-end within a Streamlit application

Convert my information to an XML document

I am having trouble grasping certain syntax in JavaScript when it comes to using `${method_name}`

Console Error: Attempting to set the 'className' property of null object results in an

Where can I find the JavaScript code that controls the button function?

Error message stating 'compression is not defined' encountered while attempting to deploy a Node.js application on Heroku

Having Trouble Showing Loading Component on Next.js v13

What is the method for substituting one text with another using two-way data binding?

Utilizing C in WebAssembly to return string values

Dynamic value updates using jQuery input type formulas

Getting data from a latin1 (iso-8859-1) database using javascript/nodejs: Tips and Tricks

Issues arise when the Slick functionality fails to load following an ajax request

Ruby on Rails slider bar functionality

Styling Input elements with a unified border in Bootstrap

Leveraging the power of react routes for efficient navigation within a react-based application

The Art of Div Switching: Unveiling the Strategies

Count duplicated values in an array of objects using JavaScript ES6

Utilizing ng-style with a ForEach loop on an Object

Repairing a syntax error in a jQuery selector variable

What is the method for enlarging an element without regard to surrounding elements?