Using javascript while clicking a hyperlink

Question

i have a settings page on my user profile system.

The HTML (settings.php)

<div id="set-list">
  <div class="set-cont" action="account">
  Account Settings
  </div>
  <div class="set-cont" action="privacy">
  Privacy Settings  
  </div>
</div>
<div id="set-show">
           //account settings html form
</div>

JQUERY

$('.set-cont').click(function(){
    var action = $(this).attr('action');

    $.get('getSettingsHTML.php',{
          action : action
    },function(data){
       $('#set-show').html(data.output);
    },'json');
});

PHP(getSettingsHTML.php)

    <?php
    $output="";
  switch($_GET['action']){
    case 'account':
          $output .='<input type="text" id="firstname">"';
            //blah blah many stuffs
    break;
    case 'privacy':
       $output .='<input type="text" id="email" >';
    break;
    }
    echo json_encode(array("output"=>$output));

    ?>

when the page loads Accont setting's html form is loaded from default. when anyone clicks a .set-cont its action attribute it taken and hence the appropriate form is loaded from php.

Now if i want to load Privacy Settings I have to click the one in .set-cont.

If i have a link like <a href="settings.php">Privacy Settings</a>. The account settings will be loaded and you have to click on Privacy Settings menu to load the form.

Is there any way i can do $('.set-cont[action="privacy"]').trigger('click') right from the a element or maybe any alternative ?

Answer 1

It seems like you are trying to link to settings.php from another page and when the page loads you want to be able to specify which form is loaded, either Privacy or Account settings.

If so you could do something like the following:

<a href="settings.php#privacy">Privacy Settings</a>

and then on Settings.php you have the following jQuery:

$(function() {
   if (window.location.hash) {
       var action = window.location.hash.substring(1);
       loadForm(action);
   }
});

$('.set-cont').click(function() {
    var action = $(this).attr('action');
    loadForm(action);
});

function loadForm(action) {
    $.get('getSettingsHTML.php',{
        action : action
    },function(data){
        $('#set-show').html(data.output);
    },'json');
}

Answer 2

Programmatically clicking a link is not supported. What you could do is when the link is clicked, create a form and submit it:

HTML

<div class="set-cont" action="privacy">
    <a href="settings.php">Privacy Settings</a>
</div>

jQuery

$('.set-cont > a').on("click", function()
{
    var action = $(this).parent("div").attr('action'),
        href = $(this).attr('href');

    var form = $("<form></form>");
    form.attr(
    {
        id     : "newform",
        action : href + "?action=" + action,
        method : "GET",
        target : "_blank"        // Eventually open in new window/tab
    });

    $("body").append(form);
    $("#newform").submit();
    $("#newform").remove();
});

Answer 3

seetting.php->
<div id="set-list">
  <div class="set-cont" action="account">
 <form name="form" class="form" action="url1.php" method="post" id='account_form'>
          <input type="hidden" name="name1" >
           <input type="hidden" name="name2" >
     </form>
  </div>
  <div class="set-cont" action="privacy">
    <form name="form" class="form" action="url2.php" method="post" id='privacy_form'>
          <input type="hidden" name="name1" >
           <input type="hidden" name="name2" >
     </form>
  </div>
</div>
<div id="set-show">
           //account settings html form
</div>
jquery->
$('.set-cont').on("click", function()
{
    var action = $(this).attr('action');

    if(action=="privacy")
    {
    var formid='privacy_form';
    }
    else if(action=="account")
    {
    var formid='account_form';
    }
    $("#"+formid).submit();

});