Is there a way to change the content of a form with Javascript?
I have a series of paypal buttons, but want the user to be able to shop in CAD or USD.
The form looks something like this:
<form onsubmit="return false;">
<input name="amount" value="6.99" type="hidden" />
<input name="currency_code" value="CAD" type="hidden" />
</form>
I need to change the value="CAD' to value="USD"
Is there any way I could have a button or some sort of 'toggle' on the site whereby users can change the currency? It should happen to each product.
I had someone implement simple cart, but they are no longer available
is there a better way to do this?( I though this might be simplest) But perhaps it should be done during checkout somehow? I presume this would be more complicated.
thanks in advance and hope I have been clear! let me know if you need more information.
my site is www.bodesi.com (if that helps)
You can do it via javascript DOM.
Example: <input type="button" onclick="document.getElementsByName('currency_code')[0].value='USD';">
You can do this easily with jQuery, which it looks like your site already includes.
Here's one way to do it: http://jsfiddle.net/x7LDN/
$(function() {
$('#change_currency').click(function(){
$('input[name="currency_code"]').val('USD');
});
});
If I have understood you requirement properly ,
Ask user somewhere for the currency
<select name = "currency" id='currency' >
<option value='USD'>USD</option>
<option value='CAD'>CAD</option>
</select>
And later use the javascript on the same page to change the value of the paypal button
If you are using jquery:
(function($){
$("#currency").change(function(){
$('input[name="currency_code"]').val($(this).val());
});
})(jQuery);
If you want to use clean javascript then
document.getElementById('currency').onchange = function(){
document.getElementsByName('currency_code')[0].value= this.value;
}
Related
I am trying to take the inputs the customer selects, and add them to hidden fields, to then be able to display them on the cart page.
<form method="post" action="https://omgneonsigns.com/cart/?add-to-cart=5825" name="contentForm" runat="server">
Here is the code for my form, and of course I have my fields setup this way:
<input type="hidden" id="hiddenText" name="hiddenText" value="">
So, what is the next step? I am able to alert the values back to me, so I know they are being held/stored... but I'm not sure how to take them with me to the next page and alert them there?
Firstly, you need to select the hidden input. JavaScript way:
<input type="hidden" id="hiddenText" name="hiddenText" value="" onchange="myFunction(this.value)">
<script>
function myFunction(val) {
let hidden_val = val
// now store it using `session`
}
</script>
Basically you can do it in many ways:
Use JavaScript session. link: https://www.w3schools.com/jsref/prop_win_sessionstorage.asp
Use php session. link:
https://www.w3schools.com/php/php_sessions.asp
Then get the value in the next page from session.
I am trying to repair an existing web form that submits a text area's contents to an external site's shopping cart service. The textarea is named "adtext" and upon submission it runs a few different scripts to calculate pricing, etc. It ultimately re-writes the ad content into a value named op31 (which is recognized by the shopping cart). The cart system recently got updated and it broke our script to convert line breaks in this text area into something that would be retained in that other site. I've tried looking at other sites, but it's over my head. I'm not particularly good at this stuff. I'm sure this isn't, and likely wasn't the best way to do it. I've seen CSS suggestions but don't understand it enough to actually implement them.
I've stripped out as much code as I comfortably could to clean it up, but still retain the issue. I'm wondering if someone could assist me with updating this function into something that would convert the "adtext" textarea's line breaks into something usable when written to "op31".
<script language="JavaScript" type="text/JavaScript">
function ConvertCarriageReturns(textarea, strReplace){
document.form.op31.value = escape(textarea.value)
for(i=0;i<document.form.op31.value.length;i++){
if(document.form.op31.value.indexOf("%0D%0A") > -1 ){
document.form.op31.value = document.form.op31.value.replace("%0D%0A",strReplace)
}
}
document.form.op31.value = unescape(document.form.op31.value)}
</script>
<form
action="https://(cart's url)/addtocart.aspx"
method="post"
name="form">
<textarea name="adtext" rows="12"></textarea>
<input alt="Add To Cart" name="add"
onclick="ConvertCarriageReturns(this.form.adtext,'<br>');
return checkwords(this)" src="https://....Add-To-Cart.gif"
type="image" />
<input name="item" type="hidden" value="(misc cart parameters" />
<input name="op31" readonly="readonly" type="hidden" />
</form>
You can use this native PHP function called nl2br
Like this:
$text = nl2br(this.form.adtext);
How do I access hidden fields in angular? I have an app, where I want to submit a form for each of items in the list. The form is simple - it has submit button and a hidden field holding the ID value. But it does not work. The value is empty.
I updated the default angular example to display the situation - the todo text is in hidden field.
http://jsfiddle.net/tomasfejfar/yFrze/
If you don't want to hardcode anything in your javascript file, you can either load it via AJAX, or do:
<input type="hidden" name="value" ng-init="model.value=1" value="1">
this way, you can keep the form functionality with JS off, and still use the hidden field in AngularJS
If you want to pass the ID from the ng-repeat to your code, you don't have to use a hidden field. Here's what I did:
For example, let's say I'm looping through a collection of movies, and when you click the "read more" link it will pass your ID to your JS code:
<ul>
<li ng-repeat="movie in movies">
{{movie.id}} {{movie.title}} read more
</li>
</ul>
Then in your JS code, you can get the ID like this:
$scope.movieDetails = function (movie) {
var movieID = movie.id;
}
In your simpler fiddle, the problem can be fixed by using ng-init or setting an initial value in the controller. The value attribute won't effect the ng-model.
http://jsfiddle.net/andytjoslin/DkMyP/2/
Also, your initial example (http://jsfiddle.net/tomasfejfar/yFrze/) works for me in its current state on Chrome 15/Windows 7.
You can do something like this.
It is a dirty trick, but it works (like most dirty tricks ;-)
You just use the form name as Your hidden field
and always give the form the id "form"
<!doctype html><html ng-app><head>
<script src="angular-1.0.1.min.js"></script>
<script>
function FormController($scope) {
$scope.processForm = function() {alert("processForm() called.");
$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("form").name;}
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
};
}
</script></head><body>
<div ng-controller="FormController">
<form name="YourHiddenValueHere" id="form">
<input type="text" ng-model="formData.foo" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
</div></body></html>
This allows You to use ONE Controller for ALL forms and send
them to ONE server script.
The script than distinguishes by the
form name (formData.foo) and knows what to do.
The hidden field names the operation in this scenario.
Voila - You have a complete application with as
many forms You want and one server script
and one FormController for all of them.
Simpler:
<input type="hidden" name="livraisonID" value="{{livraison.id}}"/>
It works!
Use ng-binding="{{employee.data}}". It will work properly.
I have to correct (improve) myself:
You can do it more elegantly:
<form>
<input type="text" ng-model="formData.foo" />
<input type="hidden" id="bar" value="YourHiddenValue" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
and then in the JavaScript controller:
$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("bar").value;}
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
So you can have as many hidden fields as you like.
i would like to create two buttons, one where the user can press it and then appears a drop drown and a input text field and another to remove this one, if the user wishes.
I already searched it in Google but can't find it.
Best regards,
Valter Henrique.
[working demo here: http://jsfiddle.net/GNnSw/1/][1]
your html
<div id="box" style="display:none;">
<select>
<option value="test">Test</option>
</select>
<input type="text" value="" id="text1" />
<input type="text" value="" id="text2" />
</div>
<input type="button" value="show" id="show" />
<input type="button" value="hide" id="hide" />
in jQuery:
$('#show').live('click', function(){
$('#box').show();
});
$('#hide').live('click', function(){
$('#box').hide();
});
http://jsfiddle.net/GNnSw/4/
using jquery it would take something like:
<button onclick="$('form').show();">press it</button>
<form>
//input elements
</form>
Search harder in google btw.
Do it with jQuery.
HTML
<button id="buttonid" value="Click on me!">
jQuery
$("#buttonid").click(function(){
var $input = '<input id="inputid" type="text" value="value">';
// make the input field
var $select = '<select id="selectid"></select>';
// make the select
var $opt1 = '<option name="one">one</option>';
var $opt2 = '<option name="two">two</option>';
// make two options
$select.append($opt1).append($opt2);
// append to select the options
$(this).after('<form action="url" method="POST"></form>').append($input).append($select);
// append input and the select after the button
});
Oh yeah. :) Btw you need jquery library.
Create a "placeholder" for your fields:
<div id="placeholder"></div>
Add the buttons / links:
<a onClick="add()">Add Form</a><a onClick="remove()">Remove Form</a>
And this to your javascript-file:
function add() {
document.getElementById('placeholder').innerHTML = "Code for your form...";
}
function remove() {
document.getElementById('placeholder').innerHTML = "";
}
I guess the best way of achieving flexible and user friendly HTML layout it by using external JavaScript library, such as jQuery or mootools. The reason is - in traditional web frameworks after you send HTML content to web browser, server cannot manipulate with it. Also, I guess good principle is to use Java only for serving content, and using client-side framework to do all the magic with User Interface.
Moreover, You will find plenty of examples how to work with those libraries like this one.
If you would really like to stick to plain Java, since you might know anything about JavaScript, I suggest checking out Google Web Toolkit and Vaadin. You can write Java code almost without any restrictions, and it will be "converted" (compiled) to JavaScript automatically. But that decision should be considered deeply, since learning GWT or Vaading might be more time consuming and not always applicable.
I want to create a pop-up or Javascript item that allows users to accept the terms of completing an offer for me. Once they have accepted the terms, I would like that offer that they agreed to do to go under the account in a section or tabled labeled "Offers".
Please advise on how to code this.
You can use javascripts confirm. It will create a dialogue which will allow a user to press "Ok" or "Cancel". You can implement the following:
<html>
<head>
<script type="text/javascript">
<!--
function confirmation() {
var answer = confirm("Do you agree to the terms of Service?")
if (answer){
window.location = "http://yoursite.com/offers.html";
}
else{
alert("You must agree to continue")
}
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onclick="confirmation()" value="Continue">
</form>
</body>
</html>
If you want this dialogue to appear when the page loads you can put onLoad="confirmation()" in the body tag. And alternative to a javascript confirmation box would be something along the lines of the following, I know some people really don't like popups and confirmations:
<input type="button" onclick="window.location='http://yoursite.com/offers.html';" value="Agree">
<input type="button" onclick="alert('You must agree to the terms of service');" value="Disagree">
Instead of an intrusive pop-up, why not have a checkbox that the user has to check in order to continue? If the checkbox isn't checked, then the form either won't submit or an error message could appear, telling the user (s)he didn't accept the terms.
Unless there's a specific reason you need to use JavaScript, I would try to stay away from JavaScript for functionality like this, especially considering that users can just turn JavaScript off.
For example (using JavaScript to prevent the form from submitting):
<form name="offerForm" action="/offer" method="post" onsubmit="return this.elements['agreeTerms'].checked;">
<!-- the rest of your form goes here -->
<input type="checkbox" name="agreeTerms" id="agreeTerms" value="1" /> <label for="agreeTerms">I agree to the terms.</label><br />
<input type="submit" value="Submit Offer Form" />
</form>
On the server side, I'm assuming you have a relational database behind everything. Let's say you have a users table, an offers table, and a users_offers bridge table to denote which users have accepted which offers.
Using the example above, you would only add a new record to the users_offers bridge table if agreeTerms came back with a value of "1". If the checkbox isn't checked, then agreeTerms won't have a value.
If you could edit your question with specifics concerning your situation (server-side language you use, basic database table information, etc.), I'll be able to fill in some more details.