Copy input value text and paste/add to another input value text? - javascript

I want to copy this input from page A and paste to page B
Let say this is Page A :
<input type="text" class="Name" id="cName" Value="Hey" readonly/>
<input type="number" class="Qty" id="cQty" Value="1" readonly/>
<input type="text" class="Price" id="cPrice" Value="10" readonly/><button class="" id="copy">Copy/?Add to Page B?</button>
This is Page B:
<ol><button class="" id="add">Add</button>
<li>
<input type="text" class="Name" id="pName" Value="" readonly/>
<input type="number" class="Qty" id="pQty" Value="" />
<input type="text" class="Price" id="pPrice" Value="" readonly/><button class="" id="cancel">Cancel</button>
</li><input type="text" class="Name" id="" Value="" readonly/>
<input type="number" class="Qty" id="tQty" Value="Total Quantity" readonly/>
<input type="text" class="Price" id="tPrice" Value="Total Price" readonly/></ol>
I read that I can't copy and paste, so is there another way of it? like adding Page A input text straight to Page B input text, like "add to shopping carts?"
Thanks for all the expert here.

If you have no option to use server-side programming, such as PHP, you could use the query string, or GET parameters.
In the form, add a method="GET" attribute:
<form action="b.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the serialNumber (for example) value as a parameter. Something like:
http://www.example.com/display.html?serialNumber=XYZ
You should then be able to parse the query string - which will contain the serialNumber parameter value - from JavaScript, using the window.location.search value:
// from b.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
// the query string to extract the
// parameter you need
See also JavaScript query string.
The alternative is to store the values in cookies when the form is submit and read them out of the cookies again once the b.html page loads.
See also How to use JavaScript to fill a form on another page.

You can take this value either by form post method or use browser cookies and very easy to implement.
And the methods varies as per your programming language.

Related

post form on any input change it contains the input type hidden which changes dynamically

<form id="pricecal">
<input type="text" onchange="calprice()" class="form-control round-corner-fix datepicker" data-provide="datepicker" placeholder="Check in" value="" required />
<input type="text" onchange="calprice()" class="form-control round-corner-fix datepicker" data-provide="datepicker" value="" placeholder="Check Out" required />
<input type="hidden" onchange="calprice()" id="noroom" value="" name="room" />
<input type="hidden" onchange="calprice()" id="noguest" value="" name="guest" />
</form>
my code perfectly works on input text but not on input type hidden
i tried following ways i dont want to loop for every input
function calprice(){
alert('Textarea Change');
}
$(document).on('change', 'form#pricecal input', function(){
alert('Textarea Change');
});
$("form#pricecal input").bind("change", function() {
alert('Textarea Change');
});
As you have bound event on the elements that can be triggered whenever you update your input's value:
$('input[type="hidden"]').trigger('change');
Put this line just after that line of code which causes the value change.
type=hidden
These fields should not be rendered and provide a means for servers to store state information with a form. This will be passed back to the server when the form is submitted, using the name/value pair defined by the corresponding attributes. This is a work around for the statelessness of HTTP. Another approach is to use HTTP "Cookies".
Refer this link

calculation in angularjs output fails with ng-model

I'm working on an angular project where i perform calculations on the page. In the textfield where i put the final results, when i get it an ng-model that answer fails to load. When i take out the ng-model, the answer appears.
But i want it working while it have an ng-model="total" because i will send the total value to the database. With the below script, it works
<input name="price" type="text" id="price" ng-model="price">
<input name="quantity" type="text" id="quantity"ng-model="price">
<input name="total" type="text" id="total" value="{{.price*quantity}}">
But with this
<input name="price" type="text" id="price" ng-model="price">
<input name="quantity" type="text" id="quantity"ng-model="price">
<input name="total" type="text" id="total" value="{{.price*quantity}}" ng-model="total">
it fails to works. The answer doesn't appear in the textbox
Try this instead:
<input name="price"
type="text"
ng-model="price" string-to-number>
<input name="quantity"
type="text"
ng-model="quantity" string-to-number>
<span>{{ price * quantity }}</span>
I'm not sure why you're trying to put the calculated value into the 3rd input, but if you are, you'll want to use ng-model-options to tell the total ngModel that it's to treat that value as a getter/setter - https://docs.angularjs.org/api/ng/directive/ngModelOptions
Also note the string-to-number directive. You're dealing with strings in the input. So in order for interpolation to work, you may need to add those.
edit
here is a working example of how I think you were trying to allow an override on the calculated value. You can enter another value in the total input and hit enter to see it working. This uses the ng-model-options - http://codepen.io/jusopi/pen/XKQzzv

Default text in an input field

I looked for this everywhere but I couldn't find anything useful.
I need a way to put a default text (preferably a php variable) in a HTML text field whenever I load the page. It's like a placeholder (I'm aware of the placeholder attribute, I don't want that) that doesn't disappear so that the user can submit that value if he wants.
I'm guessing it can be done with a simple javascript script but I suck at that.
Thank you for your help.
You're looking for the value attribute then: value="text here"
With a PHP variable, it would be something like this:
<form action="path-here">
<input type="text" name="field-name" value="<?php echo $variable; ?>"><br />
<input type="submit" value="Submit">
</form>
Here are two ways to put a default value in a text field.
The first way is the simplest. All it involves is setting the value of the text field.
<input type="text" id="myTextBox" value="Some default text">
The second was uses a JavaScript function that runs when the page loads.
<!-- This solution is a little more complicated. -->
<body onload="setDefaultText()">
...
<input type="text" id="myTextBox">
</body>
<script>
function setDefaultText() {
document.getElementById("myTextBox").value = "Some default text";
}
</script>
JSFIDDLE Example
<form>
First name: <input type="text" name="fname" value="John"><br>
Last name: <input type="text" name="lname" value="Doe"><br>
<input type="submit" value="Submit form">
</form>
You are looking for the value="Text Here"

Google translate params form

how can I use html form for detect inserted language in input to translate to other language ?
Using Hebrew(iwrit)-English languages.
<form action="http://translate.google.com/translate_t" target="_blank">
<input type="text" name="text">
<input type="hidden" value="hp" name="prev">
<input type="hidden" value="iw" name="hl">
<input type="hidden" value="y" name="js">
<input type="hidden" value="" name="file">
<input type="hidden" value="iw" name="sl">
<input type="hidden" value="en" name="tl">
<input type="hidden" value="#" name="history_state0">
<input type="submit" value="Translate">
</form>
Assuming you need it to update live and not on a form submit, you will need to make some sort of request when the textbox to translate changes (http://api.jquery.com/change/), then make the appropriate changes to the form indicating the language.
As for the functionality itself, Google has an API for Translate (https://developers.google.com/translate/v2/libraries). There you will find a JavaScript interface, and that should handle all the heavy lifting for you.
I hope that helps.

Handling of two forms in one webpage

I have a webpage with a div area. In this area, there can be two different forms.
It looks like this:
Form 1:
<div id="data" ...>
<form action="/action1" method="post">
<label for="label1">ID</label>
<input type="text" name="id" id="label1" value="" />
<label for="label2">Name</label>
<input type="text" name="name" id="label2" value="" />
<label for="label3">Description</label>
<input type="text" name="desc" id="label3" value="" />
<label for="label4">Address</label>
<input type="text" name="address" id="label4" value="" />
</form>
</div>
Form 2:
<div id="data" ...>
<form action="/action2" method="post">
<label for="label1">ID</label>
<input type="text" name="id" id="label1" value="" />
<label for="label2">Firstname</label>
<input type="text" name="first" id="label2" value="" />
<label for="label3">Lastname</label>
<input type="text" name="last" id="label3" value="" />
<label for="label4">Address</label>
<input type="text" name="address" id="label4" value="" />
<label for="label5">eMail</label>
<input type="text" name="mail" id="label5" value="" />
</form>
</div>
So there are two different forms. The values will be set with jQuery (Ajax call to the backend).
What is the best way to handle these two forms? Should I create two files with only the form and the load the form when they are needed? (Form 1 is needed if some clicks on button 1, form 2 is needed if someoe clicks on button 2 - the events are handled on client-side).
Or should I place both form into the single HTML file and enable or disable the form?
There's nothing stopping you have both forms in the HTML and conditionally hiding/showing the one that you want active. You're best bet is to give each form (or its containing div) a unique ID, and using this to show/hide using jQuery.
I think you should keep both the forms in the same page. And show/hide the required form as per the requirement.
Because if you keep the forms in separate HTML files, and user clicks on any button, then you'll have to make a XMLHttpRequest to get the HTML of form, whereas you can easily avoid this extra HTML request by including the HTML of the form in the same page.
I don't know if your website audience is so large or not. But saving a single HttpRequest should be very helpful.
See the article Minimize HTTP Requests by Yahoo developers. They clearly suggest to minimize HTTP requests.

Categories