I want to save this data in JSON format without using PHP ,when user give the value and press send ,its data add in JSON so that ,I can use this JSON as Database.
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Thank you so much for your help :) in advance
You can iterate through your form and collect it's values in an array, which you can encode in JSON format.
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit" onclick="logJsonInputs()">
</form>
<script type="text/javascript">
function logJsonInputs() {
var nameFormElements = document.getElementById("name_form").elements;
var inputs = [];
for(var i = 0; i < nameFormElements.length; i++) {
var element = nameFormElements[i];
inputs[element.name] = element.value;
}
var jsonInputs = JSON.stringify(inputs);
console.log(jsonInputs);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
function stringifyForm(formObject)
{
var jsonObject = {};
var inputElements = formObject.getElementsByTagName("input");
inputElements = Array.prototype.slice.apply(inputElements); //Because I want to use forEach and getElementsByTagName returns an object.
inputElements.forEach(function(e,i,a)
{
if (e.type != "submit")
{
jsonObject[e.name] = e.value;
}
}
);
$.post("https://www.apiaas.com/consume.php",
{
"data":jsonObject
},
function(data)
{
console.log(data);
}
);
}
function jquerySolution(formObject)
{
var jsonObject = JSON.stringify( $(formObject).serializeArray() );
$.post("https://www.apiaas.com/consume.php",
{
"data":jsonObject
},
function(data)
{
console.log(data);
}
);
}
</script>
</head>
<body>
<form onsubmit="jquerySolution(this);return false;">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>
Related
I would like to add some text before the onchange="input()" function.
anyone knows the trick? cheers
<head>
<script type="text/javascript">
function input(){
var input_taker = document.getElementById('email').value;
document.getElementById('display').innerHTML = input_taker;
}
</script>
</head>
<form method="post" action="#">
<input type="text" name="email" placeholder="email#example.com" id="email" onchange="input()">
<input type="submit" name="save" value="save">
I would like for every different item inputted to be outputted in a new box.
<!DOCTYPE html>
<html>
<body>
Form to get the input
<form id="form1">
<input name="item" type="text" size="20">
</form>
Box that should be duplicated to hold the new input.
<div class="box">
<p class="output"></p>
<div>
<button onclick="outputItem()">Add</button>
javascript:
<script>
function outputItem() {
var x = document.getElementById("form1");
item = x.elements.namedItem("item").value;
document.getElementById("output").innerHTML=item;
</script>
</body>
</html>
I am not sure if this is even close to what you want, but give this a try:
function outputItem() {
var els = document.querySelectorAll("#form1 input");
var box = document.querySelector('.box');
box.innerHTML = '';
els.forEach(
function(el) {
var newEl = document.createElement('div');
newEl.innerHTML = el.value;
box.appendChild(newEl);
}
);
}
<form id="form1">
<input name="item" type="text" size="20" value="item"><br/>
<input name="eggs" type="text" size="20" value="eggs"><br/>
<input name="milk" type="text" size="20" value="milk"><br/>
<input name="grains" type="text" size="20" value="grains"><br/>
<input name="legumes" type="text" size="20" value="legumes"><br/>
</form>
<button onclick="outputItem()">Add</button>
<hr/>
<div class="box"></div>
This creates a new <div> for every input and copies the .value from the <input> into the new <div>. Then it adds the <div> into the output area.
This is the script:
<HTML>
<HEAD>
<SCRIPT type="javascript">
function goToPage(var url = '')
{
var initial = "http://www.blossompromotions.com/-p-";
var extension = "html";
window.location(initial+url+extension);
}
</SCRIPT>
<TITLE>Redirect 1</TITLE>
<BASE HREF="http://www.blossompromotions.com/">
</HEAD>
<BODY>
<P></P>
<FORM name="something" action="#">Label
<INPUT type="text" name="url" value="" onSubmit="goToPage(this.value)" />
<INPUT type="submit" value="GO" />
</FORM>
</BODY>
</HTML>
This redirects to the url but I want the user to be able to see and copy the url. Please tell a command instead of goToPage which will display the url on screen for the user to copy.
function goToPage(url){
var initial = "http://www.blossompromotions.com/-p-";
var extension = ".html";
var link = document.getElementById('gotoURL');
link.innerHTML = url ? initial+url+extension : '' ;
link.href = initial+url+extension;
}
<FORM name="something" action="#">
Label
<INPUT type="text" name="url" value="" onkeyup="goToPage(this.value)">
<INPUT type="submit" value="GO">
</FORM>
You can do it with JavaScript, and add an ID to your input text
function goToPage(var url = '')
{
var initial = "http://www.blossompromotions.com/-p-";
var extension = "html";
document.getElementById('url').value=initial+url+extension ;
}
<FORM name="something" action="#">
Label
<INPUT id="url" type="text" name="url" value="" onSubmit="goToPage(this.value)">
<INPUT type="submit" value="GO">
</FORM>
I'm having trouble getting a javascript function to run on the data from an html form.
I have this form in HTML:
<form id = "form1" onSubmit="getFormObj('form1')">
First name: <input type="text" name="FirstName" value="First"><br>
Last name: <input type="text" name="LastName" value="Last"><br>
Email: <input type="text" name="email" value="johndoe#email.com"><br>
Phone Number: <input type="text" name="phonenumber" value="Phone Number"><br>
<input id="button1" type="submit" value="Create Patient">
</form>
<script type="text/javascript">
document.write(PatientLabel);
</script>
The submit button is hooked up to a JavaScript function in JQuery:
$('#button1').click(function() {
createpatient(this);
});
The Javascript function I'm trying to run stores the form data to an object and then sets PatientLabel to one of the object's values:
var patientdata = {};
var PatientLabel = "";
function createpatient(formId) {
//Turn form data into array data.
var inputs = $('#'+formId).serializeArray();
$.each(inputs, function (i, input) {
patientdata[input.name] = input.value;
});
//If we got this far, print an example
patientLabel = patientdata["FirstName"];
}
However, when I run this code, the HTML Script that's supposed to print patientLabel doesn't show anything! Where did I go wrong?
Final Example:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<title>Change As You Like</title>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script type='text/javascript' src='rename.js'></script>
</head>
<body>
<form id='form1' name='form1'>
<label id='firstNameLabel' for='firstName'>First Name: </label><input type='text' id='FirstName' name='firstName' value='First' />
<label id='lastNameLabel' for='lastName'>Last Name: </label><input type='text' id='lastName' name='lastName' value='Last' />
<label id='emailLabel' for='email'>email: </label><input type='text' id='email' name='email' value='johndoe#email.com' />
<label id='phoneNumberLabel' for='phoneNumber'>phone: </label><input type='text' id='phoneNumber' name='phoneNumber' value='(555)555-5555' />
<input type='submit' id='button1' name='button1' value='Create Patient' />
</form>
</body>
</html>
Now on rename.js:
$(function(){
function createPatient(formElement) {
var patientData = {}, inputs = formElement.serializeArray();
$.each(inputs, function(i, o){
patientData[o.name] = o.value;
});
console.log(patientData.firstName);
// in FireBug could see Object like: console.log(patientData);
}
$('#form1').submit(function(){
// run other functions here
createPatient($(this));
return false;
});
});
You might change the way you call your function. Try this code if this will help createpatient($(this).attr('id'));
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
alert("function start");
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
alert(prod_id);
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 || numbers.indexOf(prod_id.charAt(i)==-1)
{
alert("value must be alphanumeric");
break;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 || numbers.indexOf(prod_type.charAt(i)==-1)
{
alert("value must be alphanumeric");
break;
}
}
}
</script>
</head>
<body>
<form name="myform" action="http://localhost:8080/examples/Submit.HTML" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
</form>
</body>
</html>
This is a test page being written to only learn basics.When I am pressing Submit there is no checking happening and it goes to Submit.html page.why? What modification is needed here?
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
What exactly happens when I am pressing this button?
var prod_id=document.getElementByID("productid").value;
var prod_type=document.myform.producttype.value;
both mechanisms are same ?
This is the Modified one.But still not working. Please help
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 && numbers.indexOf(prod_id.charAt(i)==-1))
{
alert("value must be alphanumeric");
return false;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 && numbers.indexOf(prod_type.charAt(i)==-1))
{
alert("value must be alphanumeric");
return false;
}
}
}
</script>
</head>
<body>
<form name="myform" action="http://localhost:8080/examples/Submit.HTML" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric(); " value="Submit">
</form>
</body>
</html>
there you go you forgot closing parenthesis for if statements:
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
alert("function start");
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
alert(prod_id);
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 && numbers.indexOf(prod_id.charAt(i)==-1))
{
alert("value must be alphanumeric");
break;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 && numbers.indexOf(prod_type.charAt(i)==-1))
{
alert("value must be alphanumeric");
break;
}
}
}
</script>
</head>
<body>
<form name="myform" action="" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
</form>
</body>
</html>
if You want didn't go to Action page You must put return false; at end of onclick like this
onclick="validateAlphaNumeric();return false;"
or put return false; at end of function that you Call with return false; you say browser don't submit
Try returning false when validation fails