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).
Related
I am trying to take the inputs the customer selects, and add them to hidden fields, to then be able to display them on the cart page.
<form method="post" action="https://omgneonsigns.com/cart/?add-to-cart=5825" name="contentForm" runat="server">
Here is the code for my form, and of course I have my fields setup this way:
<input type="hidden" id="hiddenText" name="hiddenText" value="">
So, what is the next step? I am able to alert the values back to me, so I know they are being held/stored... but I'm not sure how to take them with me to the next page and alert them there?
Firstly, you need to select the hidden input. JavaScript way:
<input type="hidden" id="hiddenText" name="hiddenText" value="" onchange="myFunction(this.value)">
<script>
function myFunction(val) {
let hidden_val = val
// now store it using `session`
}
</script>
Basically you can do it in many ways:
Use JavaScript session. link: https://www.w3schools.com/jsref/prop_win_sessionstorage.asp
Use php session. link:
https://www.w3schools.com/php/php_sessions.asp
Then get the value in the next page from session.
I have a page with multiple forms calling the same javascript function. Each form posts a picture to a given database item and has an ID that references that database item (e.g. id="form123"). When the user selects a picture, they should get a "spinner" (indicating file uploading) and then the form should submit.
Problem is, no matter which form gets an onchange event (from selecting a picture on the client), the browser always passes variables for the first form with "onchange" on the page.
function submitForm(formId, spinner) {
console.log(formId);
console.log(spinner);
setDisplay(document.getElementById(spinner), 'inline-block');
return document.forms.formId.submit();
};
function setDisplay(element, value) {
return element.style.display = value;
};
<form method="post" name="form28236" id="form28236" class="submit-image" action="/image/new" enctype="multipart/form-data">
<input type="hidden" name="on" value="28236">
<label for="image-file">Add photos</label>
<input type="file" id="image-file" name="image" onchange="submitForm('form28236', 'spinner28236')">
<div id="spinner28236" class="spinner"></div>
</form>
Console:
form28330
spinner28330
Note that the console is not logging the same form ID or spinner id that should be passed to the javascript function. The result is that the "spinner" displays for the wrong form (the first on the page) and no form actually gets submitted.
The problem with the form submit is in this line:
document.forms.formId.submit();
This syntax would work if your form was actually named "formId". However, instead you have a variable formId that holds the respective id, so you have to do it like this:
document.forms[formId].submit();
Maybe it becomes clearer when you see that your variable only substitutes the actual name. This would also work to access a specific form:
document.forms['form28236'].submit();
So the problem was that I didn't have a unique ID for the <input type="file"> and the corresponding <label for="unique-id">. I was using the <label> as a button for the input (and hiding the input). But since it wasn't a unique ID, the browser was just going with the first <input> with that ID on the page.
So I have javascript code to prepend "tag:" or "vendor:" before every search term, but I wanted to hide that from the user, so I created a hidden input field to send the code but it's not properly prepending the "tag:" and "vendor:" before every word. and instead inputs the entire string, then the search terms.
<form method="get" action="/search" id="search-home">
<button type="submit" value="search"></button>
<input type="hidden" name="type" value="product" />
<input type="hidden" name="q" class="searchtext" />
<input type="text" name="red" placeholder="Search"/>
</form>
<script>
$(document).on('submit','#search-home',function(){
var searchtext = $('.searchtext').val();
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
</script>
Here's what the Url looks like with the code
http://zzz.co/search?type=product&q=tag%3A+OR+vendor%3A&red=tote#fullscreen=true&search=home
Here's what it's supposed to look like.
http://zzz.co/search?type=product&q=tag%3Atote+OR+vendor%3Atote#fullscreen=true&search=home
You're getting an empty value and inserting it here:
$(document).on('submit','#search-home',function(){
var searchtext = $('.searchtext').val(); // <- HERE
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
What you should be doing is getting the user given query, which is the input you named "red".
$(document).on('submit','#search-home',function(){
var searchtext = $('input[name="red"]').val();
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
With the above fix, your URL will look similar to:
http://zzz.co/search?type=product&q=q=tag%3Atote+OR+vendor%3Atote&red=tote.
I do not know where you're getting your hashbang(#) from, but I would assume it will append at the end as before.
If you want to get rid of the red=tote part, you have a few options. Emptying the value via $('input[name="red"]').val(''); will make it appear in your url as red=. If you want it gone entirely, you should use $('input[name="red"].remove();.
I would also advise having your "on" hook attached to the form, not the entire document. This is just a good practice to avoid using unnecessary resources as this hook will bubble every time a form is submitted, regardless of the selector. Instead, consider:
$('form#search-home').on('submit', 'button[type="submit"]', function() { ... };
That way it will only bubble when a submit event happens on that specific form, greatly reducing the possible instances those resources are used.
I have form on the page, in the background I gather make an array of data that I want to pass to a back end controller. I can $post but I don't want the request to be ajax. I want to submit the array along with form, when the user presses the submit button. Does Javascript allow this anyway?
You can use iframe if you donot want to use ajax.
To POST to an iframe you must use form target.
Sample code :
<form
id="moodleform" target="iframe"
method="post" action="http://www.example.com/login/index.php"
>
<input type="hidden" name="username" value="guest"/>
<input type="hidden" name="password" value="guest"/>
<input type="hidden" name="testcookies" value="1"/>
</form>
<iframe name="iframe"></iframe>
<script type="text/javascript">
document.getElementById('moodleform').submit();
</script>
Why not have a hidden field that you populate with a serialized version of the data?
Alternatively, you could have multiple hidden input form elements with the same name, which (back-end application dependant) should give you the POST variable as an array of values.
Building on that, you could add the hidden input elements dynamically to the form.
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.