I have created 3 radio buttons:
Change Password - Change Name - Delete Account
When I select one of them it shows me a form that does something... but the problem is when I started to click submit button on the showing form it redirects me to another page, not the page I selected on action property in form
For example:
<form action = 'forget_pass.php' method = 'POST'>
when I click on submit button it should redirect me to page (forget_pass.php) but it redirects me to another page on my big project that I am working on currently.
My code that contains radio buttons:
<script>
function showUser(str) {
if (str == "") {
document.getElementById("results").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","get_form.php?z="+str,true);
xmlhttp.send();
}
}
</script>
<form class = "form-horizontal">
<label><p style="color:red;">
<input type = "radio" name = "select" value = "pass" onChange="showUser(this.value)"> Change Password
<input type = "radio" name = "select" value = "name" onChange="showUser(this.value)"> Change Name
<input type = "radio" name = "select" value = "account" onChange="showUser(this.value)"> Delete Account
</p></label>
</form>
<div id = "results"> </div>
My code that showing the forms(get_form.php):
<?php
$z = $_GET['z'];
if($z == "pass")
{
// form
}
else if ($z == "account")
{
// form
}
else if($z == "name")
{
// form
}
?>
Related
I'm stuck..I have made a system which gets all colleges from a specific subject, and I want javascript to select the college the user has selected when he clicks on one so the presence of that class can be shown, just a summary: the user selects a subject, an AJAX request gets all colleges from that subject and another AJAX request has to get that specific college and use it to display the data.
This specific function gets the data from the subjects and displays them in a div with the id 'colleges'
function showAanwezigheid(str) {
if (str == "") {
document.getElementById("colleges").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("colleges").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","../controller/docentController.php?action=getColleges&vak="+str,true);
xmlhttp.send();
}
}
Here is the controller which calls the query and displays the result:
$vak = $_GET['vak'];
$colleges = $q->getColleges($vak);
echo "<select id='college'>";
echo "<option>Selecteer een college:</option>";
foreach($colleges as $college){
echo "<option value='".$college->getCollege()."'>College ".$college->getCollege()."</option>";
}
echo "</select>";
}
This is the id where the result is being displayed
<span id="colleges"></span>
And this function should select the 'select' tag with the id 'college' to get that value on change
$(document).ready(function(){
$('#vak').on('change', function() {
var vak = this.value;
alert(vak);
$('#college').on('change', function() {
var college = this.value;
alert(college);
});
});
});
I feel like there would be such an easy fix but I just can't seen to make it work...
Change jQuery code like below:-
$(document).on('change','#vak',function() {
var vak = $(this).val();
alert(vak);
});
$(document).on('change','#college',function() {
var college = $(this).val();
alert(college);
});
Note:- Make sure that jQuery library added before your script code. Otherwise you will get $ is undefined error
This is called Event Delegation
IF you want to get the value of the #college select on change then this would be simpler:
$(document).ready(function(){
$('#vak').on('change', function() {
var vak = $(this).val();
alert(vak);
});
$('#college').on('change', function() {
var college = $(this).val();
alert(college);
});
});
IF you noticed, The onchange of the #vak and the #college is separated
First question on StackOverflow so I hope i get this right. I have a AJAX call to a JS function :
function addOptionText(str)
{
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("0").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","AddText.php?q="+str,true);
xmlhttp.send();
}
And Here is my HTML code :
<body>
<FORM NAME ="form6" onclick= "addOptionText(this.value)" >
Text Input:
<INPUT TYPE = "TEXT" VALUE placeholder ="Nume Field" NAME ="Text_Field">
<INPUT TYPE = "Submit" Name = "Edit" VALUE = "Add" >
</FORM>
<p id="0"> </p>
</body>
The php file only contains :
<html>
<body>
<?php
$name = ($_GET['q']);
echo "nume";
?>
</body>
</html>
But the function doesn't appear to be used as the paragraph doesn't change. New to php here and trying to understand how it works so I'm thinking something might've slipped me.
EDIT
I had more than one "submit" id's so that's why it didn't work. I changed the "submit" id from to and now all's working as intended.
Unfortunately, your code is all over the place.
<FORM NAME ="form6" onclick= "addOptionText(this.value)" > is wrong for a multitude of reasons.
First, we don't use onclick on the form itself but on the submit button. Secondly the value you put in the parameter doesn't in any way represent the value of the text box.
Since you want just to display the value of your textbox and not to navigate to a different page, modify your <form> tag, so that it doesn't have an action = "some page" attribute, because that way it will automatically redirect you to the page you specify and thus the AJAX request is rendered useless. Instead, modify your tag so that it looks like this:
<form name = "form6" onsubmit = "return false;">Provided that you specify your input/button type to submit: type= "submit", using the onsubmit event and setting it to return false will prevent the form from sending you over to a new page.
When using Vanilla JavaScript and not jQuery, I believe its more efficient to use IDs, so as to identify your HTML elements easier in JavaScript.
Your PHP code doesn't mean anything at all. Before doing anything else, you need to evaluate if, indeed, the q was sent over to the PHP file with the GET method. To do that, use in your php file:if (isset($_GET["q"])): // Your codeendif;
The line: echo "nume" you wrote will output "nume" regardless of what you have actually sent to your php file with the AJAX request.
In my opinion is pretty useless to still provide support for Internet Explorer 5 and 6. Not many people use it, unless for whatever reason they are mentally bound to it.
Analytically, how your files should be:
HTML:
<body>
<form name = "form6" onsubmit = "return false;">
Text Input:
<input type = "TEXT" placeholder ="Nume Field" id = "textfield" name = "Text_Field"/>
<input id = "submit" type= "submit" Name = "Edit" value= "Add"/>
</form>
<p id = "0"> </p>
<script src = "YOUR JAVASCRIPT FILE" type = "text/javascript"></script>
</body>
JavaScript:
var textfield = document.getElementById("textfield");
var submit = document.getElementById("submit");
submit.onclick = function() {
'use strict';
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
document.getElementById("0").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "AddText.php?q=" + textfield.value, true);
xmlhttp.send();
};
PHP:
<?php
if (isset($_GET["q"])):
echo ($_GET["q"]);
endif;
?>
I have read a little about hoisting, but I am not sure how it applies in this situation. I have a select value that is shown and hidden dynamically and the value of this select element is always undefined. Please help! Thanks
HTML
<tr>
<td>Type:</td>
<td>
<select id="type" onchange="rulesShown()">
<option value="ATC">ATC</option>
<option value="PILOT">PILOT</option>
<select>
</td>
</tr>
<tr id="rules">
<td>Rules:</td>
<td>
<select id="rules">
<option value="FAA">FAA</option>
<option value="ICAO">ICAO</option>
<select>
</td>
</tr>
Javascript:
<script>
function rulesShown() {
if(document.getElementById("type").value=="ATC"){
document.getElementById("rules").style.display = "";
document.getElementById("rules").style.removeProperty( 'display' );
}
else{
document.getElementById("rules").style.display = "none";
}
}
function verifyData() {
var email1 = document.getElementById("email1");
var email2 = document.getElementById("email2");
var comments = document.getElementById("comments").value;
if(comments!=""){
if(email2==null){
//submit form
submit();
}
else if (/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email1.value)){
if(email1.value == email2.value) {
//submit form
submit();
}
else {
//emails dont match
alert('Email addresses do not match!');
}
}
else{
//invalid email address
alert('Please enter a valid email address!');
}
}
else{
alert('Please enter some comments!');
}
}
function submit(){
var vid = <?php echo $user['vid'] ?>;
var email = document.getElementById("email1").value;
var type = document.getElementById("type").value;
var rules = document.getElementById("rules").value;
var comments = document.getElementById("comments").value;
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("page").innerHTML = xhttp.responseText;
}
}
xhttp.open("POST", "/content/training/request/submit.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("vid="+vid+"&email="+email+"&type="+type+"&rules="+rules+"&comments="+comments);
}
</script>
No need for the file the AJAX is calling. It simply POST's the 'rules'. As far as I can tell this is a javascript hoisting problem, but I don't know why. Thanks
This has nothing to do with hoisting which is pure javascript concept. You have two elements with same id. A <tr> and a <select>. Which is forbidden by html. One of the implications of this is that browser doesn't guarantee which element will be returned by getElementById()
I'm making a quiz website using Laravel, Javascript and Ajax and I made an add form function with JavaScript like this:
But I want to send the form data (to create a new quiz question) into my Laravel QuizController route using Ajax, after the focus on the form is lost or after an enter..
But I can't figure out how to do it.
My JavaScript/Ajax:
var limit = 1;
var count = 0;
var myButton = document.getElementById('myButton');
var container = document.getElementById('container');
function createQuestion() {
if(count < limit) {
var input = document.createElement("input");
input.type = 'text';
input.id = '';
input.setAttribute('class', 'form-control')
container.appendChild(input);
count++;
}
else {
alert ('Enter this question first before you can add another question!');
}
}
function storeQuestion() {
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
My Laravel.blade:
<div class="form-group">
<div id="container"></div>
</div>
{!! Form::button('Add Quiz', array('onclick' => 'createQuiz()', 'class' => 'btn btn-default', 'id' => 'myButton', 'value' => 'Add question')) !!}
My QuestionController:
public function store(Quiz $quiz)
{
$input = Input::all();
$input['quiz_id'] = $quiz->id;
Question::create($input);
return Redirect::route('quizzes.show', $quiz->slug)->with('message', 'Question created.');
}
I hope someone can help me because I'm pretty stuck up with this problem for some time..
To use AJAX instead of standard HTTP POST you should catch enter and blur events.
How to catch enter is explained in first answer to input type text and onKeyDown not working under IE but in test for enter you should run storeQuestion
to add blur add :
<input type="text" name="item_code" onkeydown="test(event)" onblur="storeQuestion()">
Your store function should not return a Redirect::route but some status code or JSON string. If you use laravel 4 http://laravel.com/api/4.1/Illuminate/Http/JsonResponse.html that would just say "OK" or true or error
You should modify storeQuestion to add the new answer/edit/delete buttons to the list also. ( // )
A simpler way would be to not use AJAX but just submit the form with javascript after focus is lost by attaching an onblur event handler to the textbox.
var req = new XMLHttpRequest();
queryString = "access_token=" + access_token + "&data=" + data;
req3.open('GET', '/path/of/laravel/route?' + queryString, true);
req3.send(queryString)
I have set of code for updating a password in the table, here I'm using AJAX to update the password and get the popup screen on corresponding execution.When using that code with my application it is executing properly but I didn't get the output(password is not updated into table). I don't get any error either.
Html page Code
<html>
<head>
<div><IMG src="karvy.jpg" ALT="image"></div>
<script language="javascript" type="text/javascript">
//Browser Support Code
var xmlHttp;
function fetch_javaScript(usr,oldpassword,newpassword,repassword)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var usr = document.getElementById('usr').value;
var oldpassword = document.getElementById('oldpassword').value;
var newpassword = document.getElementById('newpassword').value;
var repassword = document.getElementById('repassword').value;
var url="changepwd1.pl";
url=url+"?usr=" + usr;
url=url+"&oldpassword=" + oldpassword;
url=url+"&oldpassword=" + newpassword;
url=url+"&repassword=" + repassword;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("POST",url,false);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{
document.getElementById("ajaxDiv").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
</head>
<body bgcolor="#D2B9D3">
<form name='myForm'>
<center><table> <tr><td>
<div style="width:400px;height:280px;border:3px solid black;">
<center><h4>Please Enter your Password's</h4>
<p><b>User Name</b>        <INPUT TYPE=text NAME="usr" id = "usr" size = "15" maxlength = "15" tabindex = "1"/></p>
<p><b>Old Password:</b>   <INPUT TYPE=PASSWORD NAME="oldpassword" id = "oldpassword" size = "15" maxlength = "15" tabindex = "1"/></p>
<p><b>Password:</b>         <INPUT TYPE=PASSWORD NAME="newpassword" id = "newpassword" size = "15" maxlength = "15" tabindex = "1"/></p>
<p><b>Re-Password:</b>   <INPUT TYPE=PASSWORD NAME="repassword" id = "repassword" size = "15" maxlength = "15" tabindex = "1"/></p>
<input type="submit" id="val" value="Submit" align="middle" method="POST" onclick="fetch_javaScript()"/><INPUT TYPE="reset" name = "Reset" value = "Reset"/>
<p>Main Menu <A HREF = login.pl>click here</A></p>
</center>
</div>
</td></tr></table></center>
</form>
<div id='ajaxDiv'>Your result will display here</div>
<!--<div id="myDiv"></div>-->
</body>
</html>
Perl Code
#!/usr/bin/perl
use DBI;
use strict;
use CGI;
my $cgi = CGI->new;
print $cgi->header;
print $cgi->start_html("Password Form");
print "Content-type: text/html\n\n";
my $request;
######################################## Query String
if ($ENV{'REQUEST_METHOD'} eq "GET")
{
$request = $ENV{'QUERY_STRING'};
}
elsif ($ENV{'REQUEST_METHOD'} eq "POST")
{
read(STDIN, $request,$ENV{'CONTENT_LENGTH'}) || die "Could not get query\n";
}
#$request="usr=sairam&oldpassword=password123&oldpassword=123456&repassword=123456";
my $j=0;
my ($i,#update_value,#value);
my #parameter=split(/&/,$request);
for $i (#parameter)
{
#value=split(/=/, $i);
$update_value[$j] =$value[1];
$j++;
}
my $user=$update_value[0];
my $oldpward=$update_value[1];
my $newpward=$update_value[2];
my $repward=$update_value[3];
#$user = $_SESSION['username'];
if ($user)
{
## Database Connectivity
my $DSN = q/dbi:ODBC:SQLSERVER/;
my $uid = q/ivr/;
my $pwd = q/ivr/;
my $DRIVER = "Freetds";
my %attr = (PrintError => 1,RaiseError => 1,);
my $dbh = DBI->connect($DSN,$uid,$pwd,\%attr) or die $DBI::errstr;;
my $sth=$dbh->prepare("select password from rpt_account_information where username='$user'") or die("Query didn't work");
$sth->execute();
my $oldpassworddb=$sth->fetchrow();
# check pass
if ($oldpward==$oldpassworddb)
{
# check twonew pass
if ($newpward==$repward)
{
#success
#change pass in db
if (length($newpward)>10||length($newpward)<4) #Here is the code
{
print "<script>alert('Password must be betwwen 4 & 10')</script>";
}
else
{
my $p_update = $dbh->prepare("UPDATE rpt_account_information SET password=? WHERE username=?");
$p_update->execute($newpward,$user);
#session_destroy();
print 'Your pass has benn changed.Return to the main page';
}
}
else
{
print "<script>alert('New Pass does not match')</script>";
}
}
else
{
print "<script>alert('Old Pass does not match')</script>";
}
}
This is my complete code but I'm not able to find out error or output
Please help me...
Assigning a value to innerHTML that contains a <script> element won't cause that script to be executed.
As a work around, you could parse the JavaScript out of it in JS and then eval it, but you would be better off dealing in structured data (e.g. JSON) and leaving your presentation logic to JavaScript already in the page.