Change option value into href? - javascript

Hi I downloaded some html template which I am trying to readjust and I have some code form like this, is it possible that I can change the option "value" into "href" so when client select lets say "Standard Access" and click on the button Buy Now to redirect to the paypal lets say?
Here is the code :
<div class="modal-body">
<form method="POST" action="#">
<div class="form-group">
<input type="text" class="form-control" name="your-name" placeholder="Your Name">
</div>
<div class="form-group">
<input type="text" class="form-control" name="your-email" placeholder="Your Email">
</div>
<div class="form-group">
<select id="ticket-type" name="ticket-type" class="form-control" >
<option value="">-- Select Your Ticket Type --</option>
<option value="standard-access">Standard Access</option>
<option value="pro-access">Pro Access</option>
<option value="premium-access">Premium Access</option>
</select>
</div>
<div class="text-center">
<button type="submit" class="btn">Buy Now</button>
</div>
</form>
</div>


Here you have some example. Probably it's possible to make it better, but I don't know the context.
$('#confirmButton').on('click', function() {
const href = $('#redirect').val();
window.location.href = href;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="redirect">
<option value="" disabled selected>-- Select Your Ticket Type --</option>
<option value="https://www.google.com">Google</option>
<option value="https://stackoverflow.com">Stackoverflow</option>
</select>
<button type="button" id="confirmButton">Confirm</button>


You can add onsubmit listener to your form.
<form method="POST" action="#" onsubmit="myFunction()">...
</form>
<script>
myFunction(){
var x = document.getElementById("ticket-type").value;
if (x== 'standard-access') {window.location.href = "http://www.URL1.html";}
else if (x== 'pro-access') {window.location.href = "http://www.URL2.html";}
return false; // to prevent default submit
}
</script>

Related

How can I add a function to each option in my form? (HTML, JS)

<div class="form-group mycustom-form-group mt-3">
<label for="exampleFormControlSelect1">What would you like to do:</label>
<form action="" method="POST" id="form1" onclick="mySubmit()">
<select class="form-control" id="exampleFormControlSelect1" >
<option value="1">Image Rollover</option>
<option value="2">Image Preview</option>
<option value="3">Image Slideshow</option>
</select>
<input type="submit" value = "Submit">
In my form when I select an option and submit, I would each option to allow me to do what the option entails,(open an image, create a document.write(),make an image rollover, etc). How can I create a function in each option when I select it and submit? (If my question requires more clarification, please let me know)

you need to add onchange event in select and do whatever you want to do on change of value.
<div class="form-group mycustom-form-group mt-3">
<label for="exampleFormControlSelect1">What would you like to do:</label>
<form action="" method="POST" id="form1" onclick="mySubmit()">
<select class="form-control" id="exampleFormControlSelect1" onchange="yourFunction()">
<option value="1">Image Rollover</option>
<option value="2">Image Preview</option>
<option value="3">Image Slideshow</option>
</select>
<input type="submit" value = "Submit">

Just add onchange event in select and create a function to handle it.
<div class="form-group mycustom-form-group mt-3">
<label for="exampleFormControlSelect1">What would you like to do:</label>
<form action="" method="POST" id="form1" onclick="mySubmit()">
<select class="form-control" onchange="handleSelectChange()" id="exampleFormControlSelect1" >
<option value="1">Image Rollover</option>
<option value="2">Image Preview</option>
<option value="3">Image Slideshow</option>
</select>
<input type="submit" value = "Submit">
You can refer to the document here: https://www.w3schools.com/jsref/event_onchange.asp

What gets submitted to the database is just the entry of "other" and not what i typed in manually?

When i select the option value of "other" in my dropdown lis the form row below appears and allows me to type a manual cemetery but what gets submitted to the database is just the entry of "other" and not what i typed in manually?
<script>
function handleSelect() {
var selected = document.getElementById("mySelect").value;
var details = document.getElementById("other-details");
if (selected === "other") {
details.classList.remove("d-none");
details.classList.add("d-block");
} else {
details.classList.remove("d-block");
details.classList.add("d-none");
}
}
</script>
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select name="cemetery" class="form-control" id="mySelect" onchange="handleSelect();">
<option value="select" selected="selected">Select Cemetery</option>
<option value="Akatarawa">Akatarawa</option>
<option value="Taita">Taita</option>
<option value="Wainuiomata">Wainuiomata</option>
<option value="Whenua Tapu">Whenua Tapu</option>
<option value="Makara">Makara</option>
<option value="Karori">Karori</option>
<option value="St Johns">St Johns</option>
<option value="Awa Tapu">Awa Tapu</option>
<option value="Paraparaumu">Paraparaumu</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-row d-none" id="other-details">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="" placeholder="Enter other Cemetery" />
</div>
</div>
</body>

Try setting name of the input to cemetery.
<input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery" />
This may work, but not a good practise.
I suggest you to do something like following
HTML
<input type="text" id="other" class="form-control" name="other-cemetery" placeholder="Enter other Cemetery" />
PHP
if($_POST["cemetery"] == "other"){
$cemetery = $_POST["other-cemetery"];
}
Update: The first solution that I gave may not work in other cases. So add the following line to handleSelect() function. (Not selected case)
document.getElementById("other").value = document.getElementById("mySelect").value;

Thanks Dum, combining that link of JS and setting the Value of the "other" drop down to empty.
Example: <option value="">Other</option>
This has resolved my issue. Many thanks

Calculate price selects to a textarea with a button

I want bring the value of the label "precio" in the selects, make the sum of this values and put into the textarea "cuenta" after click the button "añadir al pedido".
The label "value" of the selects it's saved in the textarea "pedido"
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script>
function calcular(){
var cuenta=0.00:
$('#pedido').val($('#pedido').val()+"\n"+$('#Pizzas option:selected').text());
var newPrice=cuenta;
var newPrice+=parseFloat($(this).find('#Pizzas option:selected').attr('precio'));
$('#pedido').val($('#pedido').val()+"\n"+$('#Bebidas option:selected').text());
var newPrice+=parseFloat($(this).find('#Bebidas option:selected').attr('precio'));
$("#cuenta").html(newPrice);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="Pizzas" name="Pizzas" class="form-control" >
<?php
<option value="<?php echo $datos[0];?>" precio="<?php echo $datos[1];?>"><?php echo $datos[0];?></option>
<?php
}
?>
</select>
<select id="Bebidas" name="Bebidas" class="form-control" >
<?php
<option value="<?php echo $datos[0];?>" precio="<?php echo $datos[1];?>"><?php echo $datos[0];?></option>
<?php
}
?>
</select>
<div class="col-12">
<div style="padding-left:20px;">
<textarea name="pedido" class="form-control" id="pedido" cols="30" rows="10" placeholder="Pedido" ></textarea>
</div>
</div>
<div class="col-12 col-lg-6">
<div style="padding-left:10px;">
<input type="text" name="cuenta" id="cuenta" class="form-control" placeholder="Cuenta" required >
</div>
</div>
<button name="añadir" type="button" class="btn btn-primary p-3 px-xl-4 py-xl-3" onclick="calcular();"><span></span> Añadir al Pedido</button>

Check this out.
When you pick any item in select list the select element gets the value of the selected item. Also you shouldn't change textarea inner html, you have to change its value.
There is some nuance of how does js engine works.
+"123" it is the same as parseInt("123"). Event better because parseInt is going to drop the reminder, but +"12.3" return 12.3.
If you wrap your select lists in form you can add the require attribute to them and then check that any of items has been chosen.
let allOrdersTotalSumm = 0
let form = document.querySelector('#order-form')
let pizas = document.querySelector('#Pizzas')
let drinks = document.querySelector('#Drinks')
let priceArea = document.querySelector('#cuenta')
let selectedArea = document.querySelector('#pedido')
document.querySelector('#calc').addEventListener('click', calcTotalSum, false)
function calcTotalSum() {
// Check that items are picked
if (!form.reportValidity()) {
return false
}
let totalSum = +pizas.value + +pizas.value
let selectedPiza = pizas.options.item(pizas.options.selectedIndex)
let selectedDrink = drinks.options.item(drinks.options.selectedIndex)
selectedArea.value += `${selectedPiza.textContent} with ${selectedDrink.textContent}.Total: ${totalSum}\n`
allOrdersTotalSumm += totalSum
priceArea.value = allOrdersTotalSumm
// Reset lists to make a new order
form.reset()
}
<div style="margin-bottom:10px;">
<form id="order-form">
<select id="Pizzas" name="Pizzas" class="form-control" data-title="" required>
<option value="" selected>Please chose your pizza</option>
<option value="10">Cheesy pizzza</option>
<option value="12">Cheesy chizz pizzza</option>
<option value="15">Cheesy beacon cheees pizzza</option>
</select>
<select id="Drinks" name="Drinks" class="form-control" data-title="" required>
<option value="" selected>Please chose your drink</option>
<option value="7">Coke</option>
<option value="9">Pepsi</option>
<option value="12">Milkis</option>
</select>
</form>
</div>
<div style="margin-bottom:10px;">
<textarea name="pedido" class="form-control" id="pedido" cols="60" rows="10" placeholder="Pedido"></textarea>
</div>
<input type="text" name="cuenta" id="cuenta" class="form-control" placeholder="Cuenta" required>
<button id="calc" name="añadir" type="submit">Añadir al Pedido</button>

Based on your description, i think this is what you want.
Just tell me if i got wrong, and tell me if it's what you expected.
Hope it help.
function calcular() {
let total = parseInt($('#Pizzas').val()) + parseInt($('#Bebidas').val());
$('#cuenta').val(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>Select 1</label>
<select id="Pizzas" name="Pizzas" class="form-control" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<label>Select 2</label>
<select id="Bebidas" name="Bebidas" class="form-control" required>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br><br>
<input type="text" name="cuenta" id="cuenta" class="form-control" placeholder="Cuenta" required>
<button name="añadir" type="button" class="btn btn-primary p-3 px-xl-4 py-xl-3" onclick="calcular();"><span></span> Añadir al Pedido</button>

Change the form action when an onchange event is triggered on <select> with 2 forms on page

I ran into an issue where I have two forms on a page -
A desktop version of the form
A mobile version.
Both forms don't show to the user as it depends on their viewport or device. When the user selects "Student Loan" from the agency drop-down selection (in either form), we want the form submission's action to be /quote/quotes-sl.php instead of the form default of /quote/quotes.php.
The good news is that on the mobile-friendly form (the first form in the code below), the solution works. However, for the desktop form, it does not even though it has the same form id/name. I tried renaming the desktop form to have a different formID/name` and then add another script for that form, but that doesn't work.
Any direction or advice is greatly appreciated.
(function() {
var theForm = document.getElementById('tdhcustom-pre-1-form');
var theSelector = document.getElementById('agency');
theSelector.onchange = function() {
theForm.action = theSelector[theSelector.selectedIndex].getAttribute('data-action');
}
})();
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" action="/quote/quotes.php" method="post" name="tdhcustom-pre-1-form">
<div>
<input id="edit-lead-source-description" name="lead_source_description" type="hidden" value="1.test" />
<div id="edit-owed-wrapper" class="form-item">
<label class="edit-owed" for="edit-owed"> Tax Debt Owed: <span class="form-required" title="This field is required.">*</span></label>
<select id="edit-owed" class="form-select required" name="owed">
<option selected="selected" value="">Select...</option>
<option value="$30,000 to $39,999">$30,000 to $39,999</option>
<option value="$40,000 to $59,999">$40,000 to $59,999</option>
<option value="$60,000 to $79,999">$60,000 to $79,999</option>
<option value="$80,000 to $99,999">$80,000 to $99,999</option>
<option value="$100,000+">$100,000 +</option>
</select>
</div>
<div id="edit-agency-wrapper" class="form-item">
<label class="edit-agency" for="edit-agency"> Tax Agency: <span class="form-required" title="This field is required.">*</span></label>
<select id="agency" class="form-select required" name="agency">
<option selected="selected" value="">Select Agency...</option>
<option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option>
<option value="Federal" data-action="/quote/quotes.php">Federal</option>
<option value="STATE" data-action="/quote/quotes.php">State</option>
<option value="FEDERAL_AND_STATE" data-action="/quote/quotes.php">Federal and State</option>
</select>
</div>
<input id="edit-submit" class="form-submit" height="31" name="submit" src="http://www.test.com/wp-content/uploads/2009/07/form-submit-6-17-small.png" type="image" value="Submit" width="214" />
<input id="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" name="form_build_id" type="hidden" value="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" />
<input id="edit-tdhcustom-pre-1-form" name="form_id" type="hidden" value="tdhcustom_pre_1_form" />
</div>
</form>
<div class="mycustombanner desk-view">
<img class="wp-image-12546 size-full alignnone" src="http://www.test.com/wp-content/uploads/2009/12/top-form-irs-hardship-status.png" alt="irs hardship status" width="618" height="194" />
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" action="/quote/quotes.php" method="post" name="tdhcustom-pre-2-form">
<div>
<input id="edit-lead-source-description" name="lead_source_description" type="hidden" value="1.test-desktop" />
<div id="edit-owed-wrapper" class="form-item">
<label for="edit-owed"> Tax Debt Owed: <span class="form-required" title="This field is required.">*</span></label>
<select id="edit-owed" class="form-select required" name="owed">
<option selected="selected" value="">Select...</option>
<option value="$30,000 to $39,999">$30,000 to $39,999</option>
<option value="$40,000 to $59,999">$40,000 to $59,999</option>
<option value="$60,000 to $79,999">$60,000 to $79,999</option>
<option value="$80,000 to $99,999">$80,000 to $99,999</option>
<option value="$100,000+">$100,000 +</option>
</select>
</div>
<div id="edit-agency-wrapper" class="form-item">
<label for="edit-agency"> Tax Agency: <span class="form-required" title="This field is required.">*</span></label>
<select id="agency" class="form-select required" name="agency">
<option selected="selected" value="">Select Agency...</option>
<option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option>
<option value="Federal" data-action="/quote/quotes.php">Federal</option>
<option value="STATE" data-action="/quote/quotes.php">State</option>
<option value="FEDERAL_AND_STATE" data-action="/quote/quotes.php">Federal and State</option>
</select>
</div>
<input id="edit-submit" class="form-submit" height="37" name="submit" src="http://www.test.com/wp-content/uploads/2010/04/form-submit-6-17-1.png" type="image" value="Submit" width="207" />
<input id="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" name="form_build_id" type="hidden" value="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" />
<input id="edit-tdhcustom-pre-1-form" name="form_id" type="hidden" value="tdhcustom_pre_1_form" />
</form>
</div>

It is invalid HTML to have more than one element with the same ID in one document - that's why the selector is failing.
Try giving both forms different IDs, as well as for the select element, for example:
<form id="tdhcustom-pre-1-form1"...
<select id="agency1"...
...
...
<form id="tdhcustom-pre-1-form2"...
<select id="agency2"...
Then you could do:
[
['tdhcustom-pre-1-form1', 'agency1'],
['tdhcustom-pre-1-form2', 'agency2'],
].forEach(([formSelector, agencySelector]) => {
const form = document.getElementById(formSelector);
const agency = document.getElementById(agencySelector);
agency.addEventListener('change', () => {
form.action = agency[agency.selectedIndex].getAttribute('data-action');
});
});

Now that I've looked at your code more, I'm going to say more confidently that sharing the same id between your forms is the problem you're having. This line:
var theForm = document.getElementById('tdhcustom-pre-1-form');
...isn't going to care which form is hidden, and which form is shown. It's always going to return you the same form. Your browser must be favoring the mobile form over the desktop form.

required drop-down lists with Save Button

I have 2 required drop-down lists,this is my try but it doesn't work when I click on the "Save" Button:
<div>
<button class="btn btn-action" ng-click="save()">Save</button>
</div>
<form>
<div class="row">
<select required>
<option ng-repeat="pi in listProduitAvailable" value="{{pi.id}}">{{pi.reference}}</option>
</select>
<select required>
<option ng-repeat="pi in listProduitAvailable" value="{{pi.id}}">{{pi.reference}}</option>
</select>
</div>
</form>
the save method:
$scope.save= function() {
$scope.creerGamme();
}
how can I correct my code please
thanks for help

Categories

Resources