Auto fill form with URL not working - javascript

I was trying to write a bit of javascript to go to a website with the form data already filled in.
This is the HTML for the site:
<form action="/transfer-request" method="post">
<input name="_csrf" value="PcZhHftj-GInv-7mCqMprPOA_aK2HERs1G10" type="hidden">
<label for="amount">Coins</label>
<input id="amount" name="amount" placeholder="100" min="10" step="1" required="" type="number">
<label for="to-user">Recipient User</label>
<input id="to-user" name="to-user" required="" type="text">
Back
<input class="button right" type="submit">
<input name="transfer-id" value="3344847d-1824-48e1-b156-8debd677a672" type="hidden">
</form>
Assume site is on www.example.com/transfer
I have tried modifying the URL as follows:
www.example.com/transfer?amount=25
Without any luck. Am I doing this wrong? Should this not auto fill the amount field to 25, is there a way the website is preventing me from auto filling it, or an alternative way (either through URL or javascript only) that I can accomplish this?

Related

How to remove user input from a text box and allow javascript text to populate it

I have a quick question on how to look up making "text field box (the way Qty looks)" that's in a form but without a user to be able to insert it. I have a javascript file that's supposed to calculate this automatically and populate the text box with the appropriate information but I can't have the user changing the tax/subtotal/total. I have tried to just use innerHTML but that just gets rid of the text box look that I'm aiming for.
<fieldset>
<legend><span>Price: $59.99</span></legend>
<fieldset>
<legend><span>Qty:</span></legend>
<input type="number" id="bookQty" min="0" />
<label for="bookQty">
</label>
</fieldset>
<fieldset>
<legend><span id="subTotal">Subtotal: </span></legend>
<input type="number" id="subTotal" min="0" />
<label for="subTotal"></label>
</fieldset>
<fieldset>
<legend><span id="tax">Tax(5%):</span></legend>
</fieldset>
<fieldset>
<legend><span id="total">Total: </span></legend>
</fieldset>
</form>
You could give your input the readonly attribute, which makes the element not mutable, meaning the user can not edit it.
Example:
<input type="number" value="Some value" readonly="readonly" id="subtotal"/>
You can read more about it here

Many same input -> form to one request / many forms to many requests?

I'm working on <form> that have multiple groups of <input> with the same attributes name='product-code' and name='amount' (because of structure).
For better understanding, example: form where you can choose color and amount of one specific product to add in a basket, but I want to send product code from the catalog (because each color of this product is another item in a catalog) instead of sending color names.
And I'm trying to understand how it should be done semantically correctly and serialized. Should it be one form and one post request or many forms and many post requests? What's your opinion?
<form>
<div>
<input type="text" name="product-code" value="ST912600">
<input type="number" name="amount" value="2">
</div>
<div>
<input type="text" name="product-code" value="ST821806">
<input type="number" name="amount" value="0">
</div>
<div>
<input type="text" name="product-code" value="ST467165">
<input type="number" name="amount" value="1">
</div>
<div>
<input type="text" name="product-code" value="ST348499">
<input type="number" name="amount" value="1">
</div>
<div>
<input type="text" name="product-code" value="ST545081">
<input type="number" name="amount" value="0">
</div>
<div>
<input type="text" name="product-code" value="ST430287">
<input type="number" name="amount" value="0">
</div>
<div>
<input type="text" name="product-code" value="ST988144">
<input type="number" name="amount" value="4">
</div>
<button type="submit">Send</button>
</form>
I'm expecting the server will parse request with multiple data as an array
You can't use the same name in form tag. Visual your form like an associated array.
name => value
name2 => value2
So if you send a form with the same name, you create a conflict.
But you can use a simple form, change name attribut like you want and set a class named product-code for example. preventDefault with JS on your submit button and use getElementsByClassName and get his value etc. save in an array and create a loop for submit one by one with formElt.submit() funtion.
Or create a lot of forms in HTML.

autocomplete='off' does not work in Firefox?

I have an input field <input type='text' name='user' autocomplete='off'> but autocomplete is still active.
This is what I see when I inspect the element
It seems that Firefox somehow thinks that this field is a password field and uses the build-in Login Manager storage module. I did not use any Javascript on this input element.
I also noticed a strange key symbol at the autocomplete drop-down list
How can I get rid of that key symbol and disable autocomplete?
Heres my HTML Code
<form class='clearfix'>
<div id='loginForm'>
<label>
Login
<span>
<a href='/memberArea/lostPass.php' id='hackB'>
Forgot Password? Click here!</a></span>
</label>
<input type='text' name='user' id='username' autocomplete="off">
<label >Password </label>
<input type='password' name='pass' id='passLogin' autocomplete="off">
</div>
<button class='confirmbutton' id='loginButton'>Login</button>
</form>
Clear browser, Try,
<!--
<form autocomplete="off"> will turn off autocomplete for the form in most browsers
except for username/email/password fields
-->
<form autocomplete="off">
<!-- fake fields are a workaround for chrome/opera autofill getting the wrong fields -->
<input id="username" style="display:none" type="text" name="fakeusernameremembered">
<input id="password" style="display:none" type="password" name="fakepasswordremembered">
<!--
<input autocomplete="nope"> turns off autocomplete on many other browsers that don't respect
the form's "off", but not for "password" inputs.
-->
<input id="real-username" type="text" autocomplete="nope">
<!--
<input type="password" autocomplete="new-password" will turn it off for passwords everywhere
-->
<input id="real-password" type="password" autocomplete="new-password">
</form>

How can I have a form submission open a new website and sign in to that site?

How can I have a form submission open a new website and sign in to that site? I'd like to have a user be able to click a dropdown on a website, then enter their email and password to sign in to a different website, and upon submission, have it open the website with them signed in.
For example, with an email, password, and website like this.
<form method="post" class="signin" action="https://www.walmart.com/account/login?tid=0&returnUrl=%2F">
<input type="hidden" name="form_posted" value="true">
<input type="hidden" name="action" value="true">
<fieldset class="textbox">
<label class="username">
<span>Email</span>
<input id="username" name="username" value="" type="text" autocomplete="on" required>
</label>
<label class="password">
<span>Password</span>
<input id="password" name="password" value="" type="password" required>
</label>
</fieldset>
<fieldset class="remb">
<button class="submit button" type="submit button" value="Log in">Sign in</button>
</fieldset>
</form>
Do I need to have the action="" some php file with a script?
Any ideas would be much appreciated. Thank you in advance for all your help!
*** Note: I know how to have a form open to a new page by adding the attribute target="_blank".

How can we block Android default keyboard for a Particular input Box an webview Page

I have a Webview Page contains HTML5 and javascript. For a particular Input Textbox I don't want the Android Default keyboard to appear. How to achieve that?
I know using webview is not good for this kind of app but I have to use for my App, please help.
If you mean that you want a specific input like numbers or email keyboard, then maybe this page can help:
http://blog.teamtreehouse.com/using-html5-input-types-to-enhance-the-mobile-browsing-experience
posibilities:
<input type="email" name="email">
<input type="url" name="url">
<input type="tel" name="tel">
<input type="number" name="number">
<input type="date" name="date">
<input type="time" name="time">
<input type="datetime" name="datetime">
<input type="month" name="month">
If you want to hide it completely you can look at this post:
HTML Mobile -forcing the soft keyboard to hide

Categories

Resources