How to trigger the 'change' event if jQuery sets the value from that button? Is it possible?
Code Snippet attached below:
$(".first").change(function() {
alert('something');
})
$(".button").click(function() {
$(".first").val('Button Value');
})
<!DOCTYPE html>
<html>
<head>
<title>Change</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="text" name="" class="first">
<input type="button" name="" class="button" value="Change">
</body>
</html>
The answer is in the question!!! Use .trigger()!
$(".first").change(function(){
alert('something');
})
$(".button").click(function(){
$(".first").val('Button Value').trigger("change");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="" class="first">
<input type="button" name="" class="button" value="Change">
It wont call the change event, may be you can call it manually like this.
$(".first").on('change',function(){
alert($(".first").val());
})
$(".button").click(function(){
$(".first").val('Button Value');
$(".first").change();
})
Update:
Use oninput which is raised when an element value changes.
$(".first").on('input', function(){
alert('something');
})
here is simple example
$(".first").on('input', function(){
alert('something$(".first").on('input', function(){
alert('something');
})');
})
I guess you want to pop an alert on the page when the button is clicked, i.e. when the user submits some data to the form instead of alerting at the exact moment, you wish to pop an alert when the user clicks the button. Cause that is what i understood from your question. Maybe to do that all we can do is:
$(".button").click(function(){
alert("something");
$(".first").css("outline", "1px solid #3366BB";
});
See if this helps any.
Related
I need one help .I need to check radio button and set the value using Jquery/Javascript.I did something but its not working.
<input type="radio" name="con" id="con" value="" onClick="checkCon();">Country
<button type="button" id="btn">Check</button>
document.getElementById('btn').onclick=function(){
var condata='123';
$("input[name=con][value=" + condata+ "]").prop('checked', true).trigger('click');
}
Here when user will click on check button it can not check the check box and can not set the value.Please help me.
try this, it can help:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script>
$(document).ready(function(){
var condata = '123';
$("#btn").click(function(){
$('#con').val(condata).prop('checked', true).trigger("click");
});
});
function checkCon()
{
alert($('#con').val());
}
</script>
</head>
<body>
<input type="radio" name="con" id="con" value="" onClick="checkCon();">Country
<button type="button" id="btn">Check</button>
</body>
</html>
this code is working I've checked this, you can also try
its probably because you are mixing up javascript and jQuery , either you should use jQuery or JavaScript. Hope the above code help. and make sure you have added jQuery library before using this code
You have to use the cotes.
Reference
$("input[name='con'][value='" + condata+ "']").prop('checked', true).trigger('click');
It's clear that there's no radio button with value '123'.
Note 1 : You don't need to prop and trigger at the same time, just prop or trigger the click events.
$("input[name=con][value=" + condata+ "]").trigger('click');
Note 2 : Click trigger automatically change the radio button properties. If you want to force it checked, do something like this.
$("input[name=con][value=" + condata+ "]").on('click', function(e) {
e.preventDefault();
$(this).prop('checked', true);
});
<input type="radio" name="con" id="con" value="" onClick="checkCon();">
Your radio button don't have value="123"
That is why it's not getting checked.
This is the corrected tag
<input type="radio" name="con" id="con" value="123" onClick="checkCon();">
and it will work as intended
Can anyone help me with this script I'm trying to get working? I need a text box with a submit button, when a certain id is entered I need them to be re-directed to a certain site (below examples in the script are are yahoo, bing, etc).
This below is what I have so far, but the submit button doesn't show up and when the submit button is hit it doesn't seem to execute the script.
I just get a #? added to the url... I'm working in opencart so I think part of the problem might be with opencart.
<html>
<head>
<script>
document.getElementById("gobutton").addEventListener("click", function(event){
event.preventDefault()
var idmap={
REDDIT:"http://reddit.com",
YAHOO:"http://yahoo.com",
BING:"http://bing.com"
};
id=document.getElementById("siteid").value;
if (id in idmap) {
alert("going to "+idmap[id]);
window.location.href=idmap[id];
} else {
alert("invalid code ["+id+"]")
}
event.preventDefault()
});
</Script>
</Head>
<Body>
<form id="urllauncher" action='#'>
<label for="siteid">Site id</label>
<input type="text" id="siteid">
<button type="submit" id="gobutton">Go</button>
</form>
</Body>
</Html>
Thanks for any help on this!
You should add your script at the end of the body.
You are calling document.getElementById("gobutton").addEventListener too early, at this point the button is not yet present in the page DOM, so no event is attached to it.
Working code :
<html>
<body>
<form id="urllauncher" action='#'>
<label for="siteid">Site id</label>
<input type="text" id="siteid">
<button type="submit" id="gobutton">Go</button>
</form>
<script>
document.getElementById("gobutton").addEventListener("click", function(event){
event.preventDefault()
var idmap = {
REDDIT:"http://reddit.com",
YAHOO:"http://yahoo.com",
BING:"http://bing.com"
};
var id = document.getElementById("siteid").value;
if(id in idmap) {
alert("going to "+idmap[id]);
window.location.href=idmap[id];
} else {
alert("invalid code ["+id+"]")
}
});
</script>
</body>
</html>
PS : try to indent your code prior to posting it !
I think if you remove that form tag ,it will solve all your problems.
I think there's no need for it be of submit type and have a form at all
Just remove those and the event.preventDefault()
I have created a popup which allows users to edit a value then they can submit it again
Html:
<body>
<input id="submit" type="submit" value="Submit" data-theme="b" data-icon="check" data-rel="popup"/>
<div id="success" data-role="popup">
</div>
<div id="fail" data-role="popup">
<p>Fail</p>
</div>
</body>
jQuery:
$('#submit').click(function(){
var doStuff = true;
if(doStuff === true){
$("#success").empty();
$("#success").append('<p> <input type="text" value="' + doStuff + '" /> <input type="submit" id="popupConfirm" value="Submit" /> </p>');
$("#success").popup("open");
}else{
$("#fail").popup("open");
}
});
$('#popupConfirm').click(function(){
console.log("jhasgd");
});
Currently the click is not working at all that's why I have gibberish in the console.log and also I am not sure how to get the value of the entered input.
So my question is first how can I get the submit click to work and then output what they wrote?
fiddle of the code
$(document).on('click', '#popupConfirm', function(){
console.log("jhasgd");
});
Where are you adding the jQuery code at? If you are adding it all above the HTML, it might be trying to bind the #submit input before it exists in the DOM. Can you try to wrap the code in a document ready so it won't do the click binding before the DOM gets filled up.
$( document ).ready(function()
{
$('#submit').click(function(){
console.log("clicked the button");
});
});
Edit: I just saw the comment where you figured this out above. You didn't really have a code solution provided, so I will just leave this as is.
Hi i have two check boxes PlanA AND AndroidApps and one textbox when i checked check box then text box enable and when i unchecked thrn text dox disabled but problem is when tex box is enable and i write something in text box and then unchecked my checkbox then my textbox disabled but that text which i typed it does not delete and text box does not clear
Here is my code
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#main_box').on('change',function(e) {
console.log("dfsd");
$("#a2").prop("checked",this.checked);
$("#emailid").prop("disabled", !$(this).is(':checked'));
});
});
</script>
</head>
<body>
<input id="main_box"type="checkbox" name="PlanA" value="A"><label for="PlanA"><span style="font-weight:bold">PlanA</span></label><br>
<input name="PlanA" type="hidden" value=0 />
<input type="checkbox" name="AndroidApps" id="a2" value=1><label for="AndroidApps"><span style="font-weight:bold">AndroidApps</span></label><br>
<input name="AndroidApps" type="hidden" value=0 />
<input type="text" name="emailid"id="emailid"disabled="disabled" required size="45" >
</body>
</html>
How can i achieve this
Thanks in advance
You can use val() to set the value of your input:
$("#emailid").val('');
Updated Fiddle
Add a condition
$(document).ready(function () {
$('#main_box').on('change', function (e) {
$("#a2").prop("checked", this.checked);
$("#emailid").prop("disabled", !this.checked);
if(!this.checked){
$("#emailid").val('');
}
});
});
Demo: Fiddle
Use this Link::
http://jsfiddle.net/rjha999/DM9b9/
contains code for checkbox check ::
$("#chk").click(function(){
if($("#chk").is(":checked"))
{
$("#txt").val('');
}
})
You can use val() to set the value of your input:
$("#emailid").val('');
and if your are retrieving values, you use:
$(selector).val()
Don't get confused with those two
Hope this helps..
I am new to ajax.
I have index.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"n.php",success:function(result){
$("#div1").append(result);
}});
});
});
</script>
<div id="div1" style="margin-left: 25;"></div>
<button>Add Author</button>
demo.php
Name:<input type="text" name="txtname">
age:<input type="text" name="txtage">
Above code adds name and age textboxes on index.html page when 'Add Author' button clicks without refreshing page.
Now I want to put another button 'remove author',and want to perform exact opposite action(i.e) remove Name and age textboxes which are added previously.
I don't know how to do this.Is it possible through something like this
$("#div1").(result);
Thanx in advance.
Try this one
<div id="div1" style="margin-left: 25;"></div>
<button id="addAuthor">Add Author</button>
<button id="removeAuthor">Remove Author</button>
<script>
$(document).ready(function(){
$("#addAuthor").click(function(e){
e.preventDefault();
$.ajax({url:"n.php",success:function(result){
$("#div1").html(result);
}});
});
$("#removeAuthor").click(function(e){
e.preventDefault();
var lastNode = $("#div1").children().last();
lastNode.prev().remove();
lastNode.remove();
});
});
</script>
You can do $("#div1").empty(), which will empty the div. Is that what you need?
Try this:
$(document).ready(function(){
$("#remove").on("click",function(){
$("#div1").empty();
});
});
Or use
$("#div1").html(""); instead of $("#div1").empty();