Javascript: how to determine if the current page has a form with a specific name and input

Question

I have a form that looks like

<form action="/aa/bbcc" method="post" id="Form1" accept-charset="UTF-8">
    <input type="hidden" name="somename" value="somevalue" />
    ... other stuff
</form>

In general $(document).ready(function(), which is divided between several pages, I want to determine if I am on a page that has a form with the following characteristics

• action = "/ aa // bbcc" and id = "Form1"
• input with name = "somename" and value = "somevalue"

How to do it?

The page has access to jquery, if necessary. Without jquery is fine too.

Answer 1

, node 0. , "somename", , 'SomeValue.

   if ($('#Form1[action="/aa/bbcc"]').length > 0 && $('#Form1').has("input[name='somename']") &&
    $("#Form1 input[name='somename']").val() === "somevalue"){
       console.log('found');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/aa/bbcc" method="post" id="Form1" accept-charset="UTF-8">
<input type="hidden" name="somename" value="somevalue" />
... other stuff
</form>

Answer 2

$(document).ready(function() {
  function isFormPresent() {
    return !!$("form#Form1[action='/aa/bbcc'] input[name='somename'][value='somevalue']").length
  }
  console.log(isFormPresent());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/aa/bbcc" method="post" id="Form1" accept-charset="UTF-8">
  <input type="hidden" name="somename" value="somevalue" />
</form>

Answer 3

Try in the selector

For a single line

$(document).ready(function() {
  if ($('form[action="/aa/bbcc"]').find('input[name="somename"][value="somevalue"]').length > 0) {
    console.log('ok')
  } else {
    console.log('not ok')
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/aa/bbcc" method="post" id="Form1" accept-charset="UTF-8">
  <input type="hidden" name="somename" value="somevalue" />
</form>

Run code

Split up

$(document).ready(function() {
  if ($('form[action="/aa/bbcc"]').length > 0) {
    console.log('action ok')
  }
  if ($('form[action="/aa/bbcc"]').find('input[name="somename"]').length > 0) {
    console.log('input name ok')
  }
  if ($('form[action="/aa/bbcc"]').find('input[value="somevalue"]').length > 0) {
    console.log('input value ok')
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/aa/bbcc" method="post" id="Form1" accept-charset="UTF-8">
  <input type="hidden" name="somename" value="somevalue" />

</form>

Run code

Answer 4

Check out the following example.

if (document.querySelector("#Form1") && (document.getElementById("Form1").getAttribute("action") == '/aa/bbcc')) {

  var elem = document.getElementById("Form1").children[0];
  if (elem.getAttribute('name') == 'somename' && elem.getAttribute('value') == 'somevalue') {
    // code to exceute
    console.log('in result');
  }

}

<form action="/aa/bbcc" method="post" id="Form1" accept-charset="UTF-8">
  <input type="hidden" name="somename" value="somevalue" /> ... other stuff
</form>

Run code