getting value from input field

Question

How can I get the value from the input field in the form. the idea is to send this value later to the server and display other values associated with it.

<form action="" method="post" autocomplete="off" id="my_form"> <div class="txtb">{{form.date.label}} {{form.date}}</div> <div class="txtb"> <p class="txt"></p></div> <input type="submit" value="send" class="btn" id="btn">

In the Input field I assigned a class="pole" and trying to print value.

$('.pole').on('input', function() { var val = $('.pole').val(); $('.txt').html(val); $('.txt').val(val); });

but this does not work, how can this be done?

If you set value as html value of <p> it will not go to server as form values. You can use another input value in that case or better use input inside the form only? — Rohit Choudhary
– Rohit Choudhary, Commented Feb 11, 2020 at 6:09
@BInjal Patel yes. and try latter using ajax to transfer to the server and get an additional field with select — qwerty
– qwerty, Commented Feb 11, 2020 at 6:15

Manikant Gautam · Accepted Answer · 2020-02-11 06:59:30Z

1

Change$('.pole').val() to $(this).val() You should have to try like

$('.pole').on('input', function() { var val = $(this).val(); $('.txt').html(val); $('.txt').val(val); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <input type="text" class="pole" placeholder="type here"> <p class="txt"></p>

answered Feb 11, 2020 at 6:59

Manikant Gautam

3,5911 gold badge20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

qwerty Over a year ago

whether this may not work due to the fact that the form is displayed from the backend model (django) ?

Manikant Gautam Over a year ago

@ВадимШаройкин might be you can check it by inspecting .

qwerty Over a year ago

I do not understand why this does not work in my case

Bhushan Kawadkar · Accepted Answer · 2020-02-11 06:14:48Z

1

You need to use $(this) to get the instance of current input with class=pole instead of $('.pole'), see below code

$('.pole').on('input', function() { var val = $(this).val(); $('.txt').text(val); });

answered Feb 11, 2020 at 6:14

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

2 Comments

qwerty Over a year ago

value is not displayed in p tag

Bhushan Kawadkar Over a year ago

have you checked if val is showing current value properly? use console.log to print value in browser console

Yunus Temurlenk · Accepted Answer · 2020-02-11 06:33:59Z

As you want to submit value, you need to mention input field in html. Have a look at this demo

<form id="myForm" action="/action_page.php"> First name: <input type="text" id="fname" value="Donald"><br> Last name: <input type="text" id="lname" value="Duck"><br> <input type="button" value="Submit" onclick="submitForm()"> <p id="demo"></p> </form> function submitForm() { var firstName = document.getElementById("fname").value; var lastName = document.getElementById("lname").value; document.getElementById("demo").innerHTML = lastName; }

I want the value to be displayed not by pressing a button, but by input

Ritesh Khandekar · Accepted Answer · 2020-02-11 06:39:50Z

I think your input is sibling of paragraph. Try this:

$('.pole').on('keyup', function() { $(this).parent().find(".txt").html($(this).val()); });

brk · Accepted Answer · 2020-02-11 06:15:02Z

Not able to find dom with class txt & pole but you can try this code

$('.pole').on('input', function() { // changed here var val = $(this).val(); $('.txt').html(val); $('.txt').val(val); });

Collectives™ on Stack Overflow

getting value from input field

5 Answers 5

3 Comments

2 Comments

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

1 Comment

Comments

1 Comment

Related