How to get value of a dynamically created form? - javascript

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();
});
});

Related

jQuery display text input on page

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 )
})
});

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>

HTML input into Javascript variable

I've been attempting to grab text input from HTML and trying to output the text back into HTML but for some reason it does not seem to be working. Does putting input within a form alter the interaction with getElementById or is it possible that the second button usage of formaction is interrupting this?
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput");
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
EDIT: I have attempted to change
var test = document.getElementById("searchInput");
to
var test = document.getElementById("searchInput").value;
previously and it is still not working. Is there an interaction that is failing that I am missing? Also I would like to be able to store the input as variable i.e thats why I am purposely putting it into a variable before outputting it.
EDIT2: There wasn't anything particularly wrong about the code other than retrieving the value. I am currently using codepen.io to code and did not load jquery into the pen.
Since you're using jQuery, it will make more sense to use jQuery to obtain the elements' value:
Use this to always replace #text element contents with #searchInput value:
$("#text").html($("#searchInput").val());
Use this to append #searchInput value to #text element:
$("#text").append($("#searchInput").val());
But the whole logic does not make any sense. You are changing an elements' value that it is outside the form you are submitting. Either you should prevent submit button click event from submitting the form, or have the #text element inside the form as an input, textarea or hidden field:
$(document).ready(function(){
$("#submit").on("click",function(e) {
e.preventDefault();
$("#text").html($("#searchInput").val());
})
});
or having the #text element inside the form for submitting:
<form>
<input type="hidden" id="text" name="text">
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
You Using form element, so once you click the button , the form will be reloaded, if you want to display textbox value to the element , once remove the form element.
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
<div id ="text">
<h1 id="welc"></h1>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $('#searchInput').val();
$("h1").html(test);
});
});
</script>
Just Remove tag, and check it.
You need to find the element's value and then set it as HTML.
$("#text").html(test.value);
I have updated your question mate check this one .
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput").value;
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
I think this will work for you.
<! doctype HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="text" id="searchInput">
<br>
<button type="button" id="submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id="text">
<h1>test</h1>
</div>
</body>
<script>
$(document).ready(function () {
$("#submit").on("click", function () {
$("#text").html($("#searchInput").val());
})
});
</script>
</html>
Edit your JS code please try:
EDIT:
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $("#searchInput").val();
$("#text").html(test);
})
});

form.submit() not working in the below code

The javascript does not submit the form. On clicking the alert is
called, even checked with the object and it is not null. But the
.submit() method does not submit the form. Stuck here for a long time.
<script type="text/javascript">
$(document).ready(function(){
$("label img").click(function(){
alert("11");
$("#" + $(this).parents("label").attr("for")).click();
});
$("input").change(uploadForm);
});
</script>
<script type="text/javascript">
function uploadForm(){
alert("1");
document.getElementById('UploadFileFormId').submit();
}
</script>
<form id="UploadFileFormId" action="UploadFile" method="post"
enctype="multipart/form-data"
style="width: 40px">
<label for="UploadFileId">
<img src="images/button_up_lo.png"
onmouseover="this.src='images/button_up_hi.png'"
onmouseout="this.src='images/button_up_lo.png'" />
</label>
<span id="uploadSpanId" class="hidden">
<input type="file"
name="UploadFileName"
id="UploadFileId"/>
<button type= "submit" id="uploadButtonId" name= "uploadButton" ></button>
</span>
</form>
Try <input type="submit">
Use $('#uploadButtonId').submit(); since you are using jQuery.
Element ID is case sensitive (uploadButtonId vs UploadFileFormId)
The uploadForm function, which will submit the form, will execute only when the value of the control changes. Is that what you are expecting?
Note that, in this scenario, if you select a file, then select the same file again, no onchange event will fire.

Categories

Resources