We Keep Coding

How to retain search terms in input field?

I have an input element,
<div>
<input type="text" id="query" autocomplete="off" />
</div>
that triggers an Apache Solr search. Upon submission the input field is cleared (possibly due to a page reload?).
How can I retain the query terms in the input field (or repopulate it, upon submission)?

I suspect the button associated with your page issues a submit (e.g. <button type="submit">Search</button>). If that is your case, you'll need to make sure you put the value the user submitted when you render the page again, you'll do this in the value attribute, e.g.
<div>
<input type="text" id="query" autocomplete="off" value="the-value-the-user-entered" />
</div>
You could also issue an AJAX call when the user issues the search, in which case, the form won't reload and you won't need to worry about this, but then you will need to write the code to issue the AJAX call.

How to fill out information automatically in a form

I have an index page which displays the information for two seminars. Each seminar has its own unique reference number as shown in the code below. When the user clicks the apply now button in a specific section, it redirects the user to the registration page. However, I want the Reference number on that page to be automatically filled out based on the button the user clicked. For example this is my index page:
<section class="sec">
<p class= "prt"> 1. PRT Seminar </p>
<p> Reference number: S00001 </p>
<a href="register.php">
<button id="button1">Apply Now</button>
</a>
</section>
<section class="sec">
<p class="prt"> 2. Developing a Written Diversity Statement Seminar</p>
<p> Reference number: S00002 </p>
<a href="register.php">
<button id="button2">Apply Now</button>
</a>
</section>
This is my registration page
<form id="registerForm" method="post" action="process.php" novalidate="novalidate">
<h1> User Registration Form </h1>
<fieldset class="info">
<p><label for ="reference"> Seminar reference number: </label>
<input type="text" name="reference" id="reference" maxlength="10" size="10" required="required"/>
</p>
</fieldset>
</form>
So, if the user clicks on the apply now button under PRT Seminar, the registration page should have S00001 filled out next to seminar reference number. How can I do that using Javascript?

You can redirect your users to the registration page and and pass in a query string into the url. So your registration page url could look like https://myapp.com/registration-page?seminar=S00001.
Then you can parse the query string on the registration page and render the seminar value inside of your HTML where you need it. You can write your own Javascript logic to do this or you can use an npm package like qs to help you out.
Just make sure that you're only including the parsed values into your HTML in a safe way. So don't use innerHTML, etc. to render the value.You can read this article from OWASP on how to avoid common security mistakes.

You can pass the reference number as a parameter in the register link and then on the registration page you can take that parameter and put it in the input.
This is how you can pass it in the link
This is how to take params from url with javasrcipt
https://gomakethings.com/getting-all-query-string-values-from-a-url-with-vanilla-js/

I think you can add an event listener to the button and then just get the place you want to fill in and change it's value.

POST Data to webpage using cURL

I have read many QA regarding posting data to website search field and press submit button.
I followed below solutions but still no luck.
Example1Example2Example3
I want to POST data to for example this website which search box and button code as follows,
<div id="search">
<input type="search" class="text" value="Enter model or part number" id="searchterm_head">
<button class="blue-header-search" type="submit" id="searchbutton_head">Search</button>
<a onclick="if ($('.nav-menu').is(':visible'))
{$('.nav-menu').slideUp(200).fadeOut(200)}
else {$('.nav-menu').slideDown(200).fadeIn(200);};"
class="nav-menu-icon">
<img alt="" src="/assets/images/nav-menu-icon.png">
</a>
</div>
But this code is not included in any form and values are submitted by javascript/jquery.
So is this possible to pass value this kind or search box using cURL
I want to fetch product page url and its content.
Any guidance would be appreciated.
Thanks a lot
Update
I think I found form tag, but there is no value in action attribute.
<form id="MasterForm" action="" method="post">

How to change the value of an html text field from its default value

I'm using struts 1.2 with angular js to send a jsp form, I am having problems setting the value of an input field. Here's the javascript code to set the default value of the field "city" that comes from the server into the jsp when the page loads, this is because i cannot use the html struts tag to pre-populated because it does not support the angularjs attributes i need to use in the input field:
<script>
$(function() {
var defaultCity = $("[name='city']").val();
$('#city').val(defaultCity);
});
</script>
here's the jsp section:
<body ng-controller="TypeaheadCtrl">
<form name = "LocationForm" method="POST" action="someaction.do">
<div class='container-fluid typeahead-demo' >
<div class="section">
<label class="field prepend-icon">
<input type="text" ng-model="asyncSelected" uib-typeahead="address for address in getLocation($viewValue)" id="city" class="gui-input" placeholder="City">
<span class="field-icon"><i class="fa fa-envelope"></i></span>
<html:hidden property="city"/>
</label>
</div><!-- end section -->
</div>
......
</form>
The problem with this is that once i input something in that field to override what's pre-populated, the text doesn't take, the struts action gets the original value the page loaded with only. So i tried to add the following in the jsp to see if at the time of submitting the form, the value can be changed, here's the code:
//Needed to override load value at submition time
$("[name='LocationForm']").submit(function(e) {
var cityValue= $("[name='city']").val();
$('#city').val(cityValue);
});
However it didn't work either, debugging into it would still return the original value even though i can see in the browser the new value i typed.
If on the other hand, i remove all the javascripts, then the jsp will send the newly typed value, however, it won't set the default value of the field at load time, i need both things to happen, load the default value and if i type something different in the input field, then the new value should be submitted.
Can someone please tell me what am i missing to be able to submit whatever is typed on the field on submission and not have always the default value sent over?
Thanks in advance

Resolved, apparently the problem was the binding, i put the submit function of the javascript code at the bottom of the page and it picked it up.

Displaying an error when a user tries to submit an angular form that isn't completed

I'm currently working with an Angular form where the user clicks "Next Step" and the next portion of the form shows up. However, I have it so that the next step button is disabled until all fields are valid.
My question is, how can I add a class I've made to highlight the field that's not completed when the user clicks the next step button? Should I use $scope.watch or is there an easier way to root out the source of the invalid form?

if I understand the question correctly, the documentation has a good example of what you are trying to accomplish: http://docs.angularjs.org/api/ng.directive:form
there a message is displayed if the field is empty
<form name="myForm" ng-controller="Ctrl">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span>