I am stuck with a problem and I need you people to help me out.
I have a html form. It sends country, state, city and pin code(to be entered manually) to a php file to process with help of ajax. Once submitted it returns with the pin code value in the text box.
What I want is, whenever a user changes the value of pin code for the second time the form needs to be reset.
What I have done is, I used innerHTML like this:
<form id="someid" method="post">
<input type="text" value="'.$_POST['pin-code'].'" onChange="resetpin();" />
The reset form is like this:
function resetpin() {
document.getElementById('someid').innerHTML = Full HTML CODE FROM ABOVE FORM GOES HERE
This code becomes ugly as the .innerHTML contains all the code for selecting country, city, state which gets repeated two time in the same page.
So what I thought was, can I be able to do something like this?
When user changes pin for the second time the form need to get reset like.
onchange=showdiv("ID of the form and contents to be displayed")
Can I be able to do this so that I do not need to use innerHTML...
Please help me out.
Your resetpin function needs to loop through the input elements of the form resetting their values (excepting for the pin presumably).
Related
I'm writing an edit function (plain javascript & HTML / Chrome / Windows 10).
The data is in localStorage as a series of records, just 2 records in the toy code mentioned below.
I want the user to specify the number of the record to edit, then the code should pre-fill the textarea field with the retrieved content of that record. I want to allow the user to make changes and then press a Store button to store it back in localStorage.
My problem is that when I prefill the input field, I see the record content briefly and then the input field clears. I've tried .value and .defaultValue
editField.value = localStorage.getItem('jnl' + locStoreNo).replace(/(.*?) `\d*?`/, "$1");
and
editField.defaultValue = localStorage.getItem('jnl' + locStoreNo).replace(/(.*?) `\d*?`/, "$1");
the result is the same. (The regex is to hide a sequence number)
The code is in a JSFiddle here: https://jsfiddle.net/roygrubb/zxedbfqr/2/
That performs more or less the same - it shows the value briefly - but then does something different: It goes to a 404. I don't understand this either ¯_(ツ)_/¯
What I'm trying to do seems so basic, that I think I must be missing something blindingly obvious.
What have I missed? Thanks!
Whenever you've got a <form> that you want to handle through JavaScript, you have to ensure that the default form submission action does not happen. If the <form> does not have an "action" attribute, the default is to reload the current page.
By default, a <button> element will be assumed to have "submit" as its type. To prevent form submission, therefore, the simplest thing to do is make the button have "button" as its type.
That may not be all you need to do, depending on the details of the form. It may be necessary (or simply a good defensive move) to have a handler for the "submit" event on the form to prevent the default action.
I want to make a page like this
http://agprotective.com.au/invoice/invoice.htm
There someone can add multiple date,site,start time, end time, hours amount by click the button + or can remove the row using - sign button. How can I get the value of that input in php? Normarlly we use $_POST['here-is-the-value-of-name-attribute-of-the-input-tag'];
But in the case http://agprotective.com.au/invoice/invoice.htm , I do not know what will be the value of the name attribute of the tag.
Can anyone tell me how to get the values of the dynamically generated (button generated) input tags and then send them to database.
The correct way to do this is simple:
<input name="myinput[]" />
PHP will then have:
$_POST['myinput'][0], $_POST['myinput'][1]...
The page you linked does it in a stupid manner, if I'm honest.
I have a form with multiple textboxes inside a table.
Also inside the table but outside the form there is a cell (said Cell A).
When you first access the form, texboxes in the form are filled with data from a DataBase using php/MySQL.
You can change the textbox values, and submit them to the database with POST. The Database is updated, and you are returned to the same (but now updated) form.
My issue: I want to appear in Cell A a colored text indicating if the data in the form was sent or not. On first arrival to the page or after update in should read "Actualized data" in green. But when you are changing the form without submitting it should change to "Unsent data" in red (or something like that).
I know how to format the text with php
style="color:<?php echo $ColorChange ?>"
but when the form changes (before submitting) I need OnChange and some JavaScript, for example
function ChangeColor()
{
var col=document.getElementById("UpdateSign");
col.style.color="#FF0000";
}
My problem is how to combine those two. Any ideas?
Keep Javascript event triggers outside of HTML elements, and use event listeners. jQuery makes binding event listeners to elements very easy.
For example,
$("#form_input_element").on("onchange", ChangeColor);
takes in the id of the form element and binds the ChangeColor function to the onchange event.
use the onchange event of the body, i suppose this should work. I dont know your complete code so this is more guessing than knowing.
<body onchange=ChangeColor()>
So not sure if this is possible but I have a pretty complex form. With multiple levels of processing ie: If you click a radio button 'x' amount options so up in a drop down etc etc.
Well the problem I have is all the form fields need a name, and went I submit the form I'm sending alot of junk. IE Url could be '?meat=3434?fruit=34495?salad=034943' you get the idea. But in the end all I'm looking to is pull the 'salad' value into the url without all the other byproducts. IE: '?salad=034943'
I've tried a few things, pulling all the inputs radios etc out of the form and placing them in a div. The making a form with just a hidden value so I can pull through Mootools (But that made conflicts because I'm using Mootools Form.Validator so then that fails) Then I tired to make two forms, One that would just be all show, then I would pull the value I want into the processing form. Which I thought would work but apparently it still will process both forms.
Any ideas/techniques of how to accomplish this would be greatly appreciated! (because I'm losing my mind)
Disable any form field you don't want sent and it won't show up in the URL.
In HTML it's:
<INPUT type="text" name="foo" DISABLED>
In javascript set document.forms[...].elements[....].disabled = true.
If you hide the field with CSS it will still be sent like normal.
the elegant way you do this is mount your GET url to submit by yourself..
this way you can send only what you want..
dont send any junk.. you can have problems in the future with a variable that you didnt know you were sending..
you can use this util function of jQuery
var params = { width:1680, height:1050 };
var str = jQuery.param(params);
// str is "width=1680&height=1050"
I'm trying to have users enter info into a form (via radio buttons), manipulate the input data, and write resulting text onto the middle of a web page--beneath the radio buttoned form. So I have variables assigned to whenever a user selects a radio button, the onClick event calling a function something like:
function saveValue1(value) {
someVariable=value;<br>
}
And when users click a Submit button, a function works like it's supposed to, ultimately writing an output string. The problem is how to write the string value in the middle of the page. I have this [pseudo]code at the end of the function (pretend the string I want to write to the page is named aVariable):
document.getElementById('aPlace').innerHTML=aVariable;
And of course there's HTML in the displayed page like this:
<div id="aPlace"></div>
After a user pressed the form's Submit button the correct output variable is displayed very briefly, and then disappears. Why is this? And how should I be writing this code instead?
Thanks for helping a newbie, as always.
The form is probably submitted. put a "return false" at the end to stop it submitting the form
It seems that the browser is refreshing? How is the form data handled?
If the form is needed only to add the text to the page, I would add a button
<button onclick="saveValue1("+value+");")>
and avoid submitting the form.