Pass ID attribute of hyperlink to form when submitting form via clicking link

Issue

Taking the following examples:

<ul>
    <li><a href="go.php?u=word.other" id="word.other">word other</a></li>
    <li><a href="go.php?u=cat.dog" id="cat.dog">cat dog</a></li>
    <li><a href="go.php?u=tree.leaf" id="tree.leaf">tree leaf</a></li>
</ul>

I am trying to work out how to change the hyperlinks so that instead of straight links to go.php, clicking the link submits a form.

I tried this, but it's pretty clunky as it hard-codes a form next in each list-item:

<ul>
    <li><a href="go.php?u=gnaw.bouncy"d>gnawbouncy</a> <form action="go.php" method="post"><input type="hidden" name="u" value="gnaw.bouncy"><input type="submit"></form></li>
    <li><a href="go.php?u=sledder.slothful">sledderslothful</a> <form action="go.php" method="post"><input type="hidden" name="u" value="sledder.slothful"><input type="submit"></form></li>
    <li><a href="go.php?u=intrepid.shade">intrepidshade</a> <form action="go.php" method="post"><input type="hidden" name="u" value="intrepid.shade"><input type="submit"></form></li>
</ul>

My next thought was to use javascript to submit a form using a hyperlink instead.

However - while I have seen routes to submit a forum using a link - e.g. using jQuery:

https://www.tutorialspoint.com/How-to-submit-a-form-using-jQuery-click-event

That only works when one link is used to submit the form.

I then tried this:

var lists = document.querySelectorAll('.test');
if (lists.length) {
    lists.forEach(list => {
        list.addEventListener('click', e => {
            if (!e.target.id) return;
            var id = e.target.id; // this is the id from the link
            console.log(id);
            e.preventDefault();
            // $("#testing").submit();
        });
    });
}

<div class="test">
            
    <ul>
        <li><a href="#" id="word.other">word.other</a></li>
        <li><a href="#" id="cat.dog">cat.dog</a></li>
        <li><a href="#" id="tree.leaf">tree.leaf</a></li>           
    </ul>

</div>          

<form action="go.php" method="post" name="testing" id="testing"><input type="hidden" name="u"></form>

I can see that clicking one of the list-item links is picked up by the JS as the console.log fires and displays the ID of the link.

However - how can I achieve the result that clicking on the link submits the form and passes the ID attribute of the clicked link to the go.php page via the un hidden form attribute?

Solution

You could use some Javascript to get the Form, then set the .value of the only child to e.target.id and then call submit() on the form to run it.

var lists = document.querySelectorAll('.test');
if (lists.length) {
    lists.forEach(list => {
        list.addEventListener('click', e => {
            if (!e.target.id) return;
            var id = e.target.id; // this is the id from the link
            console.log(id);
            e.preventDefault();
            
            const f = document.querySelector('form');
            f.children[0].value = e.target.id;
            f.submit();
            
            // Or a saver way if there are more elements in the Form
            // f.querySelector('input[name="u"]').value = e.target.id;
        });
    });
}

<div class="test">
            
    <ul>
        <li><a href="#" id="word.other">word.other</a></li>
        <li><a href="#" id="cat.dog">cat.dog</a></li>
        <li><a href="#" id="tree.leaf">tree.leaf</a></li>           
    </ul>

</div>          

<form action="go.php" method="post" name="testing" id="testing"><input type="hidden" name="u"></form>

Answered By - 0stone0