<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.
Related
I am new to JS , and i was creating a form where i would click the save button and the entered text would shown in the page , but when i click the save button the change is shown for a sec and disappears.
Source Code :
function save(){
save_element = document.getElementById("input_element").value;
console.log(save_element);
document.getElementById("saved_text").innerText += save_element;
}
<html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="">
Name: <input type="text" placeholder="Enter a Text" id = "input_element">
<br>
<button id = "ds" onclick="save()">SAVE</button>
<h1 id = "saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html>
The default behaviour of the <form> is to submit the form data to server. You need to prevent this default behaviour by using preventDefault.
function save(event) {
event.preventDefault(); // Skip default behaviour
const save_element = document.getElementById("input_element").value;
console.log(save_element);
document.getElementById("saved_text").innerText += save_element;
}
<html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="">
Name: <input type="text" placeholder="Enter a Text" id="input_element">
<br>
<button id="ds" onclick="save(event)">SAVE</button>
<h1 id="saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html>
<html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="#">
Name: <input type="text" placeholder="Enter a Text" id = "input_element">
<br>
<button id = "ds" onclick="save()">SAVE</button>
<h1 id = "saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html>
Try <form action="#">, by using this your page will not be reloaded. Default behaviour of <form action=""> is submitting, so it will reload the page.
Ok the change disappears because the page is reloading to something blank
<form action="">
change to a hash like
<form action="#">
Give your Form an ID .then on you click event prevent default .... like this
let form = document.getElementById("MyForm");
//Custom Event ...
form.addEventListener('submit', (e) => {
// on form submission, prevent default
e.preventDefault();
//your other Code to change the text
});
This will prevent the form from making your page reload
The button has the default type submit and is trying to submit the form.
So if you define the button as button. It works.
<button type="button" id="ds" onclick="save()">SAVE</button>
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>
As described in the problem
I create two buttons. The one is used to add forms,the other one is used to submit data.However, after inputting data when i clicked on the button of submit,it didn't work
<%# page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GA'S WEB APPLY</title>
</head>
<body>
<script>var i=1</script>
<p>test is ing!</p>
<hr>
<div>
<form action="/webTest/TestWeb" method="post">
<input type=button onclick="document.body.insertAdjacentHTML('beforeEnd','<input type=text name='+i+' value='+i+++'> ')" value=add />
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>
Problem in your code is with '' quotes as well as ,whenever you append new input it appear out of <form></form> tag , so whenever you submit your form that value doesn't passed to your backened page and will always return null. Instead do like below :
var i = 1
$(document).ready(function() {
//location to add new inputs
var to_Add_at = $(".inputs");
var add_button = $("input[name='add']");
//on click of button
$(add_button).click(function(e) {
e.preventDefault();
$(to_Add_at).append('<input type=text name='+i+' value='+i++ +'>'); //add input box
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form action="/webTest/TestWeb" method="post">
<input type="button" value="add" name="add" />
<div class="inputs"></div>
<input type="submit" value="submit" />
</form>
As I can not see the backend data or anything else besides the code. I would say
1. File location wrong?
2. Page language should be javascript
3. Add quatations "" around value = add
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
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>