jQuery display text input on page - javascript

I have a form with a text input field and a button. What I am trying to achieve is that after the user types something in the text input field and clicks the button, the text he typed in the box will be displayed in the span underneath the form. For some reason it doesn't work and I am trying to figure out why.
My HTML:
<form>
<input type="text" id="textInput">
<button id="submitButton" class="btn btn-primary">Submit</button>
</form>
<span id="guests"></span>
My JS/jQuery:
$(document).ready(function() {
$("#submitButton").on("click", function() {
var input = $("#textInput").val()
$("#guests").html(input)
})
});
The JS file in which I have my JS code is linked in the head like this:
<head>
<script src="guestList.js"></script>
</head>

You will need Event.preventDefault();.
Every time you click on button, page is being refreshed so no value is displayed. Default action of <Button> is to submit the form hence page is reloaded(Submitted).
Another easier option would be to set type = "button" hence button will not act as Submit button.
$(document).ready(function() {
$("#submitButton").on("click", function(e) {
e.preventDefault();
var input = $("#textInput").val()
$("#guests").html(input)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="textInput">
<button id="submitButton" class="btn btn-primary">Submit</button>
</form>
<span id="guests"></span>

Your button submits the form so page refreshes.
Just set Button type as type="button"
> <button id="submitButton" type="button" class="btn btn-primary">Submit</button>

HTML:
<form>
<input type="text" id="textInput">
<input type="submit" value="Submit" id="submitButton">
</form>
<span id="guests"></span>
JQuery:
$( document ).ready( function() {
$( "form" ).submit( function(e) {
e.preventDefault();
var input = $( "#textInput" ).val();
$( "#guests" ).html( input )
})
});

Related

Two Html buttons for two different functions

I have a form which has two Options, Submit and Overwrite.
It looks like this:
[ INPUT FIELD ]
[Submit] [Overwrite]
The Overwrite Button only appears when the value already is in the Database.
The HTML Code is:
<input type="text" name="target" id="target">
<button id="submit" name="submit" type="submit" class="btn btn-primary"> Submit </button>
<button id="overwrite" name="overwrite" type="submit" class="btn btn-primary"> Overwrite </button>
The JS Code is:
if(!problem){
data = "submit=save";
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
data+="&overwrite=on";
console.log( "overwrite=on" );
}
});
sendToBean(href, data);
jQuery.each(langs, function(i, lang){
sendToBean(href, data);
});
}
}
If I only have the Submit button, it works.
If I only have the Overwrite button, it works.
But if I have both, the Overwrite button wont work anymore.
Does anyone have a solution to this problem?
put retrun false in the anonymous callback function will do the trick. since you declare that the button is a submit button
if(!problem){
data = "submit=save";
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
data+="&overwrite=on";
console.log( "overwrite=on" );
}
return false;
});
sendToBean(href, data);
jQuery.each(langs, function(i, lang){
sendToBean(href, data);
});
}
}
When you click the submit button the page will be refreshed and the overwrite will return to the initial format and the selected will disappear, Try to change the input type to button :
<button id="overwrite" name="overwrite" type="button" class="btn btn-primary"> Overwrite </button>
Hope this helps.
Remove <input type=""> for Overwrite button you may use <button>
Overwrite
<input type="text" name="target" id="target">
<input type="submit" id="btnSubmit" name="btnSubmit" class="btn btn-primary" value="submit"/>
<input type="submit" id="btnOverwrite" name="btnOverwrite" class="btn btn-primary" value="Overwrite"/>
$(document).ready(function(){
$("#btnOverwrite").unbind("click").bind("click",function(e){
e.preventDefault();
alert("overwrite called");
});
$("#btnSubmit").unbind("click").bind("click",function(e){
e.preventDefault();
alert("submit called");
})
});
Review fiddle
https://jsfiddle.net/dipakchavda2912/rwdakvyg/

How to get value of a dynamically created form?

here is below 3 form which generated dynamically in my code.
<form id="abc">
<input id="link" value ="aa">name
<button type="submit">Submit</button>
</form>
<form id="abc">
<input id="link" value ="bb">name
<button type="submit">Submit</button>
</form>
<form id="abc">
<input id="link" value ="cc">name
<button type="submit">Submit</button>
</form>
in js i was trying to fetch input value of form which is clicked.
$(document).ready(function () {
$('#abc').submit(function (e) {
var bla = $('#link').val();
alert(bla);
e.preventDefault();
});
});
But whichever form i submit i always got 1st form input value. I know i am doing this thing wrong can you explain how can i get input value of the form which is submit currently.
id of element in document should be unique. Substitute .className for duplicate .id at <form>, <input> elements. Use event delegation to attach submit event for form elements having .className "abc"; use jQuery() with ".link" selector and context set to this at event handler, chain .val() to get .value of current <input> element.
// dynamic `html`
var html = `<form class="abc">
<input class="link" value ="aa">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input class="link" value ="bb">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input class="link" value ="cc">name
<button type="submit">Submit</button>
</form>`;
$(document).ready(function () {
$(document).on("submit", ".abc", function (e) {
var bla = $(".link", this).val();
alert(bla);
e.preventDefault();
});
$("body").append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
id should always be unique.In your case use class as a common selector
Here are the changes
HTML
id is replaced with class
<form class="abc">
<input class="link" value="aa">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input class="link" value="bb">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input class="link" value="cc">name
<button type="submit">Submit</button>
</form>
JS
using class selector & jquery find method to find an input with class link
$(document).ready(function() {
$('.abc').submit(function(e) {
e.preventDefault();
var bla = $(this).find('input.link').val();
alert(bla);
});
});
DEMO
While dealing with dynamically created form element, bind its event while taking document into context i.e. $(document).on("event_name", 'dynamic_element', function(){ ... });
So, below code shall work in your case.
$(document).on("submit", 'form.abc', function(){
... // you can get the form elements value here.
var bla = $(this).find('.link').val();
alert(bla);
e.preventDefault();
});
Note: Avoid using same IDs for multiple elements, use classes instead.
You can try the $("form") submit event to handle this
$(document).ready(function () {
$("form").submit(function(e) {
var bla = $(this).find('#link').val();
alert(bla);
e.preventDefault();
});
});
Here is the working sample:https://jsfiddle.net/e7r14p3t/
HTML ids should be used for only one element each. For multiple elements, you should use the class attribute, which can be selected in jQuery with $('.abc').
HTML:
<form class="abc">
<input id="link" value ="aa">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input id="link" value ="bb">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input id="link" value ="cc">name
<button type="submit">Submit</button>
</form>
JavaScript:
$(document).ready(function () {
$('.abc').submit(function (e) {
var bla = $('#link').val();
alert(bla);
e.preventDefault();
});
});

Jquery auto submit not working

I have a problem. I want when I click an h1 tag, then h1 tag id add in input value and Submitted automatically. But auto submits is not working.
If I click submit button then its submitted data.
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
Jquery:
$(document).on('click', 'h1', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
The problem is here:
$(document).on('click', 'path', function () {
what is path here?
you have to use either id, class, name of the attribute as a selector, but in your case there is nothing with path in html. So change path to:
$(document).on('click', '#my-id', function () {
and try again.
You can use a simpler approach as your button type is submit. Allot an id to it and on document click programmatically click on it.
<button type="submit" name="submit" class="btn" id="submitBTN">Submit</button>
THE JS:
$(document).click(function(){
$("#submitBTN").click();
});
Whatever be the event if you want to submit the form, you can always follow the above mentioned approach.
Just update #my-id instead of path:
$(document).on('click', '#my-id', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
In Your JQuery You mention You mention path but what is that
just simply change that into id of h1 tag So changes are as follows
$(document).on('click', '#my-id', function () {
Running Example
$(document).on('click', '#my-id', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>

Can't prevent submit on dynamically inserted <button> into DOM, that is part of a form

I have a really strange issue, that seems very basic but I can't get it to work.
I can't prevent the submit event of the button, that is dynamically instered into a div that is also part of a form.
Markup
<form>
...
<div class="dynamically-inserted">
<button class="copy-inquiry">Copy</button>
</div>
...
<button id="submit-form" type="submit">Submit</button>
</form>
jQuery
$( "body" ).on( "click", ".copy-inquiry", function(e) {
e.preventDefault();
console.log("button clicked");
});
On click the form submits and the console.log("button clicked") doesn't get printed. If I add type="button then the form doesn't submit but still nothing happens.
Thanks for checking this out.
You have to provide id='frm' to the form
Fiddle link for further explanation
Html
<form id="frm">
<button type="submit" class="btn1">ss1</button>
<button type="submit" class="btn2">ss2</button>
<button type="submit" class="btn3">ss3</button>
</form>
js
$(document).ready(function() {
$("#frm").submit(function(e) {
e.preventDefault();
var val=$(this).find("button[type=submit]:focus").attr("class");/* this selects the class of button which trigger submit event */
alert(val)
});
});
Hope this helps
The fix was apparently really simple. Change the body to document like this.
$( "document" ).on( "click", ".copy-inquiry", function(e) {
e.preventDefault();
console.log("button clicked");
});
JSFiddle https://jsfiddle.net/rj1405/jaordzuy/2/
You can also use <input> tag instead of <submit.
Please check the JSFidller The bellow code is not working in Stackoverflow
as given in the following example.
$("#form").submit(function(e) {
e.preventDefault();
alert('submit button')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="submit" class="btn1"/>
<input type="button" class="btn2" value= "btn2"/>
<input type="button" class="btn3" value= "btn3"/>
</form>

Reading text from button and put into input and run

I am struggling with buttons and JavaScript.
I have a button which name is for example button1 and I would like to put the name of it button1 to input and click enter. I mean that I would like to send query for searching/sorting.
Here is with what I am done so far. It is working but only put text into input box without any action.
http://jsfiddle.net/9t7L4dmw/
$( "button" ).click(function() {
var text = $( this ).text();
$( "input" ).val( text );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>button1</button>
<button>button2</button>
<button>button3</button>
<button>button4</button>
<input type="text" placeholder="Search">
So when you click the button you want:
the input to be filled with the button's name
submit a form?
In that case wrap (at least) the input inside a form tag. In your JS submit the form after filling the input.
http://jsfiddle.net/9t7L4dmw/3/
$("form").on('click', 'button', function () {
$("#search").val($(this).text());
}).on('submit', function (event) {
event.preventDefault;
var data = $(this).serialize();
alert(data);
// $.post(...);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method=post>
<button type=submit>button1</button>
<button type=submit>button2</button>
<button type=submit>button3</button>
<button type=submit>button4</button>
<input type=search id=search name=search placeholder="Search">
</form>
About version without ajax
It doesn't work here in the snippet:
Blocked form submission to 'http://stacksnippets.net/js' because the form's frame is sandboxed and the 'allow-forms' permission is not set.
but it's ok in jsfiddle: http://jsfiddle.net/9t7L4dmw/4/

Categories

Resources