CODEWITHSUNDEEP
javascriptformsonclick
skylab
skylab

Reputation: 89

passing variables to a form using onclick

I'm new to javascript and am trying to start somewhat simple. Is it possible to create a function that contains a form object that can be populated by an onclick event?

Right now I have a page with 7 buttons, each button is a submit for a separate form, they all link to the same php file on the backside of my site where they are processed. I would like to somehow create one single form, possibly in a javascript function, that would accept variables from the buttons when clicked and then submit the form to my php script. it will technically function the same as it does now with 7 different forms, one for each button, but will hopefully cut back on the code.

This example is only how I logically thought it might work from a couple of weeks searching around the internet and gathering bits from here and there, but in reality it is far from functional.

example:

<script type="text/javascript">

function form_variables(opt1,opt2,opt3){

   <form name='mySelectionForm' action='form.php?action=form_action' method='post' enctype='multipart/form-data'>
    <input type='hidden' name='number' value='" + opt1 + "' />
    <input type='hidden' name='id' value='" + opt2 + "' />
    <input type='hidden' name='option' value='" + opt3 + "' id='options' />

    </form>;

  formObject.submit();
}

Then this would be populated by an onclick event like this.

<a href="javascript: void(0);" onclick="form_variables('9','1','6');" title="submit_button1" value="Button 1" class="cssButton">My Selection</a>

Upvotes: 4

Views: 29361

Answers (4)

RobG
RobG

Reputation: 147403

If I understand you correctly, you have 7 forms with 7 buttons and want to use scripting so that when one of the forms is submitted, you'll copy the values to another form then submit that. I don't see how that will "cut down on the code".

Seems to me like it is increasing the amount of code - forms don't need any scripting at all. You could just use one form with 7 submit buttons, then sort things out on the sever based on the button that was clicked.

Edit

If you use a single form with multiple submit buttons like:

<form action="form.php?action=form_action">
  <input name="foo" value="bar">
  <input type="submit" value="Submit 1" name="Submit 1">
  <input type="submit" value="Submit 2" name="Submit 2">
</form>

then when the first submit is clicked the server will get:

...?foo=bar&Submit+1=Submit+1

and when the second button is clicked it will get:

...?foo=bar&Submit+2=Submit+2

so: one form, multiple submit buttons, no script, the server knows which one was clicked.

Of course you may want to use scripting to enhance the UI, but it isn't needed for the underlying functionality.

Upvotes: 0

Jacob
Jacob

Reputation: 78840

You're sort of on the right track. Rather than dynamically generating the form each time, your JavaScript could fill in the values of the hidden inputs and change the action of your form. So given this in your HTML:

<form name="mySelectionForm" id="mySelectionForm" action="form.php?action=form_action" method="post" enctype="multipart/form-data">
  <input type="hidden" name="number" value="" id="number" />
  <input type="hidden" name="id" value="" id="id" />
  <input type="hidden" name="option" value="" id="options" />
</form>

Your JavaScript could look like this:

function postForm(number, id, option, action) {
    var form = document.getElementById('mySelectionForm');
    form.setAttribute('action', 'form.php?action=' + action);
    document.getElementById('number').value = number;
    document.getElementById('id').value = id;
    document.getElementById('option').value = option;
    form.submit();
}

Upvotes: 4

Eric Witchin
Eric Witchin

Reputation: 574

Not to sure if i fully understand what you are trying to do. I think instead of making the form and submitting it every time you click one of your buttons can you just use this:

<script type="text/javascript">
    function form_variables(opt1,opt2,opt3){
        window.location('form.php?action=form_action&number='+opt1+'&id='+opt2+'&option='+opt3);
    }
</script>

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

Just make each link like this:

<a href="form.php?action=forum_action&id={ID}" class="cssButton">My Selection</a>

Replacing {ID} with a number.

Then in your PHP file, use:

<?php
switch($_GET['id']) {
    case 1:
        $var['number'] = 9;
        $var['id'] = 1;
        $var['option'] = 6;
        break;
    ...
}
?>

And so on for each case. This is a much better system, as it keeps your HTML tidy and removes the need for JavaScript.

Upvotes: 0

Related Questions