Normally I using something like:
var form = $('#contact-form');to set a var for a form object. However I would like the form id to be dynamic based on a PHP variable so I can use the same form for multiple purposes. I.e.
PHP:
<?php $form_id = '#contact-form'; ?>Form:
<form action="/" method="post" name="<?= $form_id; ?>" id="<?= $form_id; ?>">How do I set the var based on the above scenario. I tried:
var form = $("#<?= $form_id; ?>");but that is obviously not working
the code you have there should work.
Is your JS in an external file?
What does the code look like when you View Source (or inspect it in the browser’s dev tools)? That will show you what the browser received after PHP was done with it.
I would have thought that worked.
Otherwise, you can select the form based on its position on the page. If there’s just the one form, that’s simple:
const $form = $('form');
If there is more than one form, try using the :nth-of-type() selector.
Failing that, you could make your form ID start with something unique, then use the attribute starts with selector.
@m_hutley & @James_Hibbard. I added an alert like this:
[code]
alert( form );
[/code}
But then I get an an alert box with object OBJECT
That is because the jQuery function returns indeed an object; if you want some more useful information, log it to the console instead.
log it to console, and check the length of the array specifically, it should be 1. If it’s 0, your selector missed.
I tried what you wanted to do “modify id of the form to use it for different purposes.”
Click run and then click on Change id button. Later change at code side setAttr…(‘id’, ‘…blablabla…’); Then click RUN then Change id button again that will not show any message.
<!DOCTYPE html>
<html>
<head>
<script>
function changeName() {
document.getElementById("myForm").setAttribute("id", "myForm");
alert(document.forms["myForm"].getAttribute('id'));
}
</script>
</head>
<body>
<form id="myForm" action="/action_page.php" method="get">
First name: <input type="text" id="fname"><br>
Last name: <input type="text" id="lname"><br><br>
<input type="button" onclick="changeName()" value="Send form data!">
</form>
<p>default name is myForm it becomes unusable if you change it to differentForm</p>
</body>
</html>
If I change in this code form id to something else it becomes unusable. I think name should be what it is at page load, modification is not allowed. Still, you can set all id data with php at page load once.
Please accept my apologies if I got you wrong.
I recommend that you don’t have PHP create custom javascript code, and instead use a class name on each form that is to be accessed by the same code.
@m_hutley & @James_Hibbard. That is indeed working. Thank you both for the input.
@gomidas95 That was not where I was after, but apologies accepted 
@Paul_Wilkins. I am not sure if I understand what you mean?
Can you give more details on the sort of flexibility that you’re trying to achieve, with two different types of forms for example.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.