i am trying to use ajax in form so that it checks the data base with a php script and then i would like to change the values of some disabeled fields in my form but it doest seem to work although the ajax is working and the jquery too .
heres the script
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<meta charset="utf-8" />
<title>F2 Form</title>
<script type="text/javascript">
function checkDB(){
var itr = document.getElementById( "itr" ).value;
$.ajax({
type : 'POST',
url : 'checkDB.php',
data : {itr: itr},
success: function(response){
$("v_id").attr("value","hi");
}
});
}
</script>
heres the html form snippet :
<form name="f2" method="post" action="form_submission2.php">
ITR:<input type="text" name="itr" id="itr" onkeypress="checkDB()" /><br />
Vehicle ID:<input type="text" name="id" id="v_id" value="" disabled><br />
Please check the code under the success :
Change
$("v_id").attr("value","hi");
To
$("#v_id").val("hi");
The value attribute is not the value of the input, it's the default value of the input. The value property is the value of the input.
To set the value, use val:
$("v_id").val("hi");
(Or you could use .prop("value", "hi"), but idiomatically, you'd use val.)
But note also that you're missing the # on the id selector, so:
$("#v_id").val("hi");
Re
still not working
Yes, it does:
function checkDB() {
var itr = document.getElementById("itr").value;
// Simulate ajax with timeout
setTimeout(function() {
$("#v_id").val("hi");
}, 10);
}
checkDB();
<form name="f2" method="post" action="form_submission2.php">
ITR:
<input type="text" name="itr" id="itr" onkeypress="checkDB()" />
<br />Vehicle ID:
<input type="text" name="id" id="v_id" value="" disabled>
<br />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
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>
I have html form and want to make a validation by submitting the form with its specific id and validate it using jquery.
Here is my code:
HTML
<html>
<head>
<script src="jquery-1.11.2.min" type="text/javascript"></script>
</head>
<body>
<form method="post" name="frmhot" id="contactform3412">
<input type="text" name="status"/>
<input type="text" name="line"/>
<input type="text" name="reason"/>
<input type="text" name="partnum"/>
<input type="text" name="badgescan"/>
<input class="button_text" type="submit" value="Submit"/>
</form>
<script type="text/javascript">
var url = "";
jQuery("#contactform3412").submit(function(e){
url= 'works well!';
});
alert(url);
</script>
</body>
For this example, i want to get the value of the javascript variable 'url' within the jQuery condition submit. Thanks in advance :)
Use this -> Fiddle
var url = "";
$("#contactform3412").submit(function(e){
url= 'works well!';
alert(url);
return true;
});
Anyways you set url value and perform operations after submit,so use url value there only. In your problem, url could not set to "works well" as submit event was not fired.
You're missing the js file extension in your script declaration. It should be
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
instead of
<script src="jquery-1.11.2.min" type="text/javascript"></script>
With that, if you wrap your submit handler in document.ready(), it should work on click of form submit.
$(document).ready(function(){
var url = '';
$('#contactform3412').on('submit', function(e){
e.preventDefault();
url= 'works well!';
alert(url);
});
});
I am in a situation, where I need to convert my form filled data to a text before submitting.
Like for example, the form may have a name field and an email field. I will fill the form with details, then when I click export as text, I need to get the contents of the html in text format
name = <input type="text" name="name" /> <!-- user enters "john" -->
email = <input type="text" name="email" /> <!-- user enters a#b.com -->
when I export I need
name = john
email = a#b.com
Currently, I am using this code to convert. But the problem is, once I convert I am not able to get back to previous state.
$("#btn").click(function(){
$('.replace').replaceWith(function(){
return this.value
});
});
So, what I thought was, I will display the output in a div tag. But if I try
document.getelementByID("parentdiv").value
I am unable to get the form values.
Any suggestions please?
Update:
serialize is not working as expected. The above one is a small example. The form is so complex and I need to visually render the form values to its labels.
$x = $('form').serialize();
This will give you a string of elements and values which you can easily work with, it's intended to use as JSON, however for your intended purpose it should be fairly easy to fiddle around with.
It will give you an output similar to
name=John&x=y
try like this using serializeArray():
$("#btn").click(function(){
var x = $('form').serializeArray();
console.log(x);
var str="";
$.each(x, function( index, val ) {
str=str+val.name+":"+val.value+"<br>";
});
$('#textFrom').html(str);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
name =<input type="text" name="name" /> <!--user enters "john"-->
email =<input type="text" name="email" /> <!--//user enters a#b.com-->
</form>
<button id="btn">click</button>
<div id="textFrom"></div>
Use jQuery serialize function :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").text($("form").serialize());
});
});
</script>
</head>
<body>
<form action="">
Name: <input type="text" name="name" value="Tina" /><br>
Email: <input type="text" name="LastName" value="tina#yopmail.com" /><br>
</form>
<button>Export Values</button>
<div></div>
</body>
</html>
Output will be : name=Tina&LastName=tina%40yopmail.com
The problem i'm having is Im trying to get the contact.php to validate a contact form that is now in the bottom of every page in my site. It worked great with just validating one page and having a hard URL to take them back to. the troubleing code is this.
/* In case of no valid input go back */
if ($p1==""||$p2==""||$p3==""||$p5==""||$n0!=0||$f0<7||$NL==0||$p7=="") {
header($_SERVER['HTTP_REFERER'].$report);
}else{$report='noerror';}
Ive also tryed this:
/* In case of no valid input go back */
if ($p1==""||$p2==""||$p3==""||$p5==""||$n0!=0||$f0<7||$NL==0||$p7=="") {
header($_SERVER['PHP_SELF'].$report);
}else{$report='noerror';}
This is the original code that worked for one page:
/* In case of no valid input go back */
if ($p1==""||$p2==""||$p3==""||$p5==""||$n0!=0||$f0<7||$NL==0||$p7=="") {
header('Location:estimate_page.php?'.$report);
}else{$report='noerror';}
I could just make a new "contact.php" page for every page that has the form in the footer, but thats stupid if i can just make this work. Any ideas
You are thinking in the right direction with javascript/jQuery -- it will allow you to catch the invalid fields before submitting / changing pages. Much better user experience. Only submit when fields are validated.
Here is a link for how to do simple field validation testing with jQuery:
jsFiddle Demo
HTML:
One: <input type="text" id="f1"><br />
Two: <input type="text" id="f2"><br />
Three: <input type="text" id="f3"><br />
Four: <input type="text" id="f4"><br />
<br />
<input type="button" id="mybutt" value="Go" />
javascript/jQuery:
var chkFld, arrAll = {'One':'f1','Two':'f2','Three':'f3','Four':'f4'};
$('#mybutt').click(function() {
var errMsg='', badFlds='', firstBad='';
for(var key in arrAll){
chkFld = '#'+arrAll[key];
$(chkFld).removeClass('error');
if ($(chkFld).val() ==''){
$(chkFld).addClass('error');
//alert('Please complete field ' + arrAll[key] );
errMsg += '*' + key + '\n';
if (firstBad=='') firstBad=chkFld;
}
}
if (errMsg != '') {
alert(errMsg);
$(firstBad).focus();
}
}); //END mybutt.click
Note that the above example uses jQuery, so you must reference the jQ libraries (usually inside the head tags, something like this:)
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
EDIT:
Here is what the full HTML would look like:
<?php
//Any initial PHP code goes here
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
//javascript
var chkFld, arrAll = {'One':'f1','Two':'f2','Three':'f3','Four':'f4'};
$(document).ready(function() {
$('#mybutt').click(function() {
var errMsg='', badFlds='', firstBad='';
for(var key in arrAll){
chkFld = '#'+arrAll[key];
$(chkFld).removeClass('error');
if ($(chkFld).val() ==''){
$(chkFld).addClass('error');
//alert('Please complete field ' + arrAll[key] );
errMsg += '*' + key + '\n';
if (firstBad=='') firstBad=chkFld;
}
}
if (errMsg != '') {
alert(errMsg);
$(firstBad).focus();
return false;
}
//If it gets to here, it passed validation
$('#yourForm').submit();
}); //END mybutt.click()
}); //END $(document).ready()
</script>
</head>
<body>
<form id="yourForm">
One: <input type="text" id="f1" /><br />
Two: <input type="text" id="f2" /><br />
Three: <input type="text" id="f3" /><br />
Four: <input type="text" id="f4" /><br />
</form>
<input type="button" id="mybutt" value="Click Me">
</body>
</html>
Note that, using the above scenario, no further PHP code would execute until the form is submitted, using the manual $('#yourForm').submit(); statement.
i am trying to write a simple textbox (for people to type url in it) with a button in html.
when the button is clicked, it will send the url of the current website that I am browsing to the url that is listed in the textbox using the POST method. is it possible?
i have been looking on forums but don't really know which is the right one cos it seems that there are various way of doing it and i don't really know how to edit them.
my current code:
<html>
<head>
<title>YouTube</title>
<script type="javascript/text">
function handleButtonEnterClick(tab) {
//TODO:
var textbox_url = document.getElementById("url_textbox");
var textbox_value = textbox_url.value; //eg. value = "www.google.com"
//Need to have a POST method written here to send the url of the current
//webpage for example www.youtube.com to url listed in the textbox,
//for example www.google.com
//May I know how can I do it? Thanks.
}
</script>
</head>
<body>
<div id ="container">
<p>Enter URL:</p>
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</div>
</body>
</html>
What you need is a <form> element, which a) has action attribute to indicate where to send the data; b) on submit sends the data (I've added an extra <input type='hidden'> to store your current pages url for sending).
<script type="javascript/text">
function handleButtonEnterClick() {
var textbox_value = document.getElementById("url_textbox").value;
document.getElementById('myUrl').value = window.location;
var form = document.getElementById('myForm');
form.action = textbox_value;
form.submit();
}
</script>
<div id="container">
<form action="" method="post" id="myForm">
<p>Enter URL:</p>
<input type="hidden" id="myUrl" name="url" />
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</form>
</div>
This should work:
<html>
<head>
<title>YouTube</title>
<script type="javascript/text">
function handleButtonEnterClick(tab)
{
var textbox_url = document.getElementById("url_textbox");
var textbox_value = textbox_url.value; //eg. value = "www.google.com"
//Set the form action to the textbox value
var the_form = document.getElementById("the_form");
the_form.setAttribute("action", textbox_value);
//Set the value of the url field to the current url
document.getElementById("url").setAttribute("value", window.location);
the_form.submit();
}
</script>
</head>
<body>
<div id ="container">
<form action="" method="post" id="the_form">
<p>Enter URL:</p>
<input type="hidden" name="url" id="url" />
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</form>
</div>
</body>
</html>
The current page location is stored in the JavaScript variable "window.location.href" (thats in Chrome, might be different elsewhere).
You also need to set the action of your form to the URL in the textarea. Suggest you put an id tag on the html form element, and use that id tag to set the action property of the form to the contents of the textbox as part part of the buttons onclick handler.
There are two options:
Use a HTML form, as Ant has shown, set the action and method attributes. Add a submit button inside the form (along with your textbox). When you click on the Submit button, your data will get posted.
Use AJAX to post your form if you want to stay in the current page