I'm using bootstrap-tokenfield
I'm using tokenfield in search bar, and have one small problem, lets say I search: searchtag1, searchtag2 and after I click on search and page loads my search resuts in search input there is no searchtag1, searchtag2
I want tags that I search for stay in input box on search page also, how to accomplish this?
I'm using default bootstrap form
<div class="search">
<form class="form-inline" role="form" action="{{ url('sonata_search') }}" method="GET">
<div class="form-group">
<input id="tags" class="form-control tokenfield" name="search" value="tag, tag2" placeholder="Search" type="text" />
<button type="submit" id="sonata_search_submit" class="btnbtn-default">
<i class="fa fa-search"></i>
</button>
</div>
</form>
</div>
You can use sessionStorage or localStorage, cookies or you can submit form with AJAX and just show submitted tags in input field on ajax success with no need for page reload.
Here is example with sessionStorage:
$(function() {
// on form submit set tags in sessionStorage
$('form').on('submit', function() {
var tagsValue = $('#tags').val();
sessionStorage.setItem('tags', tagsValue);
});
// if tags exist in sessionStorage set them as value in input field
var tagsSession = sessionStorage.getItem('tags');
if (tagsSession != null){
$('#tags').val(tagsSession);
}
$('#tags').tokenfield();
});
The HTTP protocol, and therefore web servers are stateless. Cookies and session variables are the easiest ways to get around that and implement cross-page state.
But there is a better way. It looks like you are using a laravel and blade, but this approach will work in generally the same fashion for any web server / library.
What you need to do is send the tags to the search "results" page. In the template you need to figure out some way to re-create the tags with the data you got back from the server.
Related
I basically have a search box, I am trying to get the value inserted and use on a separate /results.htm screen via the submit button. I've been able to get and process the results within the same page; but I am trying to do this after redirecting to a new page
/search.html
<script>
jQuery(document).ready(function() {
jQuery("#submit").click(function() {
var ZipSearch = jQuery("#Zipcode").val();
});
});
</script>
<div class="search_bar">
<form action=""><input type="text" name="Zipcode" id="Zipcode" value="" maxlength="5" placeholder="Zipcode">
<input type="button" name="submit" id="submit" value="Submit"/></form>
</div>
Want to keep input value content from /search.htm within a variable on next page, separate, /results.htm
How can I keep the user input value and use on my separate 'results' page?
Remove all the JavaScript from search.htm. There's no point in writing custom software to do things HTML has built-in.
Set the action of the form to the URL of the second page (action="/results.htm").
Change the button to a submit button (type="submit")
Read the data from the query string (location.search in JavaScript or $_GET in PHP).
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">
In many sites, I have seen after clicking on "Sign Up" or "Register" button we are either re-directed to other page where the insertion of our data in database takes place. Like in Facebook, when you click "Sign Up" it goes to the facebook.com/r.php page. I want to create a registration form which when submitted, will be not re-directed but will validate and insert data in database in the same page.
For example, Facebook uses a form such as:
<form id="xyZ" name="abc" method="post" action="r.php">
It redirects us from index.php to r.php.
But I want to use:
<form id="xyZ" name="abc" method="post" action="index.php">
i.e Without redirecting.
Which one is safe?
Redirecting does not effect the security of the website at all in the slightest. I recommend taking a look here about possible authentication solutions you can use for your site.
Whether you authenticate and log them in/register them using index.php or r.php, it doesn't matter in the slightest. Forum systems such as phpbb used to at one time to everything in the index.php file, and depending on the ?page $_GET variable, it would display different things (Like a login form, or a registration form). How you handle it, is entirely up to you, but neither method is more insecure than the others.
Both are safe!
Redirect method, kind of link using which user redirects to another page where they can register
Ajax Method, here you can make calls using Javascript / jQuery which returns you html source, which you can just plug in appropriate place.
Your Page where you need your registration form to be displayed, when user click on sign up link
<div id="ajax-response"></div>
<a id="signup" href="signup.php">SignUp</a>
<script type="text/javascript">
jQuery("#signup").on('click', function(e){
e.preventDefault();
var _context = this;
jQuery.ajax({
url: jQuery(_context).attr('href'),
success: function(response){
jQuery("#ajax-response").html(response);
}
})
})
</script>
and signup.php, will contain the registration form
<form>
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit" />
</form>
For example, the website https://talky.io/ has a form on its homepage. When you enter text into the form and hit the button, you're taken to a page that's https://talky.io/[your text]. How do you do this? What's the best way to do it?
Thank you!
You can use onSubmit and change the action attribute of the form via javascript, then return true. The code could look like this:
HTML from linked page:
<form id="createRoom">
<input id="sessionInput" placeholder="Name the conversation" autofocus="autofocus">
<button type="submit">Let’s go!</button>
</form>
Js code:
document.getElementById("crateRoom").onsubmit = function(){
var url = encodeURIComponent(document.getElementById("sessionInput").value);
document.getElementById("crateRoom").action = "/" + url;
return true;
}
It is server-side script job. You can look at some MVC framework and the url parameters
You can use GET method of form;for example:
<form action="index.php" method="get">
Page: <input type="text" name="page">
<input type="submit" value="Submit">
</form>
that after submit will go to index.php?page=yourEnteredPage.
You can use PHP symfony or codeignitor, if you use .net then create a new MVC project.
But if you only need to change urls like
www.mysite.com/mypage.php?something=value
to
www.mysite.com/value
You can do a mod rewrite in apache or if you're using .net then use RegisterRoutes in your global.asax.cs
Using a form you can submit data to a location/url that was given in the action attribute of the for, for example
<form method="POST" action="http://example.com">
<input name="first_name" type="text" value="" />
<!-- Form elements -->
<input type="submit" name="mySubmitButton" value="Submit">
</form>
This form will submit the form data to the given action url when submit will be pressed and on the derver data could be retrieve using
$first_name = $_POST['first_name';];
and so on. The method POST is used to submit the form in the post array so you can retrieve data using $_POST['formfieldname'] and if you use method="GET" then you can get submitted data from $_GET variable, like, $fname=$_GET['first_name']. GET has limitation of amount when submitting data (safe to use up to 2000 characters IE's limit) and is visible to address bar of the browser and not being used for login (password) and POST can send more data than GET and also not visible to address bar.
You may read this.
Fairly possible with URL Rewriting
http://en.wikipedia.org/wiki/Rewrite_engine
I am trying to submit a form using get method but I dont want the form to refresh or rather when it reloads I want to maintain the data. There seems to be lot of questions on similar lines but none that I tried helped. I am posting my code here:
<script type="text/javascript">
function formSubmit()
{
document.getElementById('form1').submit();
return false;
}
</script>
<form id = "form1" method = "GET">
<br> Query: <input name="query" id="query" type="text" size="50" value="">
<input type="button" name="search" value="Get News" onclick = "formSubmit()">
</form>
I am using python on the server side.
Thanks
The statement:
I am trying to submit a form using get method but I dont want the form to
refresh or rather when it reloads I want to maintain the data.
Implies to me that your end goal requires AJAX or at least some passing of data to the server and back. You will not be able to retain scope within Javascript over a page refresh without the use of something like cookies or passing data to/from the server. Having said that these are more akin to secondary storage mechanisms while you want to retain scope (or primary storage). To do this I would recommend AJAX.