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.
Related
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>
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
})
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?
I try to make my checkout page more friendly and how to do this:
I have guest form`s and save button after them. And after guest info is saved (instead payment option) are show send my order button - this is from one module Cash on delivery, but instead to choice only this i move button to be showed directly.
BUT: Many clients are confused from this "save" button. I want to marge this two buttons in one.
How to do this? What is the best solution: to add some js when for save button or adding new button instead these 2?
You can see the problem page in my live shop here: http://bijutaniki.com/porychka (do not forget to add product like: http://bijutaniki.com/prysteni/8-prysten-na-nastroenieto.html - and shop is on bulgarian)
Now process looks like that:
What i want to do:
I try two times to add new button with js instead these to but without success. May be if use "save" button and add js to click on other "send order" button will be more easy because when "save" been clicked check fields above and if fields are valid show message.
What are you think, how to combine this buttons.
Thanks!
EDIT:
Save button and message:
{$HOOK_CREATE_ACCOUNT_FORM}
<p class="submit">
<input type="submit" class="exclusive button" name="submitGuestAccount" id="submitGuestAccount" value="{l s='Save'}" />
</p>
<p style="display: none;" id="opc_account_saved">
{l s='Account information saved successfully'}
</p>
<p class="required opc-required" style="clear: both;">
</p>
Send order button (with smile):
<div class="cod_cofirm">
<form action="{$link->getModuleLink('cashondelivery', 'validation', [], true)|escape:'html'}" method="post">
<input type="hidden" name="confirm" value="1" />
<p class="cart_navigation" id="cart_navigation">
<input type="submit" value="{l s='Send order' mod='cashondelivery'}" class="extraorderbutton" />
</p>
</form>
</div>
Because prestashop have controllers may be need to show code from some controller?
I guess there is no valid answer without showing us code, I'll try it anyway:
$('NEW_Send_Order_btn').click(function(e){
e.preventDefault();
$('Save_btn').trigger('click');
if($('Save_btn').hasClass('well_done')){
$('Send_my_order').trigger('click');
}
});
So I've been stuck on this problem for a day or so now and I'm still not getting very far. I'm using a django inline form-set, this allows for all previous saved forms to be displayed and then one extra empty form. I'm using javascript (jQuery) to hide all the forms until a user clicks an "edit" or "add new" button (p tag styled to look like an a tag) then the form is slideToggled for the user to see then edit.
The problem I'm running into is when the form isn't valid according to my regex in the forms.py. The form doesn't save, obviously, but the slideToggle closes. If you click the edit button again it opens with error messages over the fields that had incorrect input.
What I'm wanting is that if those error messages are present, I want the form to be open and showing which fields need to be corrected. Here's the code before submitting a form:
<div>
<p class="show_edit_ops button black small">Add New »</p>
<p class="show_edit_ops button black small" style="display:none;">Nevermind «</p>
<div class="formWrapperClass">
<div class="fieldWrapper">
<div class="form_errors"></div>
<p class="field_label"><label for="id_location_set-0-street">Street</label>:</p>
<p class="form_field"><input type="text" name="location_set-0-street" id="id_location_set-0-street" /></p>
<p class="field_help_text">Enter your residence number and street</p>
</div>
<div class="fieldWrapper">
<div class="form_errors"></div>
<p class="field_label"><label for="id_location_set-0-street2">Street2</label>:</p>
<p class="form_field"><input type="text" name="location_set-0-street2" id="id_location_set-0-street2" /></p>
<p class="field_help_text">Enter your apartment number or P.O. box</p>
</div>
<div class="fieldWrapper">
<div class="form_errors"></div>
<p class="field_label"><label for="id_location_set-0-city">City</label>:</p>
<p class="form_field"><input type="text" name="location_set-0-city" id="id_location_set-0-city" /></p>
<p class="field_help_text">Enter your city</p>
</div>
And the form goes on, but you get the idea. And this is one of the fieldWrapper div's after submission with an incorrect input:
<div class="fieldWrapper">
<div class="form_errors"><ul class="errorlist"><li>You must enter a street</li></ul></div>
<p class="field_label"><label for="id_location_set-0-street">Street</label>:</p>
<p class="form_field"><input type="text" name="location_set-0-street" id="id_location_set-0-street" /></p>
<p class="field_help_text">Enter your residence number and street</p>
</div>
I've tried many things to test to see if errorlist exists, that way if it does I can style that form to be open after a bad submit. I've tried find and children pretty extensively, but possibly incorrectly, in ways like this:
if($(".form_errors").find($(".errorlist")) == true){
document.write("error!");
}
But with no luck. If I take out the == true then I get 'error!' on every page of my site. I'm baffled, so any help would be great. All I really need is a correct check to see if errorlist exists, I'm pretty sure I can take it after that.
Thanks!!
Try this:
if($(".form_errors").find($(".errorlist")).length){