Passing HTML form data in the URL on local machine (file://) - html

I'm building a small HTML/JS application for primary use on local machine (i.e. everything is accessed via file:// protocol, though maybe in the future it will be hosted on a server within intranet).
I'm trying to make a form with method="get" and action="target.html", in the hope that the browser will put form data in the URL (like, file://<path>/target.html?param1=aaa&param2=bbb). However, it's not happening (target.html opens fine, but no parameters is passed).
What am I doing wrong? Is it possible to use forms over file:// at all? I can always build the url manually (via JS), but being lazy I'd prefer the browser do it for me. ;)
Here is my sample form:
<form name='config' action="test_form.html" method="get" enctype="application/x-www-form-urlencoded">
<input type="text" name="param1">
<input type="text" name="param2">
<input type="submit" value="Go">
</form>

It might be some browser specific restriction. What browser are you using?
I tested this in Firefox 3.6.3 and Internet Explorer 8, and it works just fine.

Ok, that was stupid. The controls of my form are generated dynamically (via JS), and the generation function was setting ids for them, but not names. So, from the form's point of view, there was no parameters at all.
Thanks to Guffa for providing me a nudge in the right direction!

Related

How to find out what url HTML button submits to

So I'm scraping a website (instacart.com) and it requires a zip code to determine what data it displays. I want to use Python requests to post an arbitrary zip code. The only problem is I don't know what url to post it to and whether it requires any other arguments like an authenticity token or a user cache key. The zip code is entered via an text box that looks like this:
<form data-radium="true">
<input id="postalcode-16749"
name="postal_code"
type="text"
aria-invalid="false"
aria-describedby=""
autocomplete="on"
placeholder=""
data-radium="true"
value="" style=(super long block of css stuff)>
</form>
and then posted via a button that looks like this:
<button type="submit"
data-radium="true"
style="touch-action: manipulation; (long block of more css)">
Continue
</button>
I don't know a lot about web programming, but I was taught in school that HTML forms would look more like this: <form action="/action_page.php" method="get"> and you could use the action attribute to find where it was posting to. Is there a way to use the developer console to find what I'm looking for? How can I post a zip code to this website with Python?
Edit: I did a little more digging and I found that the request payload is {"current_zip_code":"some_zip_code"}, and that it's actually not using POST, it's using PUT. There's still a problem though, the request url looks like this: https://www.instacart.com/v3/bundle?source=web&cache_key= and then there's a different code each time for the cache_key. How do I know what url to post to?
I'm posting this answer in case anyone tries to do a similar thing. I found the url the button posts to and its parameters by looking in the network tab of the developer console and clicking the button. Then I ran into the problem that the url it sends the PUT request to changes every time, always ending in a different cache_key.
The solution was to use a python module called seleniumwire to simulate a browser and then grab all the network traffic. From there I looped through it and found urls containing cache_key= and stored everything after that as a string. Then tacked that string to the end of this url: https://www.instacart.com/v3/bundle?source=web&cache_key= and went back to using requests.
hope this helps someone!

Fill field value while page is loading in HTML Page

I have a third part web address (www.samplespage.com). I call this page from another web site. is it possibe to fill some field values before page load or after page load? I tried vith URL parameters but It did not work.
www.samplespage.com?id=fieldId&value=fieldValue
This is how it looks like in codes. (I picked up from source via F12 Development tools in IE)
<input name="fieldName" id="fieldId" size="12" maxlength="11" value="">
When It's an HTML page It works with URL parameters otherwise You need to use like Selenium or Ptyhon ..

iOS 9 - Web Form Not Submitting When Photo Selected from Existing Library

I am creating a form in a web app that needs to upload an image file.
This should work whether you take a "new photo" or choose a file from your "existing library".
I am testing the form on iOS 9.1 and I can get it half-working.
If I take a NEW photo, then it works perfectly and advances to the success screen.
If I choose a photo from my existing library, then it does not work. It sort of appears like it's working, but then it just reloads the same page. The data never submits to the backend.
I'm using code I used with iOS 8 and if I recall, it worked properly.
This is what I have:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<form id="defaultForm" method="post" class="form-horizontal" action="/receipt-submit" enctype='multipart/form-data'>
<div class="form-group receiptContainer">
<div class='upload-photo' onclick="$('#receipt').click()">
<image src='/img/camera-icon.png' class='img-responsive' alt='' />Upload Your Receipt</div>
<div id="Ugly">
<input type="file" name="receipt" id="receipt" accept='image/*' />
</div>
</div>
<button type='submit' name="validateBtn" class="upload-photo submit" id="validateBtn">Submit</button>
</form>
I had to get fancy with the styling, which is why you see that div with an id = "ugly".
I would love to get this working with button new and existing images, but nothing I try seems to work.
Any help or ideas is appreciated.
Thanks in advance!
I had a similar issue which has plagued my users since IOS 9 came out. I FINALLY fixed it. Basically, the issue is that Safari Mobile drops the .jpg from the uploaded filename for .jpg media files. Screenshots and current Camera are .pngs, and they get uploaded with an extension, so they work. It's just images you take with the camera and save to the media roll ahead of time that don't have an extension at upload time. Since most server side back end systems check extensions to determine whether the file is an image and should be post-processed, it's most likely that on the server side you are receiving the file, but you are instantly discarding it because it has no extension. Since I couldn't test with a true IOS device against my local dev environment, and ergo, step through the server side code after being submitted by an actual IOS Device (not an emulator), I assumed the same thing, that the input was never getting posted.

successful file upload opens new blank page, also allows "empty/blank" to upload

following code is working but with 2 issues: It is part of bigger form on the web page it appears on.
<FORM id="my_file_upld_form"
style="display: inline;"
METHOD="POST"
ACTION="/cgi-bin/fileupload_ajax.pl"
ENCTYPE="multipart/form-data">
<INPUT TYPE="file" class="ajaxfileupload" NAME="myfile" SIZE="42">
<input type="hidden" class="ajaxfileupload" name="fileupload" value="ajax_fileupload">
<input class="ajaxfileupload" type="submit" value="Upload"/>
</FORM>
it is allowing "blank" or empty (no file selection and upload button clicked) to upload. which is causing 500 error on server.
bigger problem is: after the file is uploaded, a new blank page is opened in browser and user has to use back button to go back to the page from where this was run. This happens irrespective of the fact that the ajax script returns anything back or not.
how to fix? I am open to replace this piece of code on the page, if needed.
It's hard to tell exactly what is going wrong without your java script code. However I think I know how to fix some of your problems.
Don't trust the client you need to handle in your backend code the ability to handle a form that gives you bad data. You can validate the form client side but you always need to validate server side as well.
I suspect this problem is happening because you aren't preventing the default event in javascript. In jquery you would do
$("#my_file_upld_form").submit(function(e){
e.preventDefault()
})

Need jsp form to submit query to specific path

I'm trying to setup a simple form in a jsp that will put a search query in the URL submitted.
This is what I have so far:
<form action="search/" method="get" onsubmit="this.action+=this.q.value.trim();return true">
<input type="text" id="q">
<input type="submit" value="go">
</form>
This is in a jsp that's included on each page of my web app and it works when I'm at the root of the app. For example, if I initially load "http://localhost:8080/MyApp/" then type "123456" in the search form, it takes me to "http://localhost:8080/MyApp/search/123456", which is what I want. However, from that page, if I search again (for "654321" for example) it goes to "http://localhost:8080/MyApp/search/search/654321", which doesn't work for me. I need search/{query} to be appended to the root of the app's path no matter what page I may be on at the time.
I would like to avoid javascript if possible, I'm fine with JSTL though.
Any suggestions would be much appreciated!
Simply add a full path to your action, start it with /. Note it will depend on your application context, you could use :
<form action="${pageContext.request.contextPath}/search/"...
It will work in dev and also prod.
EDIT :
Path : search will try to load relative from current path so : http://domain.com/contact/search/
Path : /search will try to load relative from the domain so : http://domain.com/
With the context path above, it will work no matter if it change from dev to prod.
Hope this helps!