I am new to javascript and I was following a tutorial where based on the code below, the button content was supposed to change to adding before displaying the alert but my code is not working
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<input type="submit" value="Add to Cart" />
</div>
</form>
<script>
$(document).ready(function(){
$("button").click(function(){
button_content.html('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
</script>
How can I solve this problem ?
$("button") is not the right selector. That will look for <button> elements, and you don't have one.
You'll want $("input[type=submit]"), or better yet, give it an ID and use the selector on that: $("#mybutton").
Keep in mind that this will still submit the form back to the server - it'll just wait until the alert to do so.
Give this code a try for a few reasons.
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<!--<input type="submit" value="Add to Cart" />-->
<!-- First use a button not an input and give it an ID -->
<button id="btn_add" type="submit">Add to Cart</button>
</div>
</form>
<script>
// You can shorten up the ready statement
//$(document).ready(function(){
$(function(){
// Now bind a click handler with button's ID
// This is an older way of binding in jQuery
// $("#btn_add").click(function(){
// Use jQuery's on() instead.
$("#btn_add").on("click", function(){
// Change the HTML of the button by getting it by it's new ID
// button_content.html('Adding...'); //Loading button text
$("#btn_add").html('Adding...');
alert("Item added to Cart!"); //alert user
});
});
</script>
Use an ID anywhere that you can. Feel free to shorten up your ready statement. Use jQuery's on handler instead of click.
You don't have a tag to select it with jquery. Your html has to look like this for it to work:
<form class="form-item">
<button class="cart">Add to Cart</button>
</form>
Your problem is in the jquery selector and in the function reference
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<input type="submit" value="Add to Cart" />
</div>
</form>
<script>
$(document).ready(function(){
$("input[type=submit]).click(function(){
$(this).html('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
</script>
<button name="submit" value="Add to Cart" id="sendFeed">Add to card</button>
<script>
$(document).ready(function(){
$("button").click(function(){
button_content.html('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
return false;
});
});
You do not have a button element in your code. If you are targeting the input element, then you need to use the selector tag for input and then use .val() option to display the text.
$(document).ready(function(){
$("input").click(function(){
$(this).val('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
Example : https://jsfiddle.net/fz66qdv4/
Try it :
<html>
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<input type="submit" value="Add to Cart" />
</div>
</form>
<script>
$(document).ready(function(){
$("input[type=submit]").click(function(){
$(this).val('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
</script>
</body>
</html>
Related
Currently I use
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#output").load("https://somesite.com/Search.html");
});
});
</script>
<body>
<div class="formClass">
<div id="output">
</div>
<button type="button">Search</button>
</div>
to implement an offsite html into my current page.
Howevee this way, the visitor is required to press the "Search" button to reveal the content.
Is there a way to 'automatically' load this, without user interaction ?
(I know a way to trigger the button at siteload, but I'd rather have the button not be there in the first place)
Move the load call out of the click event listener:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#output").load("https://somesite.com/Search.html");
});
</script>
<body>
<div class="formClass">
<div id="output">
</div>
<button type="button">Search</button>
</div>
So, I want the user to be able to add a new paragraph when he/she clicks the Add button. I can see it's working when I click the button but after that the page refreshes itself, and then the supposedly new paragraph disappears.
Here's the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Item Lister</title>
<link rel="stylesheet" type="text/css" href="default.css"\>
</head>
<body>
<h1>ITEM LIST</h1>
<div id="container">
<ol>
</ol>
</div>
</br>
<form>
<input id="txtbox" type="text" name="txt"/>
</br>
<button id="add_btn" type="submit" name="add"/>Add</button>
</form>
<script src="myScript.js"></script>
</body>
</html>
And here's its JS code:
add_btn.onclick = function(){
var msg;
msg = document.getElementById("txtbox").value;
var newListElement = document.createElement("li");
var liText = document.createTextNode(msg);
newListElement.appendChild(liText);
document.getElementById("container").getElementsByTagName('ol')[0].appendChild(newListElement);
};
How do I add the new element after clicking the button?
Thanks.
Remove type="submit"
Edit : Turns out that just removing the submit attribute is not enough.
It should be changed to : type="button" :
<button id="add_btn" type="button" name="add"/>Add</button>
You have in fact at least two options:
Remove type="submit" as Bulent Vural already mentioned
Or return false from your onClick handler
Anyone know how to copy the text of one div into another?
My situation is that I want to make a textbox that can have information typed into it and then show up in a div.
this is my code:
$("#title").text() = $("#t").text();
"#t" is my textbox and "#title" is the div.
The answer can be in javascript or jquery I don't mind. However I'd prefer jquery.
You can easily done it like this by handling 'onkeyup' event of the input text.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
<div>
<input type="text" id="txt1"/>
</div>
<div>
<p id="typed-result"></p>
</div>
<script>
$(document).ready(function(){
$('#txt1').on('keyup',function(){
var result = $(this).val();
$('#typed-result').text(result);
});
});
</script>
</body>
</html>
You could try the following:
$("#title").text($("#t").val());
$(function(){
$("#copyBtn").on("click", function(){
$("#first").text($("#txtBox").val());
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">This is the div.</div>
<input type="text" placeholder="enter value" id="txtBox"/>
<input type="button" value="Copy text box value to div" id="copyBtn"/>
You can do this with
$('#getDiv').text($(this).val());
Try with this working example , just type something in textarea
$(function(){
$('#getText').on('keyup', function() {
$('#getDiv').text($(this).val());
})
});
<textarea id="getText"></textarea>
<div id="getDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
You can use the keyup JavaScript event, Something like this -
HTML -
<body>
<input type='text' id='one'>
<div id='two'></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</body>
jQuery -
$(document).ready(function() {
$('#one').on('keyup', function() {
$('#two').text($(this).val());
})
})
You can use this
$("#t").keyup(function(){
$("#title").text($("#t").value());
}
$('#txtArea').keyup(function(event) {
event.preventDefault();
$('.txt-block').text($("#txtArea").val());
// #txtArea is ur textarea box where you type text.
// .txt-block is your div where textarea Text shows.
});
<html>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#num").click(function () {
$(".Box:first").clone().appendTo("#form");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>
<input id ="j" type="text" />
<input id ="Text1" type="text" />
</div>
<button id="num">Click Me</button>
<button id="BtnSave">Save</button>
</body>
</html>
When i Click on Click me button it works.That is to add another set of textboxes. Here My problem is i need the data from these input textbox's.And the number of textbox's can be 5 to 10 based on the user clicking on Click Me button.It would be great if it is VBS.I need the data a user enters in the inputbox, when the user clicks on the save button.It can like a string.I just need the data.
I have a problem adding bootstrap class to button with a function. I want to add the disable class to #eng.
My code:
<li>
<div class="btnLang">
<form id="formLang1">
<button id="slo" class="btn btn-mini disabled">slo</button>
</form>
<form id="formLang2" onsubmit='return eng_clicked()'>
<button id="eng" class="btn btn-mini">eng</button>
</form>
</div>
</li>
<script type="text/javascript">
function eng_clicked(){
$('#eng').addClass("disabled");
}
</script>
you forgot the script tag
<script type="Text/javascript">
//scripts
</script>
Anyway I have better solution for you using jQuery, just remove "onsubmit='return eng_clicked()'" and and replace the codes below instead of your codes:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$("#formLang2").click(function() {
$('#eng').addClass("disabled");
});
</script>
have you add the script tag?
<script type="text/javascript">
function eng_clicked(){
$('#eng').addClass("disabled");
}
</script>