CODEWITHSUNDEEP
javascripthtmlforms
user2408578
user2408578

Reputation: 464

submitting a form with link

I have following form structure

<form action="{Basket-Addproduct}" method="post" id="items-form">
    <button class="button-text button-gray-custom" type="submit" value="Submit" name="{dynamically generated name}"><span>Submit</span></button>
</form>

here "dynamically generated name" is the key field which tells which element or product to submit.. I want it to convert it into link, I have tried following

<a href="#" onclick="document.getElementById('items-form').submit()" name="{dynamically generated name}">Add This </a>

Its getting submitted but not able to add the product... Its expecting the name parameter also to be passed so it knows which product to add... Stuck....:( Any solution appreciated...

Upvotes: 0

Views: 82

Answers (3)

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Your code should work, I have created an example for you to test, here it is: http://jsfiddle.net/afzaal_ahmad_zeeshan/yFWzE/

<form id="form">
  <input type="text" name="something" id="something" />
</form>
<a href="#" onclick="document.getElementById('form').submit();">Submit</a>

By using this you will submit the form using the id of it. And other user told you to use jQuery, which I am afraid you don't want to. In jQuery you use .preventDefault but if you want to stick to the simple JS then you will be using href="#" which will automatically prevent any anchor tag execution.

And the result of the request can be checked, which sadly is an error. But it makes sure that the request has been sent to the server.

Then you can test the methods and other type of executions by having some if else blocks as

if(condition == true) {
  // if post
} else {
  // if get
}

The parameter might be mis handled on the server side, because when the form is submitted you need to take out the data from the QueryString (the request is GET). So, you need to check that, or if that's not the issue then make sure you're pointing the element well. Otherwise if there is no such element, nothing will be sent.

I am not sure, which language you're using but here is the code for ASP.NET

var value = Request.QueryString["something"];

PHP version is already present above. That all depends on the parameters you send with the request. You are more likely to convert the code to a function. Such as

<a href="#" onclick="submit()">Submit</a>

And the function

function submit() {
  // create variable
  var value = document.getElementById("something").value;\
  // now submit the form and all that other bla bla, which 
  // you want to be process, 
}

If you find this one tricky, using jQuery as

var values = $('form').serialize();

will be easy. This will create a string of the form and will send it with the request.

Upvotes: 0

Aniket
Aniket

Reputation: 9758

You can use jQuery to do this clean and easy.

So, here's your link:

<a id="form-submit-btn" href="#" name="{dynamically generated name}">Add This</a>

And your form:

<form action="{Basket-Addproduct}" method="post" id="items-form">
    <!-- form contents -->
</form>

Now write a JavaScript which submits your form data on a button click:

$('#form-submit-btn').click(function(e) {
  e.preventDefault();
  var $form = $('#items-form');
  $.post($form.attr('action'), $form.serialize(), function(data){
    // do something with the data
  });
});

Upvotes: 0

NotJustin
NotJustin

Reputation: 529

you should have <input type="submit".

There is no need to do JavaScript.

Just remove JS and then have as many <input type="submit" buttons as you want. The GET/POST should have the key/value you look for.

E.g.

<input type="submit" name="item1" value="submit" />

when you click it, the recipient receives (sorry PHP used here):

$_GET['item1'] = submit

and other submits do not have value.

Upvotes: 2

Related Questions