Javascript id as parameter in href

Question

Second image ,First image I have a set of links, which will open a pop-up form.
When the link is clicked,I want to send a parameter to the form and then use it on form submission.
I'm able to set the value to be passed as id of <a> tag. Can I send to further?

<div> <span>Chapter $i:</span>
  <a href='$viewlink '>View</a><span class='status'>Status:$status </span>
  <a href=$reqlink id=$i data-rel='popup' class='ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left'>Request Access</a></div><br/>";

<form method="post" action=" " id="myPopup" data-role="popup" style="padding:10px">

  <h3>Enter your details</h3>
  <input type="text" name="name" id="name" placeholder="Name" required>
  <input type="email" name="email" id="email" placeholder="Email" required>
  <input type="date" name="date" id="date" placeholder="Intended completion date" required>
  <input type="submit" data-inline="true" value="Submit" name='submit'>

</form>

Is it possible to do in javascript? How to do it?

have you tried pushing the data to a javascript array, then add that array as query string to the form action on submit...? you'd have to prevent sending the form first, and only explicitly send it once you have taken care of the query string... — benomatis, Feb 27 '16 at 14:15
@Dee try this one might help you http://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal — Paresh Gami, Feb 27 '16 at 14:17
Welcome to SO, use snipets only when you want to show full code that can run in the browser. use `{}` button or indent with 4 spaces if you want just show the code. — jcubic, Feb 27 '16 at 14:18

benomatis · Accepted Answer · 2016-02-27T15:22:51.723

2

Option #1:

Set up hidden inputs, and send the values to them when clicking the link. You can then get these on the other end where the form is sent.

(Note: in my code examples I'm explicitly using PHP as that's where you seem to have copied your code snipped from)

echo "<a href='$viewlink' onclick='$(\'#viewlink\').val(1);'>View</a><span class='status'>Status:$status </span>

<!-- Do the following inside the form -->

<input type='hidden' name='viewlink' id='viewlink' value='0' />";

And on the PHP receiving end you can do this:

if ($_POST['viewlink'] == 1) {
    // do stuff
}

Option #2:

Alternatively you could send the data to a javascript array, prevent posting on submit of the form, take care of adding the array to the form action as query string, then explicitly send the form.

echo "<a href='$viewlink' onclick='linkClicked('viewlink');'>View</a><span class='status'>Status:$status </span>

This is what you'd do in your javascript file:

var queryString = [];

function linkClicked (type) {
    queryString[type] = 1;
}

$("#myPopup").submit(function(event) {
    event.preventDefault();
    $(this).attr('action', $(location).attr('host') + $.param(queryString));
    $(this).submit();
});

And on the PHP receiving end you can do the following (note the $_POST from above has changed to $_GET):

if ($_GET['viewlink'] == 1) {
    // do stuff
}

edited Feb 27 '16 at 15:22

answered Feb 27 '16 at 14:18

benomatis

5,536
7
36
59

I'll try doing it..Thank you @webeno – Dee Feb 27 '16 at 14:22
@weebo, Please see my images I have attached now. I want to send the chapter number dynamically during form submission. – Dee Feb 27 '16 at 14:56
Thank you for your detailed answer. I'll try it out now. But is it the efficient way to do what I intend to do – Dee Feb 27 '16 at 14:58
depending on what you mean by efficiency ;) these are 2 ways, but there sure are more... – benomatis Feb 27 '16 at 15:23
let me know how the testing goes... ;) – benomatis Mar 01 '16 at 21:33
I tried option #1, setting hidden input. It worked perfect 100%. – Dee Mar 01 '16 at 23:46
well, if that's the case, you may want to accept my answer as the correct one, hey, maybe even vote up! ;) thanks! – benomatis Mar 02 '16 at 00:10

score 0 · Answer 2 · answered Feb 27 '16 at 14:44

try this..

<a id = 'yourid' class = 'mybtn'>click me..</a>

<form id = 'myform'>
  ....
</form>

Jquery

$(document).ready(function(){
    $('.mybtn').click(function(){
        var id = $(this).attr('id');
        var SubmitForm = $("#myform").serializeArray();
        $.post("somepage.php",
        {
         SubmitForm:SubmitForm,
         ID:id
        },
        function(res){
            alert(res);//your result..
        });
});

Javascript id as parameter in href

2 Answers2