Simple jQuery code doesn't work (dealing with Objects) - javascript

All right. So I'm coding after A LOOONG TIME, and I just went on to codecademy to get a bit refreshed with javascript. So I learnt something I didn't know before : OOP.
Help. I tried something. Will include the JSfiddle. But I don't know why, it doesn't work.
Nevermind my Idiocy, I will complete the code as soon as I know what the problem in the prev code was. I have alot to do in that. I also want to learn PHP to make a kind of phone directory!
I have also NOT included the CSS, but that hardly matters.
What the code should do, is that everytime a user fills up the form and clicks submit, it should append the values in a '#results' div. Not doing anything. Help?
Also, nevermind the two password fields. I will write the code for validating the form once I am clear with this problem.
THANK YOU IN ADVANCE.
JSFIDDLE : http://jsfiddle.net/Ns66V/1/
HTML -- >
<html>
<head>
<link rel="stylesheet" href='style.css'>
<script type="type/javascript" src='jquery.js'></script>
<script type="type/javascript" src='js.js'></script>
<title>Form JS</title>
</head>
<body>
<div class='container'>
<h1>Create an ID! It's absolutely <strong>FREE!</strong></H1>
<div id='form'><form action='get'>
<input name='fname' type='text' placeholder='First Name'><br>
<input name='lname' type='text' placeholder='Last Name'><br>
<input name='email' type='email' placeholder='Email Address'><br>
<input name='passw' type='password' placeholder='Password'>
<input name='Again' id='last' type='password' placeholder='Again!'><br>
<select name='gender'>
<option value='male'>Male</option>
<option value='female'>Female</option>
<option value='other'>Other</option>
</select>
<div id='submit'><strong>SUBMIT IT!</strong></div>
</form>
</div>
<div class='results'>
<div class='vals' id='intro'>
<div class='srn item'>#</div>
<div class='bigitem item'>FULL NAME</div>
<div class='bigitem item'>EMAIL ADDRESS</div>
<div class='gender item'>Gender</div>
</div>
<div class='vals'>
<div class='srn item'>#</div>
<div class='bigitem item'>FULL NAME</div>
<div class='bigitem item'>EMAIL ADDRESS</div>
<div class='gender item'>Gender</div>
</div>
</div>
</div>
</body>
</html>
JS (JQuery) -->
$(document).ready(function(){
function Person(fname,lname,email,passw,gend){
this.fname = fname;
this.lname = lname;
this.email = email;
this.passw = passw;
this.gend = gend;
};
var numPeople = 0; //Setting the number of people var.
$('#submit').click(function(){
var fname = $('input[name=fname]').val(), //SETS VALUES OF ALL THE INPUTS
lname = $('input[name=lname]').val(), //SETS VALUES OF ALL THE INPUTS
email = $('input[name=email]').val(), //SETS VALUES OF ALL THE INPUTS
passw = $('input[name=passw]').val(), //SETS VALUES OF ALL THE INPUTS
gend = $('select[name=gender]').val(); //SETS VALUES OF ALL THE INPUTS
var People = new Array(); //Definin
numPeople++;
People[numPeople] = new Person(fname,lname,email,passw,gend);
$('.results').append(People[numPeople].fname + People[numPeople].lname + People[numPeople].email + People[numPeople].passw + People[numPeople].gend);
}); //#SUBMIT.CLICK() END
});

OOP isn't entirely needed in this case. The problems is that you need to use #results, and you need to close your button along with other tags.
HTML
<button id='submit' type='button'><strong>SUBMIT IT!</strong></button>
JS
$('#results').append(...);
Here is a Fiddle example, added a <br /> at the end.
Also get and post are for a forms method attribute. action is where the form sends the data. So you probably want:
<form method="get"></form>

Check http://jsfiddle.net/Ns66V/4/
The button tag was not closed and the content was appended to the button and
$('#submit').click(function()
should be replaced with
$('#submit').on('click', function()
Now seems to work.
Of course you should improve how you append the content though - use html tags to separate each information.

Related

JQuery script doesn't work when html code is put in php if/else condition

I am working on a project to create a form generator which dynamically adds the required form fields. I have used JQuery to add fields or append fields dynamically to a division when buttons are clicked. The entire mechanism including the script works perfect until the html code is added in a php if/else condition (working with sessions). Php is somehow stopping the script from running. I have tried rearranging the code but to no use.
The file in which the appending or the preview takes place (build_form.php):
<html>
<head>
<link rel="stylesheet" type="text/css" href="build_form.css">
</head>
<body>
<?php
$k=1;
if($k==1)
{
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="build_form.js"></script>
<div id="full">
<div id="left">
<div id="formElements">FORM ELEMENTS</div>
<div id="name">
<button class="formButtons" id="btnName" onclick="appendName()">Name</button>
</div>
<div id="email">
<button class="formButtons" id="btnEmail" onclick="appendEmail()">Email</button>
</div>
<div id="address">
<button class="formButtons" id="btnAddress" onclick="appendAddress()">Address</button>
</div>
<div id="Phone">
<button class="formButtons" id="btnPhone" onclick="appendPhone()">Phone</button>
</div>
<div id="Submit">
<button class="formButtons" id="btnSubmit" onclick="appendSubmit()">Submit</button>
</div>
</div>
<div id="right">
<div id="yourForm">YOUR FORM</div>
<div id="preview"></div>
<script>$("#preview").sortable();</script> <!-- makes the divisions inside the division with id #preview sortable-->
<div>
<form method="post" action="build_file.php" id="form1">
Enter form name:<input type="text" name="f_name"><input type="submit" value="Create Form" onclick="createForm()">
</form>
</div>
</div>
</div>
</body>
<?php
}
?>
</html>
build_form.js
var name=1;
var email=1;
var address=1;
var phone=1;
//$("#preview").sortable();
function appendName()
{
var code="<div class='preBox'><label>Name</label><input type='text' name='name"+name+"'><button class='temp' onclick='remove(this)'>Remove</button></div>";
$('#preview').append(code);
name = +name + 1; // + is used to show that the variable is a number
}
function appendEmail()
{
$('#preview').append("<div class='preBox'><label>Email</label><input type='email' name='email"+email+"'><button class='temp' onclick='remove(this)'>Remove</button></div>");
email = +email + 1;
}
function appendAddress()
{
$('#preview').append("<div class='preBox'><label>Address</label><input type='text' name='address"+address+"'><button class='temp' onclick='remove(this)'>Remove</button></div>");
address = +address + 1;
}
function appendPhone()
{
$('#preview').append("<div class='preBox'><label>Phone</label><input type='text' name='phone"+phone+"'><button class='temp' onclick='remove(this)'>Remove</button></div>");
phone = +phone + 1;
}
function appendSubmit()
{
$('#preview').append("<div class='preBox'><button type='submit' form='form2'>SUBMIT</button><button class='temp' onclick='remove(this)'>Remove</button></div>");
}
function remove(btnId)
{
var divId=btnId.parentNode;
$(divId).remove();
}
function createForm()
{
$(".temp").remove();
var fCode=$("#preview").html();
$('#form1').append("<div><input type='hidden' name='fCode' value='"+fCode+"'></div>");
}
The entire mechanism stops working when the html code is added in
if/else condition in build_form.php. File name or extension is not
the issue but the conditional statements are the issue (tested it).
It should work like what's shown in the image. Fields should be added when buttons on the left is clicked but it stops working when if/else condition is used.
IMPORTANT: The Code doesn't work even if I remove the php code later (starts working when I delete the files and paste new copies). It's like a permanent effect.

Max number pool input text from database and decrease it when pick to form html/js/php

Ok i have a little code to distribute point from pool in to stats made with form. my Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://mynindo.pl/test/css/style.css">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="http://mynindo.pl/test/js/incrementing.js"></script>
<link href="http://mynindo.pl/test/css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="well">
<div class="container">
<form method="post" action="">Points: 50<br /><br />
<label for="name">Int</label>
<div class="numbers-row"><input type="text" name="int" id="int" value="0">
</div>
<label for="name">Str</label>
<div class="numbers-row"><input type="text" name="men" id="men" value="0">
</div>
<label for="name">Dex</label>
<div class="numbers-row"><input type="text" name="dex" id="dex" value="0">
</div>
<label for="name">Dex2</label>
<div class="numbers-row"><input type="text" name="str" id="str" value="0">
</div>
<div class="buttons">
<input type="submit" value="Submit" id="submit">
</div>
</form>
</div></div>
</body>
</html>
My php code in app.php check if sum of all points $Post[] is == points pool. every works fine, but wieh user got meny poits for the distribute need math so can't be tricky.
And now my question, is this possible to change value of poits pool in real time with ajax or jquery? i mean, i got 50 points total i add 1 to Str (didn;t sumbit) and value pool changed from 50 to 49 w/o reloading page?
as you are not updating database until pressing submit button then just manipulating that span element will suffice,
put following code your html section instead of your corresponding code
Points: <span id="point" data-available="50">50</span>
Add following JavaScript code
$(':text').change(function(){
var total=0;
$( ":text" ).each(function( i ) {
total += parseInt($(this).val());
});
$('#point').html($('#point').data("available")-total);
});
this will do the trick.
BTW you should make sure input is number
I Tried to add Uoyr code reza but i'm not sure how, also i tried wrote my own script to count all those numbers but it also fail
function countNum(val) {
var sum = document.getElementById("sum").value;
var i = document.getElementById("int").value;
var w = document.getElementById("men").value;
var s = document.getElementById("dex").value;
var d = document.getElementById("str").value;
var points = i + w + s + d;
if ( points == 0){
$('#suma').text(0);
}else{
$('#suma').text(suma - points);
}};
with
Points: <div style="display: inline;" id="sum">50</div>
But didn't work at all. Cna you show me how ur code should work with my on snippet?

How To use Query string in java script?

I have Created calculator project. I have only two pages. Now my question how to pass input field value to another page? trying too many ways its Not Working.
What to do to pass input fields values from one page to another page?
My input fields code Looks Like
<p class="pull-right">DPA Minimum Buyer Contribution<br /></p>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6" style="padding-right:1%">
<input type="text" id="txtLocationContactName5" class="txt"/>
</div>
<div class="col-md-3" style="padding-left:0%">
Another page name default_results.php I have created input fields
<div class="col-md-5 padding-rht">
Minimum Buyer Contribution
</div>
<div class="col-md-2 padding-Zero">
<input type="text" id="txtCustomerName3" class="txt" />
</div>
I have tired in jQuery script
<script>
$(function () {
$("#btnQueryString").bind("click", function () {
var url = "default_results.php?id=" + encodeURIComponent($("#txtLocationContactName5").val()) + "&technology=" + encodeURIComponent($("#txtCustomerName3").val());
window.location.href = url;
});
});
</script
but Not working so how to pass value one page to other page ?
You're making life hard for yourself! A simple form is needed to help you pass data to another page :). See here for info on html Forms - http://www.w3schools.com/html/html_forms.asp
Here is a simple example for you:
<form action="page_2_link" method="POST">
<input type="text" name="field1" value="easy">
<input type="submit" name="button1" value="Submit">
</form>
Then on the second page you can do this to retrieve the form data:
<?php
$blah = $_POST['field1']; // this now has the posted fields value
?>
I have given the second page answer in PHP as you have used this as a tag for this question, so I hope you are using this or my answer won't work.

Display picture after dropdown menu option is selected

I want to display a picture after an option in my dropdown menu is selected. The picture will depend on the value the user selected. I tried to do this (bear in mind that I haven't even learned JavaScript yet, I just know 2 or 3 basic functions thanks to Google):
showpic.js
document.getElementById('item').onchange = function(){
document.getElementById('ipic').style.display = "block";
document.getElementById('ipic').innerHTML = "<img src='http://example.com/pics/" + this.value + "'.png";
};
items.php without the PHP code for your convenience
<div id='ia'>
<form action='add_items.php' method='post'>
Username: <input name='username' type='username'> <br />
Password: <input name='password' type='password'> <br />
Item: <select name='item' id='item'>
<option value='100'>Example</option>
<option value='200'>Example 2</option>
</select>
<script src='sort.js'></script> <br/> <!-- Sorts Items in Alphabetical Order -->
<div id='ipic'></div>
<script src='showpic.js'></script>
<input name='add' type='submit' value='Add Item'>
</form>
</div>
But that didn't work. I heard it was something to do with "XMLHTTPREQUEST" & AJAX. Can anyone help me? I don't know JavaScript.
I'm not sure what you think you need AJAX for, but your script almost works!
"<img src='http://example.com/pics/" + this.value + "'.png";
This part is broken, because you start an <img element but you never close it (/>).
Change it to this:
document.getElementById('ipic').innerHTML = "<img src='http://example.com/pics/" + this.value + "'.png' />";
Now it will try to load a picture named [value].png in that div

Captcha IMG/Numbers Combination

I'm trying to create a Captcha in JavaScript but I ran into issues. I want the CAPTCHA to display at random, one of the declared images and then validate users input against the text on the images. So far, I have the Code below and it doesn't show anything:
<script type="text/javascript">
var "<img src="images/ci0.jpg" />" = 56777;
var "<img src="images/ci1.jpg" />" = 67646;
var "<img src="images/ici2.jpg" />" = 77666;
var code = ci0, ci1, ci2;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;
</script>
HTML
<div id="left">
<label for="code">Enter code next <span id="txtCaptchaDiv" style="color:#F00"></span><br />
<!-- this is where the script will place the generated code -->
<input type="hidden" id="txtCaptcha" /></label>
</div><!-- End Left -->
<div id="righty">
<span id="spryconfirm1">
<label>
<input type="text" name="checker" id="checker" />
</label>
<span class="confirmRequiredMsg">You must enter the Code.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
</div><!-- End righty -->
</div>
By the way I see it you should use reCAPTCHA since you still have a long way to go before creating a CAPTCHA validator yourself. This is not only a matter of client-side but also server-side which you are already ignoring.
Get a reCAPTCHA embed code and use it in your HTML.

Categories