Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I want to create a webpage, that allows user to input values, then send to 192.168.1.101:8081 via GET request.
$(document).ready(function()
{
$(".sendButton").click(function()
{
var a = $(this).attr('value');
var b = $(this).attr('value');
$.get("http://192.168.1.101:8081/", {valueA=a}, "&" , {valueB=b});
});
});
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="/action_page.php">
<fieldset>
<legend><b><font size="4">Reference Points:</font></b></legend>
Value A:<br>
<input type="text" value="">
<br>
<legend><b><font size="4">Reference Points:</font></b></legend>
Value B:<br>
<input type="text" value="">
</fieldset>
<br>
<br><input type="submit" class="sendButton" value=" SEND "/b>
</form>
</body>
</html>
I know there're syntax errors. Because I know nothing about html and javascript, and only basic of php, so please excuse me.
So, when the "SEND" button is clicked, the 192.168.1.101:8081 will receive a the values from the inputs in the webpage. How? please help. Thanks
You're in the right path.
I'd suggest you to use the submit event instead:
https://api.jquery.com/submit/
Also USE AJAX, it takes care of asynchronous calls to the server.
Add an id attribute to your form and do something like this:
data: $(this).serialize() will take care of getting all the input values.
$('#you-form-id').on('submit', function (e) {
e.preventDefault();
var path = "http://192.168.1.101:8081/";
$.ajax({
url: path,
type: "POST",
data: $(this).serialize(),
async: true,
success: function (data) {
console.log(data);
$('div#ajax-results').html(data.output);
location.reload();
}
});
});
Using $_GET method:
<form name="form" action="" method="get">
<input type="text" name="subject" id="subject" value="Car Loan">
</form>
To show the value:
<?php echo $_GET['subject']; ?>
Using $_POST method:
<form name="form" action="" method="post">
<input type="text" name="subject" id="subject" value="Car Loan">
</form>
To show the value:
<?php echo $_POST['subject']; ?>
reference
Here is an example of passing data through URL within a site
<a href='page2.php?id=2489&user=tom'>link to page2</a>
reference 2, Passing variables with data between pages using URL
Related
Im trying to prevent users from moving on unless they have submitted their forms. So I've hidden the buttons and once the form is submitted they should appears one by one. Ive added the code for the first button but its not revealing itself after submission. Is my onsubmit code wrong? Any insight is welcomed.
$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});
$(document).ready( function() {
var now = new Date();
var today = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate();
$('#today').val(today);
});
function checkForm(form) {
var inputs = form.getElementsByTagName('input');
x=0;
for (var i = 0; i < inputs.length; i++) {
if ((inputs[i].value != "") || (inputs[i].value.checked)){
x=0;
}
else{
alert("Please answer all quesions");
x=1;
}
if(x==1){
event.preventDefault();
}
}
}
.btn {
position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<Html>
<head>
<title>Questionaire</title>
<link rel ="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="welcome">
<h3>Please fill in the blanks below and place a tick in the box beside the choice that applies to you.</h3>
</div>
<div id="b" style="display:none;">
<div class="container">
<form action="" onsubmit="return checkForm(this)">
Name of school: <input type="text" name="school"><br><br>
class: <input type="number" name="class" value="7"><br><br>
Today's Date <input type="date" id="today"><br><br>
<input type="submit" value="Submit" onsubmit="document.getElementById('btn1').style.display='block';">
</form>
</div>
</div>
<div id="d" style="display:none;">
<div class="container">
<form action="/action_page.php" onsubmit="return checkForm(this)">
Date of Birth: <input type="date" name="bday"><br><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div id="c" style="display:none;">
<div class="container">
<p>How old are you?</p>
<form action="" onsubmit="return checkForm(this)"">
<input type="radio" name="class" value="10 years old">10 years old<br>
<input type="radio" name="class" value="11 years old">11 years old<br>
<input type="radio" name="class" value="12 years old">12 years old<br>
<input type="radio" name="class" value="13 years old">13 years old<br>
<input type="radio" name="class" value="14 years old">14 years old<br>
<input type="radio" name="class" value="15 years old">15 years old<br><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<br>
<br>
<div>
<button class="btn" data-linkedto="#b">start</button>
<button class="btn" id="btn1" data-linkedto="#d" style="display:none;">1</button>
<button class="btn" data-linkedto="#c" style="display:none;">2</button>
</div>
</body>
</Html>
You could use ajax instead of submitting the form the regular way. This way the page will not reload and your JavaScript code will execute.
Here's an example of how it would work with the first form. I hope this helps :)
I've given the form an id of form0 and each of the input fields unique ids (so we can retrieve their values for the ajax request).
HTML
<div id="b" style="display:none;">
<div class="container">
<form id="form0" method="post" action="">
Name of school: <input type="text" name="school" id="school"><br><br>
class: <input type="number" name="school_class" value="7" id="school_class"><br><br>
Today's Date <input type="date" id="today"><br><br>
<!--when the following submit button is clicked the button with id 'btn1' is displayed.
Note: You could execute this javaScript code in the callback of the ajax request instead-->
<input type="submit" value="Submit" onclick="document.getElementById('btn1').style.display='block';">
</form>
</div>
</div>
<div>
<button class="btn" id="btn0" data-linkedto="#b">start</button>
<button class="btn" id="btn1" data-linkedto="#d" style="display:none;">1</button>
<button class="btn" id="btn2" data-linkedto="#c" style="display:none;">2</button>
</div>
JQuery/JavaScript
$(document).ready(function(){
//This is your own code here
var now = new Date();
var today = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate();
$('#today').val(today);
//This is your own code here
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto');
console.log($('div.container').parent('div'));
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
//my solution code here
$("#form0").on("submit", function(e){
//Note: make sure this function is inside $(document).ready() function
//Firstly prevent the form from submitting so that the page doesn't reload.
e.preventDefault();
//get our form input values by their IDs so we can send the values with the ajax request.
var school = $("#school").val();
var schoolClass = $("#school_class").val();
var todaysDate = $("#today").val();
//validate our values here.
//prepare the data to send to the server (our PHP script) in our ajax request.
//The properties (e.g 'school') in this object will be retrievable in PHP with $_POST['school'] etc.
var params = {'school': school, 'schoolClass' : schoolClass, 'todaysDate' : todaysDate};
//make the ajax request to our action_page.php
$.ajax({
url: 'action_page.php',
data: JSON.stringify(params),
type: "POST",
dataType: "json",
success: function(data){
//the ajax request was successful
var result = data;
console.log(result);
//We could use javascript to hide the current form and show the next button here.
},
error: function(xhr, status, error) {
//an error occured in the request so handle it here
}
});
});//end of form onsubmit function
});
I created a very basic php script just so you can see it working on your server
action_page.php
<?php
if(!empty($_POST)){
//the following variables should be set $_POST['schoolClass'], $_POST['school'], $_POST['todaysDate'] so we can do whatever we want with them here.
//prepare an array to send back data to the client side
$data = array();
$data['status'] = "success";
echo json_encode($data);
}
?>
What is happening is that your form is submitting.
This is because you're not preventing the default submitting of the form when x != 1. You want to stay on the page until the 'last' form, so you need to event.preventDefault() on every button click, but the last.
That said, you can submit only one form per request, and you have multiple. To get all information in a single POST (for this type of information I'd recommend using method="POST" (form attribute)) you need to make one form (or you might submit the form(s) via JavaScript in the background, but it will definitely be easier to have just one big form for your entire HTML page). Split it up, maybe use <fieldsets></fieldsets>, and show/hide these fieldsets using whatever JavaScript/jQuery logic you want to use.
As a general note: try to make something like this work first without javascript. Only then add the javascript to make the experience a little nicer. You've just learned Progressive Enhancement ;) Good luck!
I am new with CodeIgniter and I want to pass hidden field value to another page using jQuery in CodeIgniter. Can I do this using jQuery?
<input type="hidden" name="grdtot" class="grdtot" />
this hidden field on cart.php page
<label id="grdtot_c" name="grdtot_c" class="grdtot_c"></label>
I want to fetch this hidden field value on checkout.php page. How I can do this using jQuery?
You can do this another way using localstorage to getting value from another page
Just write like this on page one.
localStorage.setItem('Gridtotal', $('.grdtot').val());
And get value from another page.
var grdTotal= localStorage.getItem('Gridtotal');
$('#grdtot_c').val(grdTotal);
Suppose You have form given below:
<body>
<div>Upload data to the server without page Refresh</div>
<input type="hidden" name="hidden_name" id="hidden_name">
<input type="text" name="name" id="name">
<input type="text" name="email" id="email">
<input type="text" name="website" id="website">
<input type="submit" name="submit" id="save" value="Submit">
<div id="display"></div>
</body>
And Now Your Script to send data to Your Controller.
You must have to use ajax to send data to the controller in CodeIgniter, And It will make your work easy.
<script>
$(document).ready(function(){
$('#save').click(function(){
var hidden_name = $('#hidden_name').val();
var name = $('#name').val();
var email = $('#email').val();
var website = $('#website').val();
$.ajax({
type:'POST',
url:'<?php echo base_url();?>index.php/controller_name/function_name',
async:false,
data:{
"done":1,
"hidden_name":hidden_name,
"name":name,
"email":email,
"website":website
},
success:function(data){
$('#display').html(data);
}
});
});
});
</script>
I'm very aware that this question has been asked several times but I have tried at least 6 solutions and it has not worked. I'm collecting data to send to a google form but on form submission the browser redirects to a success page. I'd like for it to all happen using AJAX but my code isn't working.
HTML:
<form id="userinfo" method="get" action="https://script.google.com/macros/s/xxx/exec" accept-charset="UTF-8" onsubmit="return false">
<input type="text" name="name" id="formname" placeholder="Name">
<input type="text" name="email" id="formemail" placeholder="Email">placeholder="Game Days">
<input type="submit" value="submit" id="upload_data"/>
</form>
JS:
$("#userinfo").submit(function(e) {
var urll = "https://script.google.com/macros/s/xxx/exec"; // the script where you handle the form input.
$.ajax({
type: "GET",
url: urll,
data: $("#userinfo").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
You could use the jQuery Form Plugin to send the form without doing a submit.
Your code should look kinda like this:
$("#userInfo").ajaxSubmit({
success: function(data)
{
alert(data); // show response from the php script.
}
});
My JS is not that great so I have been fiddling with this for a while now.
I have a form which is being POST to another file when the submit button is clicked. When it is clicked I also want to show an alert then redirect the user back to a URL.
The redirecting code works just fine on a button where I call the function "onclick" like so:
<button onclick="test()">Return</button>
But I don't want to have an extra button for this...I want the form to POST then show an alert box then go to URL specified but I get not a function error from console, thanks.
<iframe name="noreloadhack" style="display:none;"></iframe>
<form action="http://www.example.com/test.php" onsubmit="return test();" method="post" target="noreloadhack">
JS:
<script>
function test() {
alert('Hello World');
var return_url = document.getElementById('return_url').value;
window.location.href= return_url;
}
</script>
If it makes a difference I have the form target set to a hidden iframe as a hack to not reload page on submit (I know, not the best method). I'm pretty much using 4 form attributes here.
I have some old code that I used to solve a similar situation. Where I wanted to submit a form but not reload the page, here it is. Since there were only 4 input fields I just grabbed the values using jquery.
Javascript:
function processForm() {
var teamMembers=new Array();
console.log($("#"));
var schoolName=$("#schoolname").val();
var teamMembers=new Array();
teamMembers.push($("#contestant1").val());
teamMembers.push($("#contestant2").val());
teamMembers.push($("#contestant3").val());
$.ajax({
method: "POST",
url: "php/register.php",
data: { schoolname: schoolName, teammembers:teamMembers.toString()}
})
.done(function( msg ) {
alert( "Your team is now registered " + msg );
$('#register').hide();
location.reload();
});
// You must return false to prevent the default form behavior
// default being reloading the page
return false;
}
HTML:
<form id="registration_form" onsubmit="return processForm()" method="POST">
<p style="margin:0px;">School Name:</p>
<input type="text" id="schoolname" name="schoolname" autocomplete="off" class="input" required>
<hr>
<p style="margin:0px;">Contestants</p>
<div id="teammembers">
<input type="text" id="contestant1" name="contestant1" autocomplete="off" class="input" required>
<p></p>
<input type="text" id="contestant2" name="contestant2" autocomplete="off" class="input" required>
<p></p>
<input type="text" id="contestant3" name="contestant3" autocomplete="off" class="input" required>
</div>
<input type="submit" id="registered">
I have overridden the .submit function of a form on this web-page, because the webpage is loaded inside the #mainContent in an "index.php", and I want the Submit button to replace only this #mainContent.
I am trying to get the data from this form to a .php file in order to make queries to a database (or simply echo populated variables, to indicate that data was passed).
I am very new to AJAX. Can someone explain to me how to pass the data to the .php file, or point me to a resource that will give me some clarification?
Right now I'm simply trying to pass a string to a variable and echo it back.
Could someone clarify what the first element in the "data: {thisElement: notThisOne}," refers to? Is it the "name" of an attribute in the form? The name of the variable it will be passing to the php script in the 'url:' ?
Thanks for clarify this.
Here is my 'search.html' file (which is embedded in another 'index.php' file):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main" data-role="content" id="main">
<div id="holder">
<h1>Search</h1>
<div class="left">
<form name="searchForm" id="searchForm" onsubmit="return false;">
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend><h3>Course</h3></legend>
<select name="courseSelect" id="courseSelect" name="courseSelect">
<option value="*">All</option>
<option value="COMM2216">COMM-2216</option>
</select>
</fieldset>
<p>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend><h4>Type:</h4></legend>
<input type="radio" name="lecLab" value="lec" id="lec"/>
<label for="lec">Lecture</label>
<input type="radio" name="lecLab" value="lab" id="lab">
<label for="lab">Lab</label>
<input type="radio" name="lecLab" value="*" id="both" checked="checked">
<label for="both">Both</label>
<p>
</fieldset>
<input type="submit" value="Go">
</form>
</div>
</div>
</div>
<script src="./scripts/searchGo.js"></script>
</body>
</html>
The 'searchGo.js':
$(document).ready(function() {
$("#searchForm").submit(function(e)
{
//e.preventDefault();
$.ajax({
type: "POST",
url: "./scripts/php_test.php",
data: {courseSelect: "Lecture, or Lab?"},
success: function(){
alert($lecOrLab);
$("#holder").load("./scripts/php_test.php");
}
}) ;
});
});
Finally, the 'php_test.php':
<html>
<head>
</head>
<body>
<?php
$courseSelect = $_POST['courseSelect'];
echo ($courseSelect);
?>
</body>
</html>
Am I collecting the data in the php_test.php incorrectly? Or assigning it in the 'data: {},' (of searchGo.js) incorrectly?
Thanks for clarification.
First you shouldn't perform a search with POST, you are not modifying states(Deleting or updating records). Use a GET request instead.
The data in the ajax request is what you want to pass to the request. Use jQuery serialize that encodes a set of form elements as a string for submission.
$.ajax({
type: "GET",
url: "./scripts/php_test.php",
data: $("#searchForm").serialize(),
success: function(data){
$("#holder").html(data);
}
});
Now, in your php file you should be looking at the $_GET. Something like this:
$courseSelect = $_GET['courseSelect'];
//now query your db and return your results based on your form fields.
PHP try:
echo json_encode($courseSelect);
Javascript: I'm not seeing where $lecOrLab is defined? Also for the success method, you're not getting the response correctly. Try this:
success: function(response){
var resp = $.parseJSON(response);
console.log(resp);
// do stuff with resp
}