I have a Feedback form which allows people to submit feedback, however I want to give the user the option to remain anonymous, the thing is my CMS must have Email and Name as a mandatory fields so I was thinking of adding a dummy name and email email if they wish to be Anonymous and then hide the field. It'll look something like this:
<input type="checkbox" class="anon">
if this is ticked then add the name "Remain Anonymous" to the Name field and add anon#anonymous.com to Email field, and then also hide the div.remain-anonymous. If unticked, then show the div again and clear the fields to blank again. And do the same again if it is ticked again etc.
<form>
<div class="remain-anonymous">
<input type="text" value="Name" class="name-field">
<input type="text" value="Email" class="email-field">
</div>
<textarea placeholder="Feedback comments"></textarea>
<input type="submit" value="Submit">
</form>
You can try out the below JQuery to achieve what you want.
$(document).ready(function () {
$(".anon").on("click", function () {
var $this = $(this);
if ($this.is(':checked')) {
$(".name-field").val("Remain anonymus");
$(".email-field").val("anon#anonymous.com");
//comment this to see the fields set.
$(".remain-anonymous").hide();
} else {
$(".name-field").val("Name");
$(".email-field").val("Email");
$(".remain-anonymous").show()
}
});
});
check out the same code in the JSFiddle . click here
You can do it like below:
$(function(){
var email = "anon#anonymous.com",
name = "anonymous";
$('.anon').change(function(){
if($(this).is(":checked")){
$('.remain-anonymous').hide();
$('.name-field').val(name);
$('.email-field').val(email);
}else{
$('.remain-anonymous').show();
$('.name-field').val("");
$('.email-field').val("");
}
});
});
Related
How can I make jQuery script that shows symbol (*) instead of a letter when typing text in input. Value of text input shouldn't change, only the visible text.
Input type password is not an option, because I would like to make that it could be possible to see original text again with a click of a button. Also, password input is autocompleted in Google Chrome and in this situation I don't want it to be autocompleted.
You should use a password field, set autocomplete="false" and toggle between text/password for the field
document.getElementById("fooVisible").addEventListener("change", function() {
if (this.checked) {
return document.getElementById("foo").setAttribute("type", "text");
}
document.getElementById("foo").setAttribute("type", "password");
})
<input type="password" id="foo" autocomplete="false" />
Show: <input type="checkbox" id="fooVisible" />
You could store the value in a variable and replace all characters with the asterisk. This does not handle delete or backspace, but this should get you in the right direction if that's the way you want to go.
$(document).ready(function(){
var textValue = "";
$('.asteriskInput').keypress(function(e){
var textLength = $(this).length;
textValue += e.key;
$(this).val($(this).val().replace(/[A-Za-z]/g,'*'));
});
$('#changeInputView').on('click',function(){
$('.asteriskInput').val(textValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="asteriskInput" type="text" /><br />
<button id="changeInputView">Show characters</button>
When user enter the key press I used Jquery to submit form and after I append another <input> field for another input. But the problem is appended input field submit not working... Instead it expecting the old one.
Code
// html
<div class="ten columns">
<input id="txt_name" class="u-full-width" name="a" type="text" autofocus>
</div>
// javascript
$('#txt_name').keypress(function (e) {
if (e.which == 13) {
$.getJSON('/_main_submit', {
a: $('input[name="a"]').val(),
}, function(data){
$('.after_sub').append(
'<div class="ten columns">'+
'<input id="txt_name" class="u-full-width" name="a" type="text" autofocus>'+
'</div>'
)
$('div input').focus();
})
return false;
}
});
You can only have one element with a certain id in the DOM. Use classes instead of id's for your input fields. Your new input also has the same name, that should be changed, too, if you expect the form to have more than one input field.
I have form with each input field unique id and I have attached jquery on 'input' to form. I want to get id of field on which user change some value using jquery function. I am missing some puzzle in following code in alert(".... statement
$(document).ready(function () {
$("#CreateStudentProfileForm").on('input', function () {
alert($(this).find().closest().attr('id'));
});
});
html form
<input class="form-control text-box single-line valid" data-val="true" data-val-number="The field Student UWL ID must be a number." data-val-range="Only Number Allowed" data-val-range-max="2147483647" data-val-range-min="0" data-val-required="Require Your Student UWL ID" id="StudentNumber_UWLID" name="StudentNumber_UWLID" value="" type="number">
I have many instances of input field like above
How about if you attach the event to each field individually?
$(document).ready(function () {
$("#CreateStudentProfileForm").find("input,textarea,select").on('input', function () {
alert(this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="CreateStudentProfileForm">
<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
</form>
$('#CreateStudentProfileForm').on('change keyup','input', function(){
var id = $(this).attr('id')
})
"id" is the id you want...
if you want to track the change event for an input use change event
//assuming you input id is CreateStudentProfileForm
$("#CreateStudentProfileForm").on('change', function () {
alert(this.id) //should give you the changed input id
//alert($(this).find().closest().attr('id'));
});
keyup is better
$("#CreateStudentProfileForm").keyup(function () {
alert(this.id)
//alert($(this).find().closest().attr('id'));
});
updated
this gets all the input present in you form specified by id CreateStudentProfileForm and adds keyup event to track the changes.
//assuming CreateStudentProfileForm is form's ID
$("#CreateStudentProfileForm:input").keyup(function () {
alert(this.id) //should give you the changed inputs id
//alert($(this).find().closest().attr('id'));
});
do something like this http://jsfiddle.net/elviz/kqvdgrmk/
$(document).ready(function(){
$("#CreateStudentProfileForm input").keyup(function(){
alert(this.id);
});
});
Use either:
this.id;
Or get:
$(this).attr("id");
Supposing you have a similar HTML
<form id="CreateStudentProfileForm">
<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
</form>
Then you can do something like
$('#CreateStudentProfileForm > input').on('input change', function () {
alert($(this).attr('id'));
});
Note that this event will fire on both input and change. You may want to fire it only on change OR input, depending on what you need to do.
$(document).ready(function ()
{$("#CreateStudentProfileForm").find("input").on('input', function () {var get_id = $(this).attr('id');});});
I am new in javascript. I want a validation on my checkbox. I have this html
<input type="checkbox" name="acceptTerms"/>
<input type="submit" name="subscribe" value="Enter now" title="Enter now" />
When you submit, and you not select the checkbox. The checkbox must get the class "error". When you check the checkbox. Than the form must be sumit. How can make that with jQuery / js?
Thanks
Try the following:
$('#yourForm').submit(function(e){
var $check = $('input[name=acceptTerms]');
if (!$check.is(':checked')) {
$check.addClass('error');
e.preventDefault()
}
})
$('input[name=acceptTerms]').change(function(){
if (this.checked) $(this).removeClass('error')
})
I know only what I need but I do not know how to get that done.
This is the logic of the code, I really hope some of you has the solution.
How can I create in javascript or jQuery a function that will do the following?
If that checkbox is selected, when the button is clicked redirect the user to another page by passing the value of the textarea in the URL.
So that is the logic.
We have three elements.
1)The checkbox
2)The input type button
3) The textarea.
The checkbox is selected, the user clicks on the button and the user goes to another page , and the URL will include the value found in the textarea.
i.e.
http://mydomainname/page.php?ValueThatWasinTextArea=Hello World
Can you help me.
I think it is something simple for a javascript coder.
Thank you so much
$(function(){
$(':button').click(function(){
if($('input[type="checkbox"]').is(":checked")){
window.location.href = "http://mydomainname/page.php?ValueThatWasinTextArea="+ $('textarea').val();
}
});
});
**Of course if there's more than these three elements on the page, you're going to want some more specific selectors
You could subscribe to the submit event of the form and inside test if the checkbox was checked and if yes use window.location.href to redirect to the desired url:
$('#id_of_the_form').submit(function() {
var value = encodeURIComponent($('#id_of_textarea').val());
if ($('#id_of_checkbox').is(':checked')) {
window.location.href = '/page.php?ValueThatWasinTextArea=' + value;
return false;
}
});
If the button is not a submit button you can subscribe for the click event of this button and perform the same logic.
Might be some syntax problem because I code this on top of my head
<input id="myCheckbox" type="checkbox" />
<button id="myButton" onClick="buttonClick" />
<input id="myTextArea" type="textarea" />
<script>
function buttonClick()
{
var checkBox = document.getElementById('myCheckbox');
var textArea = document.getElementById('myTextArea');
if(checkBox.checked)
{
window.location = 'http://mydomainname/page.php?ValueThatWasinTextArea=' + textArea.value;
}
}
</script>
$(document).ready(function() {
$('#btnSubmit').click(function() {
if($('#chkBox').is(':checked')) {
window.location = '/page.php?passedValue=' + $('#txtField').val();
}
});
};
...
<form>
<p>
<input type="checkbox" id="chkBox"> Checkbox</input>
</p>
<p>
<input type="text" id="txtField" value="" />
</p>
<p>
<input type="submit" id="btnSubmit" value="Submit" />
</p>
</form>