Hello there, I am attempting to retrieve all the child values from the parent div .clonedInput when the .send button is clicked. I also want the output to be formatted as shown below and placed in a temporary alert(); variable for code confirmation.
//Example:
//Div:1 textboxvalue1 textboxvalue2 textboxvalue3 textboxvalue4//
//New line//
//Div 2:textboxvalue1 textboxvalue2 textboxvalue3 textboxvalue4//
Live Demo: https://jsfiddle.net/5xu5myvq/
Thanks Again :)
To retrieve the value of each field, you can utilize jquery's .each() method:
("button.send").on("click", function () {
var total = 0;
$('.quantity').each(function(){
total += parseInt($(this).val());
});
});
Check out the updated fiddle here: https://jsfiddle.net/5xu5myvq/2/
For a customized display format similar to your original question, you can view the demo here: https://jsfiddle.net/5xu5myvq/4/
To achieve your desired outcome, make sure to modify the id #clonedInput1 to a class or any other identifier that suits your requirements.
$( document ).ready(function() {
$(".send").on("click", function(){
var txtValues = 'Div1:';
// On clicking the send button, retrieve all input values and display them in a new line//
$("#clonedInput1 input").each(function(){
txtValues += ' '+$( this ).val();
});
//output//
alert(txtValues);
});
});
.book-summary ol { counter-reset: item ; } .book-summary ol li { margin-left:10px; margin-top:5px; display:block; } .book-summary ol li:before { content: counters(item, ".") " "; counter-increment: item; } <div class="book-summary"> ...
While I could use a div container to solve this issue, I'm exploring the possibility of achieving it without one. My goal is to create a layout that is flexible between 640px and 1280px, but remains fixed beyond that range. The colored div I have cur ...
I am looking to create a function that will flash images when the mouse hovers over them and then stop flashing when the mouse moves away. However, I am experiencing an issue where "flash_imgs" is being called every time there is a mouse movement over the ...
I have been facing an issue while trying to call a function from my ViewModel within a foreach loop. It seems like the function goes out of scope as soon as I call it. Being new to JavaScript, I am struggling to understand why this is happening. Here is t ...
I'm facing a minor issue. I want to create a parallax background effect similar to what can be seen on nikebetterworld.com. In my initial attempt, I managed to achieve some functionality, but I believe it can be improved. As I scroll, the background p ...
While revisiting the HTML5 spec, I came across a question about nesting a nav element within a header. The description for the header element seemed a bit peculiar to me, mainly because I couldn't fully grasp it. In the given example, the page inc ...
I am trying to implement a loader that will hide after a certain amount of time when the user clicks on a profile. I have used a timeout function to achieve this behavior. However, the loader is appearing on the left side instead of within the respective ...
Currently, I am working on manipulating an array in my code. I have already accessed the array and begun the process of displaying its contents using the following code snippet: <html> <?php $file=fopen("curr_enroll_fall.csv", "r"); $records[]=fg ...
My code includes a submit button that is currently disabled. I am looking to enable it when the user clicks on the "I agree" checkbox using jQuery. Can someone assist me with this? My code is written in HTML, JavaScript, and jQuery. <input id="agree" ...
My circular progress bar features two paths, with one path increasing in length as data is received, eventually turning the entire circle red. Here is the SVG HTML code: <path d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#A9B0B7" ...
Is it possible to fetch an image from an external website by using its CSS id or class in conjunction with JavaScript/jQuery's get methods? If so, could someone provide guidance on how to achieve this task? ...
In this particular section of code, jQuery is being used: $(".btnGorevOlustur").click(function (e) { var fileUpload = $(".fileGorevResim").get(0); var files = fileUpload.files; var dt = new FormD ...
Currently, I am using VUE.js 2 in my project. Here is my website's DOM structure: <aside :style="{height : height()}" class="col-sm-4 col-md-3 col-lg-3">...</aside> <main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents" ...
Looking for assistance with Jquery smartwizard? Check out the link. I want to disable validation when a user clicks on the "Previous" button in any step, except for the first step where the Previous button is disabled by default. Below is my JavaScript co ...
I experimented with a basic code snippet to test tinyMCE, and everything is functioning properly. However, I encountered an issue when attempting to add multiple plugins simultaneously. In this instance, I utilized the tinymce CDN for reference. Below is ...
This unique modal box does not have a visible tab. Instead, it utilizes the href attribute for navigating to other pages. <div id="bootmodal" class="modal fade" tabindex="-1" data-width="370" data-backdrop="static" data-keyboard="false" style="display: ...
Is it possible to alter the shape of a text box, creating a rectangle with a portion removed from one side? I have included an example image for reference. https://i.sstatic.net/oNyum.png I came across clip-path: polygon in CSS, but it seems to only accep ...
On my website, the menu is structured like this: <nav id="menu"> <label for="tm" id="toggle-menu">Menu <span class="drop-icon">▾</span></label> <input type="checkbo ...
I am struggling to make both jQuery scripts work together smoothly! Below is the code I'm using: (function($){ //The first parameter of this function is called $ $(document).ready(function(){ // tabbed boxes functionality $(&apos ...
I encountered an issue while attempting to transfer all the JavaScript to a separate js file and then adding that js file to the html per usual. The console displayed the following error message: The resource from “http://localhost:3000/public/main.js” ...