How to POST HTML form using `id` instead of `name`

Question

This following code will get element by name, I\'m gonna change it to get element by ID, how to make it?

Answer 1

You can't do this,i've read somewhere that we can control element by only their name after HTML 4.01.

here, previous post also support it. previous post

But if , you really want to access it through id, then you have to use ajax call for sending data to server. In ajax call, you can access element by their Id.

Answer 2

By default, an HTML form submits values keyed on the name attribute of the element.

You can modify this behavior using JavaScript by writing a function that handles the onsubmit action of the form and performing the submit yourself.

1. When the user hits <input type="submit"> or otherwise submits the form, the submit event is triggered
2. If you have a JavaScript function set to handle onsubmit, it will be called at this point
3. Your function should then create an HTTP POST request to the desired server resource (i.e. the one specified in the action attribute of the form and containing the code in the question). The POST data sent with this request can be keyed on ids or any other identifier you wish to use.
4. Your function should then cancel the form submit that would otherwise be initiated by the browser (e.g. return false)

Answer 3

you cant not retrieve data in php via ID it works on name..so you neeed to change

PHP

<form method="POST" action="nextpage.php" name="myform" id="myform">
    <input type="text" id="rout_markers"  name="rout_markers"/>
    <input type="hidden" name="someNewName" id="someNewName" value="" />
    <input type="submit" id="send-btn"  class="button" value="SEND NOW" onclick="submitform()" />
</form>

jQuery

$("form").bind('submit',function(e){
  e.preventDefault();
  var hiddenData=$("input[name=rout_markers]").val();
  // or var hiddenData=jQuery('#rout_markers').val(); 
  $("input[type=hidden][name=someNewName]").val(hiddenData);  
});

nextpage.php

retrieve data below way

$_POST['someNewName'];

update

Set onclick=submitform() in submit button and also assign name and id attribute to form and write this

javascript

<script type="text/javascript">
    function submitform()
    {
        var hiddenData = document.getElementById('rout_markers').value;
        document.getElementById('someNewName').value = hiddenData;
        document.myform.submit();
    }
</script>

For more info, click getting values from ID instead of name