I am trying to get a form to submit. I am using HTML, JS, PHP, and AJAX here. Since it will not submit, I assume something is wrong with my insert function, however I cannot figure out what the problem is. Whenever I click "submit" nothing changes. Nothing moves. The information doesnt get added.
<!doctype html>
<html>
<head>
<script src="./js/jquery-3.6.0.min.js">.
</head>
<body>
<form onsubmit="return(insertPeople())">
First name: <input type=text id=firstname><br>
Last name: <input type=text id=lastname><br>
Phone number: <input type=text id=telephonenumber><br>
<input type=submit value=submit>
</form>
<div id=showpeople></div>
<script>
function insertPeople(){
val = $("#showpeople").val();
$.get("./week7ajax.php",{"cmd":"create", "firstname,lastname,telephonenumber" : val}, function(data){
$("#showpeople").html(data);
});
return(false);
}
function showpeople(){
$.get("./week7ajax.php",{"cmd":""}, function(data){
$("#showpeople").html(data);
});
return(false);
}
showpeople();
</script>
</body>
</html>
Give this a shot. I fixed some missing quotations, indented a few lines, and removed some unnecessary code.
<form onsubmit="insertPeople(); return false;">
First name: <input type="text" id="firstname"><br>
Last name: <input type="text" id="lastname"><br>
Phone number: <input type="text" id="telephonenumber"><br>
<input type="submit" value="submit">
</form>
<div id="showpeople"></div>
<script>
function insertPeople() {
val = $("#showpeople").val();
$.get("./week7ajax.php",{"cmd":"create", "firstname,lastname,telephonenumber" : val}, function(data){
$("#showpeople").html(data);
});
}
function showpeople() {
$.get("./week7ajax.php",{"cmd":""}, function(data){
$("#showpeople").html(data);
});
}
showpeople();
</script>
Related
Hi I am very new to Javascript. In the code below, when I test I don't see any output. Can anybody tell me what is wrong?
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
}
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
{
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
This should work! The problem was the orientatiom of { after the else.
A few things:
<id="score"> <input type="number" name= "score"> is probably not what you mean. Maybe you mean <input type="number" name="score" id="score">.
document.write is a no-no, please don't ever use it. It allows you to modify the document "here and now", i.e. while it's loading. Use document.body.innerHTML += x, for example.
var score = document.getElementByID('score').value
The bracket after the else clause
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>enter code here
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
{
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
</html>
Change input type from submit to button else you wont be able to see the output, because the form will submit and reload the page.
Fix the syntax errors
<id="score">
Change } to { under else condition
Change document.write to alert or console.log
Try this:
<script>
function myFunction()
{
var x;
var score=document.getElementById("in_score").value;
if(score>30)
x="Expert";
else
x="Novice";
document.getElementById("score").value = x;
}
</script>
<body>
<form name="myscore">
Score: <input id="score" type="number" name= "score">
<input type="submit" id="in_score" onClick="myFunction()" value="submit">
</form>
</body>
</html>
So the main error in your code was the reverse bracket from the else statement. Also, to get/change values from an input, you need to use getElementById ( to select the element ), and .value statement, to change/get it.
jQuery(function ($) {
var submitbnt = '<input type="button" id="submit" class="btn btn-primary pull-right" value="Submit" />';
var formData = '[{"type":"select","label":"Select","className":"form-control","name":"select-1498804267849","values":[{"label":"Option 1","value":"option-1"},{"label":"Option 2","value":"option-2","selected":true},{"label":"Option 3","value":"option-3"}]},{"type":"text","label":"Text Field","className":"form-control","name":"text-1498804394861","subtype":"text"},{"type":"text","label":"Text Field","className":"form-control","name":"text-1498804395129","subtype":"text"}]';
formRenderOpts = {
dataType: 'json',
formData:formData
}
$('#mform').formRender(formRenderOpts);
$('#mform').append(submitbnt);
document.getElementById('submit').onclick = function () {
var formData = new FormData(document.forms[0]);
var result = {};
for(var pair of formData.entries()) {
result[pair[0]] = pair[1];
}
console.log($('#mform').formData());
result = JSON.stringify(result); // just key/ value
var htmlForm = $('#mform').html(); // Can not get merge values in code
};
});
<h1>Form demo</h1>
<form class="col-md-12" id="mform" style="background-color:white;padding:50px">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://formbuilder.online/assets/js/form-builder.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-render.min.js"></script>
I use the formbuilder of http://formbuilder.readthedocs.io. I render a form. And show that form, then I input the data, and I want to get the html code of that form, I have found many ways but only I can not get the html code of form and values. I only get the html code, but no values. Or I just get the values but no html, I think I will have to manually "mix" the values that I get into the html code. But actually it is very troublesome.
I have a registration form, I want when the user click on the submit button will get all the html code of the form tag, it includes all input, drop-down list, radio, button .. and value already was inputed.
I tried using $('#myform').html() to get all the form's code, but it did not get the values that I entered into the input, or radio ...
I want to get something like this:
<form id="myForm" class="cusForm">
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>
Try serialize() function of jquery
console.log($('form').serialize())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" class="cusForm">
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>
I don't know why you need the html, just in case you need the values of properties that are being post you can check this code, you will get array of the values which are being posted,
$(function(){
$('.submit').click(function(){
var result = [];
$('#myForm input').each(function(e,v){
var value = {};
value.property = v.name;
value.value = v.value;
result.push(value);
});
alert(JSON.stringify(result));
});
});
Working Fiddle: https://jsfiddle.net/jks7afpx/
You can use $('#myForm').serializeArray() and $('#myForm input:text'); to get data and text type input's html of your form.
$("#getTextInputs").on("click", function(){
console.clear();
var textInputs = $('#myForm input:text');
$.each(textInputs, function(){
$(this).attr("value", $(this).val());
console.log(this);
})
})
$("#getFormData").on("click", function(){
console.clear();
var data = $('#myForm').serializeArray();
console.log(data);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" class="cusForm">
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="button" id="getTextInputs" value="Get Text Input Html">
<input type="button" id="getFormData" value="Get Form Data">
</form>
i am trying to make a list and submit button and the user enters the list size and then after clicking on a button the form is submitted (list size is sent to the servlet ) and an alert should appear .. but the alert is not working .. here is my code
<body>
<form action="ServerSide" method="post">
Enter list Size:<input type="text" name="listsize">
<input type="submit" value="Submit" id="btn">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
alert("anything");
});
});
</script>
</body>
You can try this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Also read this document DOCS
First of all make sure you are including/referencing JQuery Libray before you use JQuery. it should work.
Secondly you can use this
<body>
<form action="ServerSide" method="post" id="myform">
Enter list Size:<input type="text" name="listsize">
<input type="button" value="Submit" id="btn">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").on('click',(function(){
alert("anything");
}));
});
</script>
</body>
I also notice that you had used input type submit it will submit form instead of calling click function. you should change type to button
if you want to do something on form submission you have to use onsubmit event
<body>
<form action="ServerSide" method="post" id="myform">
Enter list Size:<input type="text" name="listsize">
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit(function(){
alert("anything");
});
});
</script>
</body>
For this you don't need to add click listener on the submit button. once you submit form it will show you alert.
I am looking to create a button at the bottom of a form that will create an alert box that will show the form data entered. Form includes:
First Name
Last Name
Address 1
Address 2
City
State
Zip
Phone
Fax
Once the form is completed, the button is clicked and an alert box pops up showing the form data entered.
Does anyone know how to accomplish without the form actually being submitted or validated? There is no database for the form data to be submitted to, so there is no database to pull the information from.
Any help would be greatly appreciated.
I have not included the form code due to its length, but the current code I am working with for the Alert Box looks like this:
<script>
function display_alert()
{
alert("");
}
</script>
<body>
<input type="button" onclick="display_alert()" value="Display alert box">
</body>
If I get it right you need something like this:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('send').onclick = function(e){
alert(document.getElementById("name").value);
return false;
}
}
</script>
</head>
<body>
<form method="post">
<input type="text" name="name" id="name" />
<input type="submit" name="send" id="send" value="send" />
</form>
</body>
</html>
I don't really get what you mean with a database to pull the information from, but the example uses a click event to get the data from the form field and shows it in an alert without a submit.
html code:
<html>
<SCRIPT SRC="PR8_4.JS"></SCRIPT>
<body>
<form name=details>
<table>
<tr><td>ENTER FRIST NAME:<input type=text name=fname></td></tr>
<tr><td>ENTER LAST NAME:<input type=text name=lname></td></tr>
<tr><td>ENTER PHONE NUM :<input type=text name=phnum></td></tr>
</table>
<input type="button" value="Click Me" onclick="display();">
</form>
</body>
</html>
javascript code:
function display()
{
var x=document.details.fname.value;
var y=document.details.lname.value;
var z=document.details.phnum.value;
alert("FIRST NAME:"+x+" "+"LAST NAME:"+y+" "+"PHONE NUMBER:"+z);
}
To stop a form submitting you can create an onsubmit event within the tag and return false - e.g. ...form elements.... This has the benefit of working when someone submits the form by pressing the enter key as well as pressing the submit button.
Thus, to achieve what you desire you could create a function (lets call it formAlert) and call it from the onsubmit event e.g. ...form elements...
The formAlert function would look something like:
function formAlert() {
alert_string = '';
alert_string = alert_string + document.getElementById('first_name').value;
alert_string = alert_string + ' ';
alert_string = alert_string + document.getElementById('last_name').value;
alert(alert_string);
}
and this would correspond to a form looking like:
<form id="foo" onsubmit="formAlert(); return false;">
<p><label for="first_name">First Name<label><input type="text" id="first_name" value="fred" /></p>
<p><label for="last_name">Last Name<label><input type="text" id="last_name" value="blogs" /></p>
<p><input type="submit" value="click me" /></p>
</form>
Note1, this won't be a pretty modal box - it'll simply display "fred blogs" in a Javascript alert box.
Note2, if there is a Javascript error your form will still submit (although in the example here it'll submit to itself).
Here is a JS Fiddle demonstrating the above code: http://jsfiddle.net/D59su/
I think this might be what you're looking for:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="javascriptform.css">
</head>
<body>
<form name= "details"><div class="box1"><div id="a"><input type="text" name="lastname" placeholder="LAST NAME"></div><br>
<div id="b"><input type="text" name="firstname" placeholder="FIRST NAME"></div><br>
<div id="c"><input type="e-mail" name="email" placeholder="E-MAIL"></div><br>
<div id="d"><input type="password" name="password" placeholder="PASSWORD"></div><br>
<div id="sub-button"><button onclick="getdetails();">submit</button></div></form>
</div>
<script>
function getdetails()
{
var a = document.forms["details"]["lastname"].value;
var b = document.forms["details"]["firstname"].value;
var c= document.forms["details"]["email"].value;
alert("Your name is "+a+" "+b+". Your e-mail is "+c);
}
</script>
</body>
</html>
It Is Very Simple
Using .value will help.
HTML:
<form onsubmit="return myFunction()>
<input type="text" id="name>
<input type="submit" value="SEND">
Use return before your function
Javascript:
function myFunction () {var name = document.getElementById("name").value; alert("Hi " + name)}
After Submitting It Will Show As (If I Write Alex and Submit It)
Hi Alex
Hope it will work
i am sure this is quite a numb question to ask and most probably the most basic one. i am just a starter for JS.
i am trying to access the value of input field by document.getElementById and it is returning null to me i am not sure why here is the code.
<html>
<head>
<script type="text/javascript">
var name = document.getElementById("e_name");
alert(name);
</script>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="e_name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
</body>
</html>
the following code prints the value null in alert box. what is wrong?
Update :
When i use the following code.
<html>
<head>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
<script type="text/javascript">
var name = document.getElementById('name').value;
alert(name);
</script>
</body>
</html>
it prints Enter your Name but if i change the value it does not print the changed value. i would want to perform the following for validation purpose
a) holds the value of e_name in a javascript variable in the head tag
b) so that i should be able to process it for validation.
how do i do it?
Because you're calling that line of script even before document object is ready!
Try this
<body>
<form action="" method="post">
<input type="text" name="name" id="e_name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
<script type="text/javascript">
var name = document.getElementById("e_name").value;
alert(name);
</script>
</body>
Or this in your head tag.
<script type="text/javascript">
window.onload = function() {
var name = document.getElementById("e_name");
alert(name);
}
</script>
The Javascript code is executing before that HTML has loaded. The element with id="e_name" doesn't actually exist in the document yet.
function validate()
{
var nam=name.value;
alert("name"+nam);
}