Is it possible to declare a var using document.write?

Forum Moderators: open

Message Too Old, No Replies

Is it possible to declare a var using document.write?

Gilead

8:02 pm on Jan 22, 2019 (gmt 0)

This is what I am trying to do. I have a dropdown menu. Based on what the user selects, I want to change two variables in a paypal button: name and value. I can get the selected index of the option, but I do not know how to declare the variable. If I were using php, I could simply echo it into the declaration, but I don't know if I can do it in js, jquery or ajax.
Can someone give me a hand?

Thanks!

lucy24

1:03 am on Jan 23, 2019 (gmt 0)

I don't think you actually mean “declare”, but I can’t figure out what you do mean. A snippet of the relevant code wouldn’t hurt.

NickMNS

2:28 am on Jan 23, 2019 (gmt 0)

I want to change two variables in a paypal button: name and value.

It is not clear as to what exactly your are trying to achieve. But I would be cautious about changing things that are not "yours" like the values that are part of a Paypal widget. It is very likely that Paypal has something in their T&Cs that prevents you from doing this. I have no experience with Paypal, so proceed with caution.

I can get the selected index of the option,

Based on what the user selects,

You can try something like this.


<html>
<body>
<select id="select-elem">
 <option>1</option>
 <option>2</option>
</select>
 
<button id="elem-id" name="old-name" value="old-value">
 Click Me!
</button>
<div>
Click button to see<br>
the name:
<span id=name-out>?</span><br>
and value:
<span id=value-out>?</span>
</div>
<script>
var elemToChange = document.querySelector('#elem-id'),
selectElem = document.querySelector('#select-elem');
selectElem.addEventListener('change', function(e){
if (selectElem.value == '2'){
// to change the elements "name" attribute
elemToChange.setAttribute("name", "new-elem-name"); 
// to change the value of the element
elemToChange.value = "new-value"; 
 } else {
elemToChange.setAttribute("name", "old-elem-name"); 
elemToChange.value = "old-value";
 }
})
</script>
</body>
</html>

Working demo: [jsfiddle.net...]

Gilead

4:33 pm on Jan 23, 2019 (gmt 0)

For some reason, the jsfiddle version works, but the copy/paste view in browser doesn't work.
Would this work inside a hidden element of a form so name would equal new-name? <hidden name="<span id=name-out>?</span>">

NickMNS

5:43 pm on Jan 23, 2019 (gmt 0)

Would this work inside a hidden element of a form

If your hidden input looks like this:


<input type="hidden" id="elem-id" name="old-name" value="old-value"/>

Note, I did not show the "span" tags in the code I posted in this thread because they are not needed. I only added them such that the changes would be visible to the user. This version of the code works just as well as the jsfiddle version but the changes are not obvious to the user unless you use "inspect element" to see the code in the browser.

Basically you can change any element like this, simply select the element with the correct id, and then use .setAttribute to change the name and .value to assign the new value.

Gilead

7:11 pm on Jan 23, 2019 (gmt 0)

Ok. I'm missing something here. Let me post some edited code, so you can tell me what I did here. Thanks in advance!


<script> Placed in the header section
  var elemToChange = document.querySelector('#elem-id'),
  selectElem = document.querySelector('#select-elem');
  selectElem.addEventListener('change', function(e){
  if (selectElem.value == '2')
  {
  // to change the elements "name" attribute
  elemToChange.setAttribute("name", "new-elem-name"); 
  // to change the value of the element
  elemToChange.value = "new-value"; 
   } else {
  elemToChange.setAttribute("name", "old-elem-name"); 
  elemToChange.value = "old-value";
   }
  })
 </script>

     <select name="Appetizers" id="select-elem">
             <option selected value="Appetizers">Appetizers</option>
             <option value="A1">Pak Mor(steamed butterflies)(9) $9</option>
             <option value="A2">Fresh Summer Rolls(2) $10</option> ETC...
      </select>
           Now for the paypal stuff
      ...
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" id="elem-id" value="name-out">
<input type="hidden" name="amount" id="elm-id" value="value-out">
<input type="hidden" name="currency_code" value="USD">
      ... </form>

It gives an error on the paypal side. Apparently no data was received.
I don't see an onchange handler, could that be part of the problem?

NickMNS

8:01 pm on Jan 23, 2019 (gmt 0)

The problem lies here:


<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" id="elem-id" value="name-out">
<input type="hidden" name="amount" id="elm-id" value="value-out">
<input type="hidden" name="currency_code" value="USD">

Each id must be unique and you must select each id individually. Moreover, what you appear to be doing is changing the value on two inputs not the name and value on a single input. To be clear, you have one input with the name "item_name" and the other with the name "amount" and you would like to change the value of each, is this correct?

What value do you want to change it to? The option value "Appetizers", "A1" or "A2" or a price?

Also are A1 and A2 appetizers? and you want to show appetizers as the default value, such that the users knows to select an appetizer? If so your "value" attribute for "appetizers" should left blank "" or set to "0" and the option should be set to selected and disabled. This would show the option as the default but would prevent the user from selecting it.

Gilead

4:50 pm on Jan 24, 2019 (gmt 0)

The item_name needs to be the selection the user made, like Pad Thai.
The price needs to be whatever the price is: $9.

The other issue is that there are multiple drop downs. One for Apps, one for salads, one for dinner, one for lunch, etc. How can I set up the ajax code to load the different php functions to get the right data to the right place.
I see you are also saying I need to change the value to the text of what it is supposed to be. Correct?

NickMNS

10:09 pm on Jan 24, 2019 (gmt 0)

One more question, why do you need to do this in this manner, the hidden input serves no apparent purpose? Why don't you just submit your forms normally and then do what ever you need to do with the hidden inputs server side? I assume that you are sending this data to paypal, so make the request to paypal from the server and not the client, then return the result back to the client.

lucy24

10:21 pm on Jan 24, 2019 (gmt 0)

Each id must be unique and you must select each id individually.

And, conversely, the “name” attribute is only meaningful if you’ve got a group of selectors with the same name and you need to cycle through all of them, for example in a group of radio buttons.

Gilead

4:34 pm on Jan 30, 2019 (gmt 0)

@NickMNS The client is using paypal for a shopping cart and I didn't want to have to make buttons for each dish, but that's what I ended up doing.

Gilead

4:35 pm on Jan 30, 2019 (gmt 0)

Thanks Everyone!