Pass variable to HTML form Javascript

Question

Please excuse my inexperience as I am not a programmer just someone who dabbles at trying to make something work. I'm not sure of the correct terminology and complicated explanations will go straight over my head!

In essence I am trying to get part of the URL of a web page passed to a simple Form that is linked to a shopping cart. i.e. how do I get the filename into the form where I have xxxxxxx. Is it possible in Javascript?

<script type="text/javascript">
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
document.write (filename);

</script>
<form action="http://www.mywebspace.com/cf/add.cfm" method="post">
<input type="hidden" name="userid" value="12345678">
<input type="hidden" name="product" value="xxxxxxx">
<input type="hidden" name="price" value="5.00">
<input type="Submit" value="Buy now!">
</form>

Building a shopping cart is not an easy endeavor. If you can't figure out how to use Javascript to copy a url into an input value then you need to read up and learn some more first. Please. — TheZ
– TheZ, Commented Jun 28, 2012 at 20:29
I'm not building a shopping cart I'm trying to integrate Buy now buttons from web pages produced by one application into an existing online shopping cart. — John Burton
– John Burton, Commented Jun 28, 2012 at 21:30

Alex · Accepted Answer · 2012-06-28 20:36:50Z

2

I've provided a snippet code that will work with your current HTML structure. Though I do suggest you give the product field an id to prevent the necessity to loop and search elements:

var url = window.location.pathname,
    filename = url.substring(url.lastIndexOf('/')+1);
    fields = document.getElementsByTagName('input');

for(var i = 0; i < fields.length; i++){
    if(fields[i].name == 'product') {
        fields[i].value = filename;
        break;
    }
}

edited Jun 28, 2012 at 20:36

answered Jun 28, 2012 at 20:30

Alex

35.5k5 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Burton Over a year ago

Thanks for the help and code. I'm now off to try and see if I can make this work. Your help is appreciated.

Ian Bishop · Accepted Answer · 2012-06-28 22:59:25Z

1

If the form only exists once on a given page, this is an easy solution:

Change it to be:

<input type="hidden" id="productField" name="product" value="xxxxxxx">

In your javascript,

document.getElementById('productField').value = filename;

edited Jun 28, 2012 at 22:59

answered Jun 28, 2012 at 20:30

Ian Bishop

5,2153 gold badges28 silver badges37 bronze badges

1 Comment

John Burton Over a year ago

As previously thanks for the help and code. I'm now off to try and see if I can make this work. Your help is appreciated.

FlavorScape · Accepted Answer · 2012-06-28 20:29:52Z

0

Yes this is possible.

Instead of doing document.write you need to update the form. Assuming your filename value is currently correct:

 //js
 document.getElementById( "name-of-file").value = filename;

 <!- html -->

... ...

answered Jun 28, 2012 at 20:29

FlavorScape

14.5k13 gold badges79 silver badges124 bronze badges

1 Comment

John Burton Over a year ago

Again thanks for the help and code. I'm now off to try and see if I can make this work. Your help is appreciated.

Collectives™ on Stack Overflow

Pass variable to HTML form Javascript

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related