My code caters to both mobile and desktop versions, with the same elements in the FORM. However, only one block of code is visible at a time depending on the screen size, with one set to display: none.
<div id="desktop">
<div id="content">
<form method="post" name="form_name_desktop" id="id_form_desktop">
<input type="email" name="name_email_desktop" id="id_email_desktop">
<input type="hidden" name="hidden_input_desktop" value="submit_sub_desktop">
<a href="#" id="btnSub_desktop">SAVE</a>
</form>
</div>
</div>
<div id="mobile">
<div id="content">
<form method="post" name="form_name_mobile" id="id_form_mobile">
<input type="email" name="name_email_mobile" id="id_email_mobile">
<input type="hidden" name="hidden_input_mobile" value="submit_sub_mobile">
<a href="#" id="btnSub_mobile">SAVE</a>
</form>
</div>
</div>
//some JQ code
$("#btnSub").click(function(e) {
e.preventDefault();
if ($("#id_email").val() == "") {}
});
//some PHP code
if (isset($_POST["hidden_input"]) == "submit_sub") {}
Although the above code appears identical for both desktop and mobile views, the elements are actually arranged differently. My question is: should I use the same naming convention for IDs and NAMES or should I differentiate them even though they are displayed individually?
The best approach would be to rewrite the example above with correct naming conventions.I'm asking this question because I'm encountering issues running my existing code. I am unsure whether I need to make wholesale changes or just adjust a few specific aspects. I want to understand the main rules to follow in these situations.