why doesnt this onclick jquery work? [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I have this HTML
<input type="text" id="one" />
<input type="text" id="two" />
<button type="button" id="onebtn" >hide</button>
and js as
$('#onebtn').on('click',function(){
$('#one').fadeOut('slow',function(){
$('#two').fadeIn('slow');
});
});
but this doesn't seem to work but, if I use <input type="button" /> it works, but I want to use <button ></button>
fiddle http://jsfiddle.net/Fzg7b/

It is because, you are not loading jQuery in your fiddle.
Load the jQuery version from the top left side. Then it would work!
http://jsfiddle.net/afzaal_ahmad_zeeshan/Fzg7b/5/
Try it here! It is working.
And for information as C Fairweather has mentioned to use
$(function(){
/* A shortcut for dom ready */
});
No jQuery code would work if there is no DOM ready function what we see as
$(document).ready(fucntion () {
/* functions here.. */
})
But jsfiddle doesn't need this! So it is not required! But a good point to come up with. :)

did you try to use .click()?
$('#onebtn').click(function(){
$('#one').fadeOut('slow',function(){
$('#two').fadeIn('slow');
});
});
It may help, but I had no time to test this.

also, you are displaying both the textbox1 and textbox2 elements. Then saying fade the first out and fade the second in but the second textbox is already visible. You cannot fade in an already visible item. Set the second textbox to hidden.
<input type="text" id="two" style="display: none;" />
Once this is done, your code functions as expected. Also, in your jsfiddle...remember to select the jquery version you are using. Currently you load nothing.

Related

My jquery isn't getting a value back with val() when the selector is working [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am trying to create a function in my customizer on wordpress to display certain fields but I keep getting back undefined when everything seems to be aligned in my JS file correctly.
function cta() {
//Selector for the entire radio area that "should return" the value (either "one" or "two")
var ctaOptions = $("input[name='_customize-radio-cta-type']");
//The ID selector for option one to check if this field is "checked"
var ctaOne = $('#_customize-input-cta-type-radio-one');
//The ID selector for option Two to check if this field is "checked"
var ctaTwo = $('#_customize-input-cta-type-radio-two');
//This console log always returns undefined, but returns the element without the .val()
console.log(ctaOptions.val());
//This always returns false even when I can see in the inspector this element is checked="checked"
console.log(ctaTwo.is(':checked'));
if(ctaOne.is(':checked')) {
$('#customize-control-button-two-label').addClass('hidden');
}
else if(ctaTwo.is(':checked')) {
$('#customize-control-button-two-label').removeClass('hidden');
}
}
I am using an unscores boilerplate for my wordpress theme, but unsure if that has anything to do with the conflict in the javascript. I have also confirmed that the ID's are correct using the inspector, just for some reason it breaks when trying to get is checked or the values.
Here is the HTML of the area I am referring to
<li id="customize-control-cta-type" class="customize-control customize-control-radio" style="display: list-item;">
<span class="customize-control-title">Call To Action buttons on banner</span>
<div class="customize-control-notifications-container" style="display: none;">
<ul></ul>
</div>
<span id="_customize-description-cta-type" class="description customize-
control-description">How many buttons do you want?
</span>
<span class="customize-inside-control-row">
<input id="_customize-input-cta-type-radio-one" type="radio" aria-
describedby="_customize-description-cta-type" value="one" name="_customize-
radio-cta-type" data-customize-setting-link="cta-type">
<label for="_customize-input-cta-type-radio-one">one</label>
</span>
<span class="customize-inside-control-row">
<input id="_customize-input-cta-type-radio-two" type="radio" aria-
describedby="_customize-description-cta-type" value="two" name="_customize-
radio-cta-type" data-customize-setting-link="cta-type" checked="checked">
<label for="_customize-input-cta-type-radio-two">two</label>
</span>
</li>
Try setting up a setTimeout(function() around your current js function, it might be that your js script is loaded before the php actually populate the input.
$( document ).ready( function () {
setTimeout( function () {
//Your function goes here...
}, 1);
} );
EDIT 1: Regarding your last comment. If the input value is intended to be fetch from a user input then you should add an event listener. something like this...
$('#_customize-input-cta-type-radio-two, input[name="_customize-radio-cta-type"], #_customize-input-cta-type-radio-two').change(function(){
});
I have came to the conclusion that my problem wasn't the javascript, it was down to the root of the selector. I still haven't been able to fix it, but my question is unanswerable as it wasn't the problem. Thank you for the feedback.
Edit 1:
PROBLEM FOUND! It wasn't my JS that was the problem at all. It was the way i brought in the previous file. I needed to enqueue a JavaScript file to customize_controls_enqueue_scripts. When I took my script and added it to a new JS file and put the below code into my customize.php
function theme_slug_customizer_controls() {
wp_enqueue_script( 'theme-customizer-controls', get_template_directory_uri() . '/js/customize-controls.js', array( 'jquery' ), '20170412', true );
}
add_action( 'customize_controls_enqueue_scripts', 'theme_customizer_controls' );

Call function when input is changed on text box? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm trying to create a button that changes color when username and password fields have both been entered with some sort of input (IE; neither username or password text boxes are empty)
Is there a way I can get a function to trigger when input of a text box is changed in NativeScript? I've asked at the NativeScript slack, among other sites but I don't seem to get a reply ever.
I thought this was a relatively simple request, especially when I'm using vanilla JS. Surely it must be simpler than using a framework such as Angular or Vue?
I do not want to use a framework, I am looking for a way to do this with plain JS. What have I tried? I've tried onChange="", textChange="", change="" but none seem to work.
If you are using plain JavaScript / TypeScript without any framework, then you must add your textChange listener after loaded event.
XML
<TextField loaded="onTextFieldLoaded"></TextField>
JS
function onTextFieldLoaded(args) {
const textField = args.object;
textField.off("loaded");
textField.on("textChange", onTextChange);
}
function onTextChange(args) {
console.log("Changed: " + args.value);
}
Here is a Playground Sample.
You can use onkeyup event to trigger the validation for the form.
See the Snippet below:
document.addEventListener("load", function(){
});
function validate(event){
if(document.getElementById("username").value.trim()!="" && document.getElementById("password").value.trim()!=""){
document.getElementById("btn").removeAttribute("disabled");
}else{
document.getElementById("btn").setAttribute("disabled", "disabled");
}
}
.enable{
}
<div>
<label for="username"><input type="text" id="username" name="username" onkeyup="validate(event)"/></label>
<label for="password"><input type="password" id="password" name="password" onkeyup="validate(event)"/></label>
<button id="btn" value="Submit" disabled>Submit</button>
</div>
Edited my whole answer because I initially gave you a whole demo in Javascript lol. Maybe someone with a lot of reputation points should make a Nativescript tag.
Anyway, have you tried it like this?
<TextField hint="Enter text" text="" (textChange)="myFunction($event)"></TextField>
OR
var el = page.getViewById("myEl");
el.on("textChange", myFunction);
function myFunction() {
console.log('woo');
}
And here's some relevant-looking documentation: https://docs.nativescript.org/angular/ui/ng-ui-widgets/text-field#text-field-binding

Why I can't get this element identified by an id attribute? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have this element, it is auto generated by mcssl checkout form. It is a custom field. I'm trying to select it using javascript like so:
var form_field_gclid = document.getElementById("#ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_gclid);
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">
But I'm getting null as a result. I've tried also, document.querySelectorAll(...); but the same result. It's working when I tried it from console but I'm wondering why it won't work if it's on page javascript. Any ideas would be appreciated. Thank you.
I tried getting rid of the # sign but same result.
<script type="text/javascript">
(function() {
var form_field_test = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_test);
}());
</script>
This is the full script I'm using.
You do not need the # in your call to document.getElementById. Simply remove it.
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");
If you were using jQuery, however, you would need it:
var myElement = $('#myElementId');
But since you are using vanilla JS, simply pass in the element's id as a string.
You have to put the script below the html of the input you are trying to hook.
If the form is not rendered the script will return null.
In your webpage you run the script before the input form is rendered.
I think you are looking for the input value. Right?
Also i added a button for you to give you an example about how to add more functionality. For example, how to add a background color to your input
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").value;
console.log(form_field_gclid);
// add color to your input
function addColor(){
form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").style.backgroundColor = "green";
}
If you mean to get the value of the input, i think you are looking for this:
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text" value="1">
<button onclick="addColor();">change color</button>
You could try this old school vanilla ::
var form_field_gclid = ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox;
console.log( form_field_gclid );
<input type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">

jQuery - Hide & Show Element REVERSE [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I got this code off the internet and I'd Like it reversed so the Element is hidden and a button is pressed to show it.
jQuery:
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#hide').toggle('show');
});
});
HTML:
<input onclick="change()" id='hideshow' type="button" value="Hide">
<div id='hide>
*content here*
So basically i'd like it reversed if possible. So the Element (div) is hidden, and the button (input) is clicked to show it.
You can do this with jQuery:
jQuery(document).ready(function(){
var $divHide = jQuery('#hide');
$divHide.hide();
jQuery('#hideshow').live('click', function(event) {
$divHide.toggle();
});
});
But I'd recommend you do it with CSS (with your jQuery in tact as it is now):
#hide
{
display: none;
}
I recommend this approach because Javascript executed on DOM ready can sometimes be visible to the user. Meaning your #hide div will be visible initially (if only for a split second).
Also (as an aside), I'd rethink the naming convention a bit. I wouldn't call a div 'hide', especially when, on occasions, you'll want it to show.
.live() was deprecated, you should use .on() instead, and also use .toggle():
jQuery(document).ready(function(){
jQuery('body').on('click','#hideshow', function(event) {
jQuery('#hide').toggle();
});
});
HTML:
<input onclick="change()" id='hideshow' type="button" value="Hide">
<div id='hide' style="display:none;">
^ check for this apostrophy
JS:
jQuery(document).ready(function(){
jQuery('#hideshow').on('click', function(event) {
jQuery('#hide').show();
});
});
.live doesn't get used anymore and got removed from the jquery api on version 1.9. So to ensure compatibility with newer versions you should use the on method instead (http://api.jquery.com/on/)
If you want to toggle the element, keep using
jQuery('#hide').toggle("show");
.show(); will only show and not hide it
try
jQuery(document).ready(function(){
jQuery('#hide').hide();
jQuery('#hideshow').live('click', function(event) {
jQuery('#hide').toggle('show');
});
});
DEMO
Jquery (replace live by on):
jQuery(document).ready(function(){
jQuery('#hideshow').on('click', function(event) {
jQuery('#hide').toggle();
});
});
HTML (add a single quote at the end of id='hide' and the closing tag </div>):
<input onclick="change()" id='hideshow' type="button" value="Hide">
<div id='hide'>
*content here*
</div>
CSS (add this css rule):
#hide {
display: none;
}
You need to trigger $("#hide").show(); on clicking on button element.
HTML Code
<input id='hideshow' type="button" value="Hide">
<div id='hide' style="display: none;">
LoremIpsum
</div>
jQuery Code
$("#hideshow").click(function(){
$("#hide").show();
});

show an dialog onclick with radiobuttons [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I am creating an practice exam for some students in my school. I have a lot of multiple choice questions and i'm trying to get it to work bud got stuck here. I am new to javascript and have no clue on how to get this working. So every question has 4 choices that look like this:
<tr>
<td>
<figures1></figures1>
</td>
<td class="questiona">
<br>
<input type="radio" name="q1" value="a"/>a<br>
<input type="radio" name="q1" value="b"/>b<br>
<input type="radio" name="q1" value="c"/>c<br>
<input type="radio" name="q1" value="d"/>d<br>
</td>
</tr>
The question is just an image and they have to select either a, b, c or d.
I've managed to get it working this far, bud what i want to add is an dialog whenever they click on a, b, c or d to tell them if the answer is correct or not and if not add a feedback to tell them why the answer is wrong. The reason why i am not using alert to give them a feedback is because i can't add images to an alert box.
Thanks in advance
Give your input a class like "answer".
Then in your jquery code:
$(document).ready(function(){
$(".answer").click(function(){
ValidateAnswerFunction(this); //sends the input element to the validate answer function
$( "#dialog" ).css("display", "block"); // shows the dialog .hide(); to hide it!
});
$("#dialog").click(function(){
$(this).hide();
});
});
function ValidateAnswerFunction(input){
switch($(input).val()){
case "a":
$("#dialog").html("correct");
break;
case "b":
$("#dialog").html("close");
break;
case "c":
$("#dialog").html("not even close <img src='http://www.w3schools.com/html/pic_mountain.jpg' style='width:100px;height:100px'>");
break;
case "d":
$("#dialog").html("are you even trying m8?");
break;
}
}
Where #dialog is your dialog:
<div id="dialog"></div>
JS fiddle
You'd need to test the value of the clicked element and then give feedback from that answer. This can be done i varity of ways, but I'd say that using $("[name=q1]").click() would be the easiest, and then use $(this).val() to check the answer.
Please refer to this fiddle for an example.
http://jsfiddle.net/u3csoave/
you can use confirmation alert to achieve this.there are too many jquery demo's available.
for example see this link:how to show confirmation alert with three buttons 'Yes' 'No' and 'Cancel' as it shows in MS Word
i think you can use confirmation alert to show user correct answer and put a link in the alert box which allows them to change their answer.
JQueryUI dialog..
function foobar() {
$("#dialog").dialog();
}
<div id="dialog" title="Dialog title">
<img src="foo.bar"/>
</div>
Then open dialogs in radiobuttons' onlick method.
Maybe you should just make one generic dialog and pass all the information needed as parameters so you don't end up with a page containing multiple dialogs.

Categories

Resources