Change Text of Button on RadioButton Check - javascript

I was trying to change text displayed inside button depending on the radio button being checked.
My code is :
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
$("input[type=radio]").click(function(){
if(document.getElementById('segment1').checked) {
alert('Yes');
document.getElementById('sendbutton').value="Proceed";
}
else if(document.getElementById('segment2').checked) {
alert('No');
document.getElementById('sendbutton').value="No";
}
});
</script>
</head>
<body>
<form action="composemail" enctype= "multipart/form-data" method="post" name="f1">
<input type="text" placeholder="Email TO" name="mailreciever">
<input type="text" placeholder="Email SUBJECT" name="mailsubject">
<textarea placeholder="Message" name="messagearea"></textarea>
<input type="file" name="uploadfile" id="uploadfile"/>
<input type="radio" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment1" value="Yes"/>
<label for="segment1" id="controls">
<span class="ui-btn-text-controls">Yes</span>
</label>
<input type="radio" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment2" value="No" checked="checked"/>
<label for="segment2" id="controls">
<span class="ui-btn-text-controls">No</span>
</label>
<input type="submit" value="send" name="sendbutton" id="sendbutton"/>
</form>
</body>
</html>
I eidted my code as per answers But It still not working.Please help

Try .value rather than .text
if(document.getElementById('segment1').checked) {
alert('Yes');
document.getElementById('sendbutton').value="Proceed";
}
else if(document.getElementById('segment2').checked) {
alert('No');
document.getElementById('sendbutton').value="No";
}

If you're going to use jQuery, then use jQuery:
$("input[type=radio]").click(function () {
$('#sendbutton').val(($('input[name="radio-view"]:checked').val() == 'Yes') ? 'Proceed' : 'No');
});
jsFiddle example

Related

Counting checkboxes on a form using Javascript

I'm working on a form on a bespoke website (it's abit like a CMS just to explain the formatting of the HTML below so alot of it isn't relevant) and one of the things I've been requested to implement is to count how many of the checkboxes on the form have been ticked.
I've got checkbox1, checkbox2 and checkbox3 and a field called numberticked which I'm going to hide when it gets submitted (which I know how to do).
If the user ticked checkbox1 it would write 1 to that numberticked field, if they ticked all 3 it would write 3 to that field and so on and so on (I'll be adding more checkboxes but I thought I'd start with 3 to test.)
I've had a read on the site but I'm not sure how to start on this one since it's a bespoke site, but it uses labels and ids and the form does work with Javascript so I'm hoping there's a general way to write a script to do it!
<div class="seq-box-form-field editorcheckbox1 ">
<label for="checkbox1">
<span style="padding-right: 10px; vertical-align: 1px;">Checkbox 1</span>
<input type="checkbox" name="checkboxcheckbox1" id="checkboxcheckbox1" />
<input type="hidden" name="checkbox1" id="checkbox1" value="false" />
</label>
<script>
$(document).ready(function() {
$('#checkboxcheckbox1').click(function() {
if ($('#checkboxcheckbox1').val() == 'true') {
$('#checkbox1').val('false');
$('#checkboxcheckbox1').val('false');
$('#checkboxcheckbox1').prop('checked', false);
$('#aspire_previewrefresh').trigger('click');
} else {
$('#checkbox1').val('true');
$('#checkboxcheckbox1').val('true');
$('#checkboxcheckbox1').prop('checked', true);
$('#aspire_previewrefresh').trigger('click');
};
});
});
</script>
</div>
<div class="seq-box-form-field editorcheckbox2 ">
<label for="checkbox2">
<span style="padding-right: 10px; vertical-align: 1px;">Checkbox 2</span>
<input type="checkbox" name="checkboxcheckbox2" id="checkboxcheckbox2" />
<input type="hidden" name="checkbox2" id="checkbox2" value="false" />
</label>
<script>
$(document).ready(function() {
$('#checkboxcheckbox2').click(function() {
if ($('#checkboxcheckbox2').val() == 'true') {
$('#checkbox2').val('false');
$('#checkboxcheckbox2').val('false');
$('#checkboxcheckbox2').prop('checked', false);
$('#aspire_previewrefresh').trigger('click');
} else {
$('#checkbox2').val('true');
$('#checkboxcheckbox2').val('true');
$('#checkboxcheckbox2').prop('checked', true);
$('#aspire_previewrefresh').trigger('click');
};
});
});
</script>
</div>
<div class="seq-box-form-field editorcheckbox3 ">
<label for="checkbox3">
<span style="padding-right: 10px; vertical-align: 1px;">Checkbox 3</span>
<input type="checkbox" name="checkboxcheckbox3" id="checkboxcheckbox3" />
<input type="hidden" name="checkbox3" id="checkbox3" value="false" />
</label>
<script>
$(document).ready(function() {
$('#checkboxcheckbox3').click(function() {
if ($('#checkboxcheckbox3').val() == 'true') {
$('#checkbox3').val('false');
$('#checkboxcheckbox3').val('false');
$('#checkboxcheckbox3').prop('checked', false);
$('#aspire_previewrefresh').trigger('click');
} else {
$('#checkbox3').val('true');
$('#checkboxcheckbox3').val('true');
$('#checkboxcheckbox3').prop('checked', true);
$('#aspire_previewrefresh').trigger('click');
};
});
});
</script>
</div>
<div class="seq-box-form-field editornumberticked ">
<label for="numberticked">Number Ticked</label>
<input id="numberticked" name="numberticked" placeholder="" type="text" onkeydown="if (event.keyCode == 13) { event.preventDefault(); return false; }" value="" />
Here is an example of how to keep a text/hidden field's value updated to match the number of checkboxes currently checked.
$(() => {
$('input:checkbox').change(() => {
$('#count').val($('input:checkbox:checked').length);
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Example</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<input type="checkbox" /> A<br/>
<input type="checkbox" /> B<br/>
<input type="checkbox" /> C<br/>
<input type="text" id="count" value="0" />
</body>
</html>

How can I listen to all inputs that have a "required" attribute?

EDIT :
I have an input field and a checkbox. Checkbox allow to win "required" on this input field. I want to listen required, i mean if required is true or not. I don't want to listen checkbox.
==> When input win/lose required attribute, it trigger function (without use checkbox).
$(document).ready(function() {
$('input[type=checkbox]').click(function() {
cible_required_on = $(this).closest('.panel').find('.required_on');
if(!cible_required_on.prop('required')){
cible_required_on.attr("required", true);
} else {
cible_required_on.attr("required", false);
}
});
// Here my new function listening required attribute
});
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default" >
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-4 changement_position_champ" id="bottom_left">
<div class="panel">
<label> Raison Sociale</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-use" ></i></span>
<input type="text" class="form-control required_on" placeholder="Raison sociale"
aria-describedby="basic-addon1">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" ><p>Checkbox trigger required on input field</p></label>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
$('input[required]').change(function(){
alert('required')
});
$('input[required]').change(function(){
alert('required')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" required/>
<input type="text" />
Knowing I'm late to the party, here's my contribution:
// ES6 supported - () => {} , arrow-function
$(':input[required]').change((e) => {
alert("Changed: " + e.target.value);
});
// Older compatibility
/*
$(':input[required]').change(function(e) {
alert("Changed: " + e.target.value);
});
*/
input {
width: 200px;
display: block;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type something and unfocus from input.</p>
<form action="#">
<input type="text" required />
<input type="text" required />
<input type="checkbox" required />
<input type="text" />
<input type="submit" />
</form>
As mentioned in the question the user requires to select the input with some conditions like it is the checkbox and is required. So instead of running a loop which is more memory eating, we can use the jquery filter selectors to achieve the goal.
Below is the example.
var a = $('input[required][type="checkbox"]');
console.log(a)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' required>

if input is empty then show a picture, or another

I have an form, like this
<form>
<input type="text" id="abc" name="abc" value="abc"><img src="right.png">
<input type="text" id="abc1" name="abc" value=""><img src="wrong.png">
<input type="submit" id="submit" value="submit">
</form>
but I don't understand how to show this. When the input is not empty <img src="right.png"> and if it is empty then <img src="wrong.png">
Mark your input required and add some CSS, like this:
input:required:valid::after{
content: url(path/to/right.png);
}
input:required:invalid::after{
content: url(path/to/wrong.png);
}
<input type="text" required="required" minlength="1">
Fall back on #divy3993's if you have to support some horrible old browser
I would go with #dtanders but still a simple solution with JavaScript would not harm you.
function myFunction() {
var x = document.getElementById("abc");
var curVal = x.value;
var imageRW = document.getElementById('img_right_wrong');
if (curVal == "")
{
//wrong.png
imageRW.src = "http://findicons.com/files/icons/1671/simplicio/128/notification_error.png";
}
else
{
//right.png
imageRW.src = "https://d3n7l4wl5znnup.cloudfront.net/assets/images/icon-right.png";
}
}
<form>
<input type="text" id="abc" onkeyup="myFunction()" name="abc" value="">
<img src="http://findicons.com/files/icons/1671/simplicio/128/notification_error.png" id="img_right_wrong" width="2%">
<input type="submit" id="submit" value="submit">
</form>
Update:
Working Fiddle
Seems that you want to do dynamic form validation. So you can add event listener And JavaScript:
function checkInput() {
if ($("#abc").val().length == 0) {
// change image
}
}
<input id="abc" name="abc" onchange="checkInput()">
But using jQuery plugin is better:
link (EDIT: this link is dead, but it can be found on the Wayback Machine)
This can be done easily in angularjs using ng-show.
<!DOCTYPE HTML>
<HTML>
<head>
<title>Chat Application</title>
<script src="./scripts/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
</head>
<body ng-app="chatApp">
<div>
<input type="text" name="FirstName" ng-model="text" ng-init='text=""'>
<br />
<img src="right.png" alt="right" ng-show="text.length >0">
<img src="wrong.png" alt="wrong" ng-show="text.length === 0">
<input type="submit" id="submit" value="submit">
</div>
<script src="./scripts/app.js"></script>
</body>
</html>

Form validation in JSP using JavaScript

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<style type="text/css">
*{
font-family: cursive;
}
</style>
<script type="text/javascript">
function validate()
{
var a = document.getElementById("a");
var b = document.getElementById("b");
var valid = true;
if(a.value.length<=0 || b.value.length<=0)
{
alert("Don't leave the field empty!");
valid = false;
}
else{
if(!IsNumeric(a.value) || !IsNumeric(b.value))
alert("Enter a number");
valid = false;
}
return valid;
};
</script>
</head>
<body bgcolor="#CDCDCC" font-family="cursive" font-size="20px;" font-weight="bold">
<h2>Welcome <%=request.getParameter("uname")%>! Enter the numbers and the operation that you want to perform: </h2>
<form font-size="75px;" action ="serv" method="get" onsubmit="return validate();" >
<hr/>
Enter the 1st number: <input type="text" name="a" /><br/>
Enter the 2st number: <input type="text" name="b" /><br/><br/>
<label>Add</label><input type="radio" name="option" value="Add" /><br/>
<label>Subtract</label><input type="radio" name="option" value="Subtract"/><br/>
<label>Multiply</label><input type="radio" name="option" value="Multiply"/><br/>
<label>Divide</label><input type="radio" name="option" value="Divide" /><br/>
<input type="submit" value="Submit" />
</form>
</body>
This is my JSP and I've written a JavaScript function validate() that validates the user input against blank space and String.
My problem is that when i click on the submit button, for correct integer input, it is working. If an invalid input is given, i get a blank page. Can someone help me out with what the problem is and what is that i should modify? Thanks.
In you javascript you are checking via ID but there is no ID for input fields.
<input type="text" name="a" id ="a"/>
<input type="text" name="b" id="b" />
to check if a input is string or not use isNAN() like the following way
if(isNaN(a) || isNaN(b)){
alert("enter a number");}
Following is the complete working example
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<style type="text/css">
*{
font-family: cursive;
}
</style>
<script type="text/javascript">
function validate()
{
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("a").value;
var d = document.getElementById("b").value;
var valid = true;
if(a.value.length<=0 || b.value.length<=0)
{
alert("Don't leave the field empty!");
valid = false;
}
else{
if(isNaN(c) || isNaN(d)){
alert("Enter a number");
valid = false;}
}
return valid;
};
</script>
</head>
<body bgcolor="#CDCDCC" font-family="cursive" font-size="20px;" font-weight="bold">
<h2>Welcome <%=request.getParameter("uname")%>! Enter the numbers and the operation that you want to perform: </h2>
<form font-size="75px;" action ="serv" method="get" onsubmit="return validate();" >
<hr/>
Enter the 1st number: <input type="text" name="a" id="a" /><br/>
Enter the 2st number: <input type="text" name="b" id="b" /><br/><br/>
<label>Add</label><input type="radio" name="option" value="Add" /><br/>
<label>Subtract</label><input type="radio" name="option" value="Subtract"/><br/>
<label>Multiply</label><input type="radio" name="option" value="Multiply"/><br/>
<label>Divide</label><input type="radio" name="option" value="Divide" /><br/>
<input type="submit" value="Submit" />
</form>
</body>
Correct me if I'm wrong but your javascript function is looking for 'a' and 'b' IDs
And you don't have such... your input elements got names. add ids attributes...

Why can't I get my textbox to enable/disable with my checkbox?

I am sure this is any easy question, but I can't figure out what I am doing wrong.
What I am trying to accomplish is when the checkbox is "checked" I want it to enable the textbox.
Here is my code.
<html>
<title> iSCSI Admin v0.1 </title>
<body>
<fieldset style="width:640px;">
<legend>
Enable textbox
<input type="checkbox" name="checkbox1" onclick="enabledisable()">
</legend>
<form name="form1">
Text:
<input type="text" name="textname" disabled>
</form>
</fieldset>
<script type="text/javascript">
function enabledisable() {
if (document.checkbox1.checked) {
document.form1.textname.disabled=false;
} else {
document.form1.textname.disabled=true;
}
}
</script>
</body>
</html>
Try this:
<input id="textname" type="text" />
function enabledisable() {
if (document.getElementById("Checkbox1").checked) {
document.form1.textname.disabled = false;
}
else {
document.form1.textname.disabled = true;
}
}
Ok you fixed the question. You need to put the checkbox in the form.
Try this:
<body>
<script type="text/javascript">
function enabledisable() {
if (document.form1.checkbox1.checked) {
document.form1.textname.disabled=false;
} else {
document.form1.textname.disabled=true;
}
}​
</script>
<form name="form1">
<fieldset style="width:640px;">
<legend>Enable textbox <input type="checkbox" name="checkbox1" onclick="enabledisable()"></legend>
Text:
<input type="text" name="textname" disabled="true" >
</fieldset>
</form>
</body>​​​​
document.form1.textname.disabled='disabled';
document.form1.textname.disabled='';
http://jsfiddle.net/nqaJZ/
Note: I added -> id="checkbox1" to your checkbox field.
Note: I changed the if condition as well -> document.getElementById("checkbox1").checked
Note: I changed your code which enables / disables textfield as well -> document.form1.text.disabled=false;
notice I changed it from targetname (which was not there) to your textfield name which you had was "text.
Hope it helps.
iSCSI Admin v0.1
<body>
<fieldset style="width:640px;">
<legend>
Enable textbox
<input type="checkbox" id="checkbox1" name="checkbox1" onclick="enabledisable()">
</legend>
<form name="form1">
Text:
<input type="text" name="text" disabled>
</form>
</fieldset>
<script type="text/javascript">
function enabledisable() {
if (document.getElementById("checkbox1").checked) {
document.form1.text.disabled=false;
} else {
document.form1.text.disabled=true;
}
}
</script>
</body>

Categories

Resources