click to submit form on other angular file - javascript

I am new to angularjs and node world. I am trying to implement functionality where I have one HTML form where user can search some data from some API and it does get's result on the same where below section. Whenever user search the data, search history gets stored under some other database as well. I have one more search history page where all the user search history gets stored and display's it correctly for that particular user. Now I want to have hyperlink on that search history and whenever user clicks on that search history the same search should happen again. Now my question is, I am getting search result on html form submit than how to I replicate the same on href from some different search history html?
Below is the sample code I have in place. Please help on how to implement this hyperlink and repeat the same search?
search.html:
<div ng-controller="someController">
<h2>Search Data</h2>
<form>
<div>
<div>
<input type="text" ng-model="search">
</div>
<div>
<div>
<button type="button" ng-click="getSearchData()">Search</button>
</div>
</div>
</form>
<!--Display data what we received once user clicks on search button-->
<div ng-repeat="search in searchData">
{{search}}
</div>
</div>
Now I have simple search history page as below.
history.html:
<div ng-repeat="searchHistory in list">
{{searchHistory}}
</div>
I can add some ng-click to this but I was not able to make this working. Basically as I have mentioned above, whenever user click on any of the search history, it should make the same search again but I am not sure how to submit html form under search.html when user clicks on history.html?

Related

Include additional search variables when search is executed

I have a basic search box I created to search a database. When a user submits their search terms, I would like to have it automatically attach additional terms to the search. The field "name" for the terms the user enters is "term". I have been able to add a hidden field that includes the additional search variables I want automatically attached when the user submits the form. The problem is the name for that field also has to be "term" for the search to work properly. When the search is submitted, the second "term" in the query string causes the search to not execute properly. Is there a way to pass additional "term" variables using a hidden field without passing the field name "term"? I've included an example below. Any help is greatly appreciated - thanks in advance!
term=%28dog+OR+cat%29+AND+%28young+OR+old%29**&term**=AND+veterinarian
My form structure currently looks something like the following:
<form action="form link" class="class-name" id="search-form" method="get" target="_blank">
<div class="wrapper"><textarea class="query-box" id="query-box" name="term" value="" placeholder="text"></textarea></div>
<div class="wrapper-2">
<div class="class-name-2"><input id="id_term" name="term" value="AND ("dog"OR "cat")" type="hidden"/></div>
<div class="button-wrapper"><button class="search-btn" type="submit"><span class="text"> Search </span></button></div>
</div>
</form>

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.

How to set cookie and based on if cookie exists skipping login screen?

I need to create a webpage that on first visiting it asks you to put just your name, then once they click login my jQuery will slide away that panel and they will be in the main part of the website. The next time they visit the web page it will go straight to the "main part" rather than ask their name again.
I've never made cookies before how, possible is this?
Also I've created my login form but when i click my submit button it refreshes the page, i want the submit button to be the thing that activates the jQuery.
<div class="login-page">
<div class="form">
<form class="login-form" method="POST" action="">
<!-- user inputs -->
<p class="name">Name:</p><input type="text" name="username" placeholder="Enter Your name Here" />
<!-- your submit button -->
<input class="login" type="submit" name="submit" value="login">
</div>
</div>
I need it to be an input form because that data is going to be saved onto a database by someone else.
In JS, creating a cookie is as simple as document.cookie = "username=John Doe";
And then reading cookies is var cookies = document.cookie; which will give you a semi-colon delimited string of cookies.
As for the second problem, you are using an HTML submit button, which submits the HTML Form. You have to instead capture the click event and prevent the default action. Something like this:
$('.login').click(function(event){
event.preventDefault();
//Do more stuff
})

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 show hidden form on load

I have a JSP page in which there are two forms.
One is the default and another is hidden.
On default form, there is a link to the hidden form. On click of this link, the hidden form appears which has some input fields and submit button.
When I click on submit, obviously the form gets submitted.
But when the output comes, the page gets loaded and shows the default form. I want to show hidden form instead. What should I do?
My JSP page has following code structure:
<div id="1st_form">
<form id="defaultForm" action="/searchModel/search">
%{-- form input fields--}%
<div style="float: left; margin-left: 15px;">
Advanced Search
</div>
</form>
</div>
<div id="2nd_form" hidden="hidden">
<form id="hiddenForm" action="/searchModel/search">
%{-- form input fields--}%
<input type="submit" id="searchButton" value="Advanced Search" >
<div style="float: left; margin-left: 15px;">
Advanced Search
</div>
</form>
</div>
And javascript functions are as follows:
function advancedSearch(){
$("#1st_form").hide();
$("#2nd_form").show();
}
function normalSearch(){
$("#2nd_form").hide();
$("#1st_form").show();
}
The problem is, when you send any HTML page to the client, all changes you did with Javascript previously will be lost. That is why you see the default form visible again after submit.
What you want to do is:
When the "Advanced Search"-button is clicked, show the "Advances Search" form and make the "Default" form hidden in the response.
What is something you need to do on server-side, because the client does not know which button submitted the form to the server.
So, you need check if the form was submitted by the "Advanced Search"-button on server side. To be able to do this, you need to give the button a name:
<input type="submit" id="searchButton"
name="searchButton" value="Advanced Search" >
Now, when this button is clicked, it's value will be sent to the server. In this case, Advanced Search.
Next, you need to check if this value was sent to the server in your JSP:
<div id="1st_form" ${param.searchButton == 'Advanced Search'?'hidden':''} >
...
</div>
<div id="2nd_form" ${param.searchButton == 'Advanced Search'?'':'hidden'} >
...
</div>
Note: param is an implicit object in Expression Language.
This way, when you first open the page, param.searchButton will be empty and it will show the default search. When the "Advanced Search" button was submitted, param.searchButton will be Advanced Search, and the advanced search will be visible.

Categories