jQuery function isnt enabling my disabled submit button?
$(document).ready(function() {
if ($("#lawfulBasis").prop("checked")) {
$("#submitBtn").prop('disabled', false);
alert('Button Clicked');
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<input id="lawfulBasis" type="radio" value="3" /> I give consent for you to store my data for the purposes of marketing, to contact me about products and services via email and telephone*
<p>
<input id="submitBtn" type="submit" value="Submit" disabled/>
</p>
</body>
</html>
The issue is because you only read the state of the radio control in the document.ready handler, ie. when the page loads not when the user changes its state.
To fix this attach a change event handler to the radio and set the disabled state of the button based on that.
Finally, note that you should be using a checkbox for this, not a radio. The reason is that the radio cannot be deselected once selected for the first time.
jQuery($ => {
$("#lawfulBasis").on('change', e => {
$("#submitBtn").prop('disabled', !e.target.checked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input id="lawfulBasis" type="checkbox" value="3" />
I give consent for you to store my data for the purposes of marketing, to contact me about products and services via email and telephone*
</label>
<p>
<input id="submitBtn" type="submit" value="Submit" disabled/>
</p>
I did think about writing this up in jQuery but really it's just as easy to use vanilla js. Your problem was that you're checking all this when the docuemnt loads, and not when the button is pressed.
document.getElementById("lawfulBasis").addEventListener("change", () => {
const radio = document.getElementById("lawfulBasis");
if (radio.checked) {
document.getElementById("submitBtn").disabled = false;
}
});
<input id="lawfulBasis" type="radio" value="3" /> I give consent for you to store my data for the purposes of marketing, to contact me about products and services via email and telephone*
<p>
<input id="submitBtn" type="submit" value="Submit" disabled/>
</p>
You need an eventlistner: $('#lawfulBasis').change()
$(document).ready(function() {
$('#lawfulBasis').change(function() {
if ($(this).prop("checked")) {
$("#submitBtn").prop('disabled', false);
alert('Button Clicked');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<input id="lawfulBasis" type="radio" value="3" /> I give consent for you to store my data for the purposes of marketing, to contact me about products and services via email and telephone*
<p>
<input id="submitBtn" type="submit" value="Submit" disabled/>
</p>
</body>
</html>
Related
How to change submit button text based on which radio-button is active?
Here is my code, but it does not work. It changes text only once.
I have two radio-buttons:
<input type="radio" name="build-team" class="choose" value="build" /> Yes
<input type="radio" name="build-team" class="choose" value="show" /> No
<button class="show-result" data-chooseyes="Yes" data-chooseno="No">Yes</button>
And I have script:
$(document).on('click', '.choose', function() {
var target = $('.show-result');
if ($(this).attr('checked') == 'checked') {
target.html(target.data('chooseyes'));
}
else {
target.html(target.data('chooseno'));
}
})
JSFiddle example
$(document).on('click', '.choose', function() {
var target = $('.show-result');
target.html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="build-team" class="choose" value="Yes" /> Yes
<input type="radio" name="build-team" class="choose" value="No" /> No
<button class="show-result" data-chooseyes="Yes" data-chooseno="No">Yes</button>
$('.opt').click(function(){
$('#button').html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="opt" name="opt" type="radio" value="Yes" checked="checked">Yes
<input class="opt" name="opt" type="radio" value="No">No
<button id="button" type="submit">Yes</button>
This is the easiest answer, no added attributes, only clean HTML + jQuery, it is also important to realize that there must always be a radio selected/checked by default, if not, you would have to validate the field and validating a radio is not cool haha :) have a nice day!
I have a fairly simple HTML form which has a number of HTML input buttons on it (input type="button"). The buttons use a small piece of JavaScript to change the displayed value when clicked (Yes and No). I am happy with this functionality but would like to know the best way to record the values for later submission into a database.
I have this at the moment:
<script>
function toggleynquestion(button)
{
if(document.getElementById("yn_toggle").value=="Yes"){
document.getElementById("yn_toggle").value="No";}
else if(document.getElementById("yn_toggle").value=="No"){
document.getElementById("yn_toggle").value="Yes";}
}
</script>
<form method="post" action="ynquestion_submit.php" name="yn_submit">
<p> Yes or No question :
<input type="button" name="yn_question" id="yn_toggle" value="Yes" onclick="toggleynquestion(this);"/>
</p>
<input type="submit" value="Save">
</form>
Any ideas would be greatly appreciated.
You can always use hidden form elements, they will get sent to the server just like text inputs:
function toggleynquestion(button)
{
if(document.getElementById("yn_toggle").value=="Yes"){
document.getElementById("yn_toggle").value="No";
document.getElementById("yn_answer").value="No";
} else if(document.getElementById("yn_toggle").value=="No"){
document.getElementById("yn_toggle").value="Yes";
document.getElementById("yn_answer").value="Yes";
}
}
<form method="post" action="ynquestion_submit.php" name="yn_submit">
<p> Yes or No question :
<input type="button" name="yn_question" id="yn_toggle" value="Yes" onclick="toggleynquestion(this);"/>
<input type="hidden" name="yn_answer" id="yn_answer" value="Yes" />
</p>
<input type="submit" value="Save">
</form>
What I want the program to do is make a form and have 2 radio buttons and 1 text.
Then I want it to collapse the text and radio value together into one and take me to that page:
If I input text with like "facebook" and the radiobutton value is .com I want it to take facebook + .com and send me to that page.
<!doctype html>
<html>
<head>
<title>A Basic Form</title>
<style type="text/css">
</style>
</head>
<body onunload="Bye()">
<form>
<fieldset>
<legend>Redirection: </legend>
<div>
<label>Where do you want to go?</label>
<input type="text" id="input" name="input" size="7">
<input type="submit" id="submit" name="submit" value="Submit" onclick="go()">
</div>
<div>
<input type="radio" id="no" name="end" value=".no">
<label for=".no">.no</label>
<br />
<input type="radio" id="com" name="end" value=".com">
<label for=".com">.com</label>
</div>
</fieldset>
</form>
<script type="text/javascript">
function go() {
var end = "";
if (document.getElementById("no").checked) {
end = document.getElementById("no").value;
} else {
end = document.getElementById("com").value;
}
var input = document.getElementById("input").value;
var together = input + end;
window.location.replace("http://www." + together);
}
</script>
</body>
</html>
Change type="submit" to type="button".
Change this line:
<input type="submit" id="submit" name="submit" value="Submit" onclick="go()">
to:
<input type="button" id="submit" name="submit" value="Submit" onclick="go()">
In this case you don't need to submit a form. You are just trying to redirect the url. You didn't specify where to submit the form so it is submitting to itself that is your problem.
Alternatively, return false from the onclick handler to prevent the form submit.
Try this code:
<html>
<head>
</head>
<body>
<form>
<fieldset>
<legend>Redirection: </legend>
<div>
<label>Where do you want to go?</label>
<input type="text" id="input" name="input" size="7">
<input type="submit" id="submit" name="submit" value="Submit" onclick="return go()">
</div>
<div>
<input type="radio" id="no" name="end" value=".no">
<label for=".no">.no</label>
<br />
<input type="radio" id="com" name="end" value=".com">
<label for=".com">.com</label>
</div>
</fieldset>
</form>
<script type="text/javascript">
function go() {
var end = "";
if (document.getElementById("no").checked) {
end = document.getElementById("no").value;
} else {
end = document.getElementById("com").value;
}
var input = document.getElementById("input").value;
var together = input + end;
window.location.replace("http://www." + together);
return false;
}
</script>
</body>
</html>
brso05's analysis seems to be spot on... But I can't really explain it. It seems that Chrome is delaying the side effects of the location.href.replace (which should be navigating away from the page) until after the form submit... I have a feeling you have hit a browser bug here. I can't imagine this is spec-compliant.
<form action="" method="post">
<body>
customer type:<input type="radio" name="customer" value="yes" onclick="return check()" checked="checked"/>yes
<input type="radio" name="customer" value="no" onclick="return check2()" />no
<div id="one">
firts name :<input type="text" name="fname" id="fname" required="required"/>
</div>
<div id="two" style="display:none;">
Party Name<input type="text" name="party_name" id="pname" required="required"/>
</div>
<input type="submit" value="save" name="save" />
</body>
</form>
<script type="text/javascript">
function check()
{
document.getElementById("one").style.display="";
document.getElementById("two").style.display="none";
}
function check2()
{
document.getElementById("one").style.display="none";
document.getElementById("two").style.display="";
}
</script>
</head>
<?php
if(isset($_POST["save"]))
{
header("location: hide_show.php");
}
?>
here at the top are two radio buttons ...when i click on "Yes" radio button Div one shows and div two gets hide....when i click on "no" radio button then div two shows up and one hides ...now i have applied validation in both the textboxes so suppose if have choosen yes div one shows up and when i click submit button ...it doesnt get submitted because i have applied validation in div named two....valiadtion is also necessary...but is taking both div's validation at the submit time...plz suggest some way for this
Try style.display="block" rather
function check()
{
document.getElementById("one").style.display="block";
document.getElementById("two").style.display="none";
}
function check2()
{
document.getElementById("one").style.display="none";
document.getElementById("two").style.display="block";
}
I got stuck to what I think is silly. But now I have tried every combination but not able to find out what is going on.
onclick inside input type radio is not working when I put input type inside a form. But when I delete form tag it works. Also I have seen a code where onclick work inside a form tag but not working when I write.
This is not working:
<html>
<head>
<script>
function action(str){
document.getElementById("test1").innerHTML=str
}
</script>
</head>
<body>
<form>
<input type="radio" value="ping" name="rb" onclick="action(this.value)">Ping
<input type="radio" value="card" name="rb" onclick="action(this.value)">Card
<input type="radio" value="temp" name="rb" onclick="action(this.value)">Temprature
<p id="test1">radio will be displayed here</p>
</form>
</body>
</html>
When I remove form it works.
change the name of your function action
try this :
<html>
<head>
<script type="text/javascript">
function action123(str){
document.getElementById("test1").innerHTML=str
}
</script>
</head>
<body>
<form>
<input type="radio" value="ping" name="rb" onclick="action123(this.value);">Ping
<input type="radio" value="card" name="rb" onclick="action123(this.value);">Card
<input type="radio" value="temp" name="rb" onclick="action123(this.value);">Temprature
<p id="test1">radio will be displayed here</p>
</form>
</body>
</html>
You shouldn't use inline event functions anymore. Use event listeners:
radios = document.getElementsByName("rb");
for(i=0; i<radios.length; i++) {
radios[i].addEventListener('click', function(e){
document.getElementById("test1").innerHTML = e.target.value;
});
}
JSFiddle
"action" seems to be a blocked namesspace for forms
try sth like
<script>
function otherName(str){
document.getElementById("test1").innerHTML=str;
}
</script>
<form name="form">
<input type="radio" value="ping" name="rb" onclick="otherName(this.value)" />Ping
<input type="radio" value="card" name="rb" onclick="otherName(this.value)" />Card
<input type="radio" value="temp" name="rb" onclick="otherName(this.value)" />Temprature
<p id="test1">radio will be displayed here</p>
</form>
http://jsfiddle.net/waeqT/