I have 2 radio buttons. All of them have different values. I also have one text field, in case I need a different value, I can enter that value on that text field.
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="url" value="https://example.com/fee/25"> $25
<input type="radio" name="url" value="https://example.com/fee/50"> $50
<input type="submit" value="Submit">
</form>
and here is the Javascript I've found to make radio buttons working
<script type="text/javascript">
function doSubmit(form) {
var urls = form['url'];
var i = urls && urls.length;
while (i--) {
if (urls[i].checked) {
window.location = urls[i].value;
}
}
document.getElementById("amount").value;
return false;
}
</script>
I have one text field:
<input type="text" name="amount" size="10" id="amount" value="">
Ok. If the amount is entered, then I need to use this code:
document.getElementById("amount").value
But how to make it working with radio buttons? I have created this JS code:
<script type="text/javascript">
var link = "https://example.com/fee/";
var input= document.getElementById('amount');
input.onchange=input.onkeyup= function() {
link.search= encodeURIComponent(input.value);
};
</script>
What I'm doing wrong? Thanks in advance for your time. I love and enjoy learning from experts.
I would create a separate radio button for the text input:
var options = Array.from(document.querySelectorAll("[name=url]"));
amount.addEventListener('focus', function() {
options[0].checked = true; // If textbox gets focus, check that radio button
});
options[0].addEventListener('change', function() {
amount.focus(); // if first radio button gets checked, focus on textbox.
});
function doSubmit(form) {
// get checked value, replace empty value with input text
var value = options.find( option => option.checked ).value || amount.value;
window.location = "https://example.com/fee/" + value;
return false;
};
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="url" value="" checked>
$<input type="text" name="amount" size="5" id="amount" value="" >
<input type="radio" name="url" value="25"> $25
<input type="radio" name="url" value="50"> $50
<input type="submit" value="Submit">
</form>
Instead of using the url as the value for the radio buttons, consider using the value you wish to pass to the url:
function doSubmit(form) {
var endpoint = "https://example.com/fee/";
// gets the values of input elements that were selected
var checkedValues = Array.from(form.amounts)
.filter(radio => radio.checked)
.map(radio => radio.value);
// if a radio button was checked, use its value
// otherwise, use the value in the text field
var amount = checkedValues.length ?
checkedValues[0] : form.amount.value;
console.log('redirecting to: ', endpoint + amount);
return false;
}
// uncheck radio buttons when text is entered
function uncheck() {
Array.from(document.querySelectorAll('input[name="amounts"]'))
.forEach(radio => radio.checked = false);
}
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="amounts" value="25"> $25
<input type="radio" name="amounts" value="50"> $50
<input type="text" name="amount" onkeyup="uncheck()">
<input type="submit" value="Submit">
</form>
Edit: Wow I completely forgot you could use the :checked attribute as a css selector. In this case, the code becomes quite simple:
function doSubmit(form) {
// select checked inputs with the specified name attribute
var checkedRadio = document.querySelector('input[name="amounts"]:checked')
// if we have a radio button that is checked, use its value
// otherwise, use the text input's value
var amount = checkedRadio ? checkedRadio.value : form.amount.value;
window.location = 'https://example.com/fee/' + amount;
return false;
}
// uncheck radio buttons when text is entered
function uncheck() {
Array.from(document.querySelectorAll('input[name="amounts"]'))
.forEach(radio => radio.checked = false);
}
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="amounts" value="25"> $25
<input type="radio" name="amounts" value="50"> $50
<input type="text" name="amount" onkeyup="uncheck()">
<input type="submit" value="Submit">
</form>
Related
<script>
$(document).ready(function(){
var value = $('input[name="yesno"]').change(function(){
if($('#imageCheck').prop('checked')){
// alert('Image Option checked!');
}else if($('#textCheck').prop('checked')){
// alert('Text Option Checked!');
}
});
});
</script>
<input type="radio" onclick="javascript:imageTextCheck();" name="yesno"
id="imageCheck"/>   <b>Text</b>
<input type="radio" onclick="javascript:imageTextCheck();"name="yesno"
id="textCheck"/>
<input type="hidden" name="radioCheck" id="radioCheck" value=""/>
how i can save the value of radio button in hidden field. If i Click on image it saves image value.
$(document).ready(function(){
var value = $('input[name="yesno"]').click(function(){
$('#radioCheck').val($(this).val());
});
setInterval(() => console.log( $('#radioCheck').val() ), 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="yesno" value="imageCheck" id="imageCheck"/><label for="imageCheck">imageCheck</label>
<br />
<input type="radio" name="yesno"value="textCheck" id="textCheck"/><label for="textCheck">textCheck</label>
<input type="hidden" name="radioCheck" id="radioCheck" value=""/>
hope this one helps you :)
the setInterval is just to print out the hidden field's value each and every second so when you click on a radio button you can see that it sets the hidden input's value
Here is a simple solution for your problem: I have written one sample of code to explain the problem:
First: OnClick of radio button save the value of radio button if it is checked.
var radioValue = $("input[name='yesno']:checked").val();
Second: Assign the checked radio button value to the hidden input field.
$(document).ready(function(e) {
$("input[type='radio']").click(function(){
var radioValue = $("input[name='yesno']:checked").val();
if(radioValue) {
$("#radioCheck").val(radioValue);
console.clear();
console.log($("#radioCheck").val());
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_radioButton">
<input id="image_radio_check" value="imageButtonChecked" type="radio" class="radio_button" name="yesno" /> Image Radio Button
</div>
<div class="text_radioButton">
<input id="text_radio_check" value="textButtonChecked" type="radio" class="radio_button" name="yesno" />Text Radio Button
</div>
<div class="hidden_input">
<input type="hidden" name="radioCheck" id="radioCheck" value=""/>
</div>
Hope this may hep you in solving your problem.
I want to echo the textbox value using php. Whatever user types characters in the textbox that as to be displayed in the another textbox as well it as to echo the amount in top As Value is:(Whatever is typed in the textbox)
Here is the screenshot
Here is the Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
if(!empty($_GET['a1']))
{
$selected = $_GET['a1'];
}
else
{
$selected = 'home';
}
if(!empty($_GET['a1']))
{
$selected = $_GET['a1'];
}
else
{
$selected = 'home';
}
?>
<span class="r-text" style="font-weight:bold;">Value is</span>
<form action="" method="post">
<label>
<input type="radio" name="a1" value="100" /> 100
</label>
</br>
<label>
<input type="radio" name="a1" value="200" /> 200
</label>
</br>
<label>
<input type="radio" name="a1" value="300" /> 300
</label>
</br>
<label>
<input type="radio" name="a1" value=" " /> Other
</label>
</br>
<input type="text" name="a1"/>
<br/>
<br/>
Amount
<input type="text" name="a2" />
<br/>
<br/>
</form>
<script>
$('input[type=radio]').click(function(e) {//jQuery works on clicking radio box
var value = $(this).val(); //Get the clicked checkbox value
var check = $(this); //Get the clicked checkbox properties (like ID, value, class etc)
$('.r-text').html('Value is '+value);// The class r-text after clicked checkbox print the line 'This was selected'
});
</script>
<script>
$('input[type=text]').click(function(e) {//jQuery works on clicking radio box
var value = $(this).val(); //Get the clicked checkbox value
var check = $(this); //Get the clicked checkbox properties (like ID, value, class etc)
$('.r-text').html('Value is '+value);// The class r-text after clicked checkbox print the line 'This was selected'
});
</script>
you can set value in textarea when user is typing in another textarea.By using keyup events.
$('input[type=text]').on("keyup",function(){
var value = parseInt($(this).val());
if($.isNumeric($("input[name='a1']:checked").val())){
value = parseInt($("input[name='a1']:checked").val()) +value;
}
$('[name="a2"]').val(value);
$(".r-text").html('Value is '+value);
})
$('input[type=radio]').on("change",function(){
var textBoxVal = parseInt($("input[type='text'][name='a1']").val());
var selectedVal = parseInt($("input[type='radio'][name='a1']:checked").val());
if(!$.isNumeric(textBoxVal)){
textBoxVal = 0;
}
if($.isNumeric(selectedVal )){
textBoxVal = parseInt(selectedVal) +textBoxVal;
}
$('[name="a2"]').val(textBoxVal);
$(".r-text").html('Value is '+textBoxVal);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="r-text" style="font-weight:bold;">Value is</span>
<form action="" method="post">
<label>
<input type="radio" name="a1" value="100" /> 100
</label></br>
<label>
<input type="radio" name="a1" value="200" /> 200
</label></br>
<label>
<input type="radio" name="a1" value="300" /> 300
</label></br>
<label>
<input type="radio" name="a1" value=" " /> Other
</label></br>
<input type="text" name="a1"/><br/><br/>
Amount
<input type="text" name="a2" /><br/><br/>
</form>
Use onKeyup event on text box that contain user input. and fill your required text box.
You can use onblur() function from your HTML tag.
onblur() is a JavaScript function. Display the contents of the text box from this function.
I want to pass the value 9112232453 of one textfield to another.
I know I need Javascript for this but I don't know how to do it.
HTML
<form method = "post" action="">
<input type="checkbox" name="phone" value="9112232453" onclick='some_func();' >
<input type="text" name="phone" value="" id="phone">
<input type="submit" name="Go">
</form>
Then later, I want to use the value in my php.
You could use a JS. function to take param (this.value) like:
<script>
var some_func = function (val){
var input = document.getElementById("phone");
input.value = val;
}
</script>
<form method = "post" action="">
<input type="checkbox" name="phone" value="9112232453" onclick='some_func(this.value);' >
<input type="text" name="phone" value="" id="phone">
<input type="submit" name="Go">
</form>
The best way is to not obtrude the HTML code with Javascript event handlers.
So, you can add a DOMContentLoaded event listener to the document, and as soon as DOM is loaded:
You add a change event listener to the input[type=checkbox], and then:
1.1. If the checkbox is checked, then you change the input#phone's value to its value
1.2. If not, then you empty the input#phone's value.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('cbphone').addEventListener('change', function(e) {
var phone = document.getElementById('phone');
if (this.checked) {
phone.value = this.value;
// you can even enable/disable the input#phone field, if you want to, e.g:
// phone.disabled = false;
}
else {
phone.value = '';
// phone.disabled = true;
}
});
});
<form method="post" action="">
<input type="checkbox" name="cbphone" id="cbphone" value="9112232453">
<input type="text" name="phone" id="phone">
<input type="submit" name="Go" value="Go">
</form>
before submit form use validation and check whether the field value is filled up or not. if yes get value of the field.
if(document.getElementBy("fieldIdfirst").value!="")
{
document.getElementBy("fieldIdSecond").value=document.getElementElementById("fieldIdfirst");
}
Thanks it..
Try this: http://jsfiddle.net/yhuxy4e1/
HTML:
<form method = "post" action="">
<input type="checkbox" name="phone" value="9112232453" onclick='some_func();' id="chk_phone">
<input type="text" name="phone" value="" id="txt_phone">
<input type="submit" name="Go">
</form>
JavaScript:
some_func = function() {
var checkBox = document.getElementById('chk_phone');
var textBox = document.getElementById('txt_phone');
textBox.value = checkBox.value;
}
I have a form that once the user clicks the Submit button - it runs 2 functions - (1) it pops up with a div that says 'Item added successfully to basket' then (2) a prefill function that sends the selected options to a Mals-E cart.
It works, but what i need to do is not let the form submit until the popup has shown for around 5 seconds - currently it flashes for a split second as the form is submitted immediately with the prefill function.
Can anyone help with this please?
Script Below:
function showDiv(f) {
document.getElementById('basket-center').style.display='block';
}
function prefill(f) {
var val = document.forms["basket"].elements["product[2]"].value;
val = val + gettext(document.forms["form"].elements['users']);
document.forms["basket"].elements["product[2]"].value = val;
document.forms["basket"].elements["price"].value = document.forms["form"].elements['sum'].value;
return false;
}
Form Script Here:
<form id="basket" name="basket" action="http://ww8.aitsafe.com/cf/add.cfm" method="post" onsubmit="showDiv(); prefill();">
<input name="userid" type="hidden" value="A1251773"/>
<input type="hidden" name="nocart"/>
<input name="product[]" type="hidden" value="{b}Sage 50 Accounts (The VAT Edition) 2014{/b}"/>
<input name="product[2]" type="hidden" value="{br}"/>
<input name="product[3]" type="hidden" value="{br}FREE Installation onto 1 Server/PC & Same Day Download when ordered before 3pm"/>
<input name="price" type="hidden" value=""/>
<input name="noqty" type="hidden" value="1"/>
<input name="thumb" type="hidden" value="sage50-thumb.png"/>
<input name="return" type="hidden" value="http://10.10.0.195/reality-solutions-development/sage-50-accounts.php"/>
<input type="image" src="img/buynow-button-green.jpg" border="0" alt="Buy Now" style="float:right; margin-top:-24px"/>
</form>
Try this:
//html
<form id="my_form">
<button id="my_button">submit</button>
</form>
//javascript
var my_form = document.getElementById("my_form"), button = document.getElementById("my_button");
my_form.onsubmit = function() {
return false;
}
button.onclick = function() {
setTimeout(function() {
my_form.submit();
}, 5000);
return false;
}
Working jsfiddle: http://jsfiddle.net/njoqnwwf/
You could use Jquery for that
$(function() {
$('#form').delay(milliseconds).submit();
});
I've built a simple survey page which consists of 3 questions where the user will click on a radio button on each row indicating a level where they are at with each. Here's a visual of how it looks:-
They will get a score depending on what they choose. Never = 0, Infrequently = 1, Regularly = 2, Constantly = 3.
When they click Submit below the form, I'd like them to be taken to a page depending on their score.
Below 2 = page1.html, 2-4 = page2.html, 6-8 = page3.html, 9 = page4.html
The form itself doesn't need to submit the data to any email or any database. It's simply to show a page of information depending on your score.
What is the best way to achieve this using Javascript or jQuery?
Thanks,
Tim
Assuming you don't actually want to submit any data, the best method would be to iterate through the radio buttons, adding up their scores, and then based on the outcome of this variable, redirect them to the correct page. If you're running it anyway, jQuery would be my tool of choice.
HTML:
<form action="#" method="post" name="my-form" id="my-form">
<b>Audio</b><br>
<input name="audio" type="radio" value="0" /> Never<br>
<input name="audio" type="radio" value="1" /> Infrequently<br>
<input name="audio" type="radio" value="2" /> Regularly<br>
<input name="audio" type="radio" value="3" /> Constantly<br>
<b>Video</b><br>
<input name="video" type="radio" value="0" /> Never<br>
<input name="video" type="radio" value="1" /> Infrequently<br>
<input name="video" type="radio" value="2" /> Regularly<br>
<input name="video" type="radio" value="3" /> Constantly<br>
<b>Web</b><br>
<input name="web" type="radio" value="0" /> Never<br>
<input name="web" type="radio" value="1" /> Infrequently<br>
<input name="web" type="radio" value="2" /> Regularly<br>
<input name="web" type="radio" value="3" /> Constantly<br>
<br>
<input type="submit" value="Submit" />
</form>
jQuery:
$(document).ready(function() {
$("#my-form").submit(function(e) {
e.preventDefault();
var scoreCounter = 0, newPage;
$('input[type=radio]').each(function () {
if ($(this).prop('checked')) { scoreCounter += parseInt($(this).val()); }
});
if (scoreCounter < 2) { newPage = "page1.html"; }
else if (scoreCounter <=4) { newPage = "page2.html"; }
else if (scoreCounter <= 6) { newPage = "page3.html"; }
else if (scoreCounter <= 8) { newPage = "page4.html"; }
else { newPage = "page5.html"; }
window.location = newPage;
});
});
The fastest way that comes to mind is to store the total score of the end-user in a variable, let's say var finalScore, and add an event listener on the submit button to programatically navigate to the desired page.
var submit = document.getElementById('submit'), //assuming your submit button has the id submit
finalScore = 5;
submit.addEventListener('click', function() {
if (finalScore < 2) {
window.location.href = 'path-to-page1.html';
} else if (finalScore <= 4 && finalScore >= 2) {
window.location.href = 'path-to-page2.html';
}
...... and so on for any test case
});
I hope this helps!
Since you did not provide the code of your form, you will have to edit some names of things to get it to work with yours:
<script>
function calc()
{
var score = 0;
if(document.getElementById("audio_infrequently").checked) {score++;}
else if(document.getElementById("audio_regularly").checked) {score += 2;}
else if(document.getElementById("audio_constantly").checked) {score += 3;}
//repeat for the 3 other categories
if(score < 2) {window.location.replace("page1.html");}
//Repeat for other scores
}
</script>
<input type="submit" onclick="calc();">
window.location.replace() was used instead of setting the href because it is closer to a HTTP Redirect than clicking a link. Source: How to redirect to another webpage in JavaScript/jQuery?