Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

82
Views
Automatic form fill value from previous input with javascript/jquery

I need for a duplicated form to be autofilled since it's being displayed on two different pages, so the user doesn't need to fill it twice. The form in question is a delivery fee one, where the user fills in their zip-code and the fee is calculated.

The second form suggests the autofill from the previous one, I'd just like for it to be automatically filled and selected.

Data from the first form: first form picture

<input type="tel" name="PostalCode" id="PostalCode" maxlength="9" size="9" data-name="CEP" placeholder="Calcule seu frete" class="valid" aria-invalid="false">

Which should already be populated and selected on the following form second form picture

<input data-param-id="PostalCode" id="PostalCode" data-mask-postalcode="" maxlength="9" type="text" value="11040-221">

7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

ID need to unique, take care of it.

You can use val() to get value from the last input and use val() again to put it in first.

You can use focus() to select the input.

Tell me if i dont understand well your problem.

/*$('#PostalCode[data-name=CEP]').bind("change keyup input",function() { 
    let currentValCEP = $(this).val();
    $('#PostalCodeNext[data-param-id=PostalCode]').val(currentValCEP);
});*/

/*$('#first[data-name=CEP]').bind("click button",function() { 
    let currentValCEP = $('#first[data-name=CEP]').prevAll('#PostalCode').val();
    $('#PostalCodeNext[data-param-id=PostalCode]').val(currentValCEP);
});*/


let currentValMask = $('#PostalCodeNext').val();
$('#PostalCode').val(currentValMask).focus();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="tel" name="PostalCode" id="PostalCode" maxlength="9" size="9" data-name="CEP" placeholder="Calcule seu frete" class="valid" aria-invalid="false">
<br><br>
<input data-param-id="PostalCode" id="PostalCodeNext" data-mask-postalcode="" maxlength="9" type="text" value="11040-221">

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs