I'm still very new to ajax and jquery, so sorry for the title, I didn't know how to phrase my question.
I'm having a problem with my URL string send: I have a Form set up which allows users to enter currency details as seen below, once the submit button has be pressed i want the data to be sent to a PHP file while having the page not redirect and putting what was sent in the text area below as XML.
I have the JQuery sending the string(to much data i dont want the operation or the textarea to be sent), but the PHP file is not doing anything with the data
Here's my code and my screenshots:
The Form:
<form name="myform" id="myform" method="get">
<input type="radio" name="operation" value="1" id="Post"
onclick="displayFunctionPost()"> Post
<input type="radio" name="operation" value="2" id="Put"
onclick="displayFunctionPut()"> Put
<input type="radio" name="operation" value="3" id="Delete"
onclick="displayFunctionDelete()"> Delete
<br>
Currency Code:
<br>
<input type="text" name="currencycode" id="currencycode"
placeholder="Code" disabled>
<!--currency form-->
<br>
Currency Name
<br>
<input type="text" name= "currencyname" id="currencyname"
placeholder="name" disabled>
<br>
<!---rates form--->
Rate(£=1):
<br>
<input type="number" name="rate" id="rate" placeholder="rate" disabled>
<!---countries form-->
<br>
Countries (comma separated if 1+)
<br>
<input type="text" name= "countries" id="countries" placeholder="countries" disabled>
<br>
<!---xml response--->
<br>
Response Message:
<br>
<div id="textarea"><textarea id="textarea" cols="70" rows="5"></textarea>
</div>
<input type="Submit" name="Submit" id="Submit" value="Submit" >
</form>
And here is the JQuery I have so far:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#Submit").click(function(e){
e.preventDefault()
var data = "¤cyname="+currencyname+"¤cycode="+currencycode+"&rate="+rate+"&countries=";
var data = $('#myform').serialize();
$.ajax({
type: 'get',
cache: false,
url: 'currPut.php',
data: data,
processData: false,
contentType: false,
success: function( data ) {
alert('test ');
}
});
});
});
</script>
And here's the PHP file:
<?php
#date_default_timezone_set("GMT");
$xml=new DomDocument("1.0","UTF-8");
$xml->formatOutput=true;
$xml->preserveWhiteSpace=false;
$xml->load('rates.xml');
if(!$xml)
{
$currencies=$xml->createElement("currencies");
$xml->appendChild($currencies);
}
else
{
$currencies=$xml->firstChild;
}
if (isset($_GET['Submit']))
{
$curcode = $_GET['currency-code'];
$newrate = $_GET['rate'];
$cname = $_GET['currency-name'];
$countries = $_GET['countries'];
$today = date("F j,g:i a");
$curr=$xml->createElement("currency");
$currencies->appendChild($curr);
$currate=$xml->createElement("code",$curcode);
$curr->appendChild($currate);
$currate->setAttribute("rate",$newrate);
$name=$xml->createElement("cname",$cname);
$curr->appendChild($name);
$places=$xml->createElement("cntry",$countries);
$curr->appendChild($places);
$xml->save('rates.xml');
}
?>
This is the form.
And this is the console.
Related
I have the following code to send the data via Jquery AJAX and notice that I have three values that need to be sent to the receiving file(Addtocart.php).
The transmission and reception were good, but after a while I do not know why it no longer sends.. When one of the values is canceled and two remain, it sends.. but when three values are not sent.
ajax
<script >
$(document).ready(function() {
$("#add-to-card").click(function() {
var quantityq = $("#quantityq").val();
var user = $("#user").val();
var product__id = $("#product__id").val();
$.ajax({
url: 'Addtocart.php',
method: 'POST',
data: {
quantityq: quantityq,
user: user,
product__id: product__id
},
success: function(data) {
$('#result').html(data);
}
});
});
});
</script>
<input step="1" min="1" max="50" name="quantityq" id="quantityq" value="1" title="Qty" class="input-text qty text" size="4" type="number">
<input type="hidden" name="user" id="user" value="72663">
<input type="hidden" name="product__id" id="product__id" value="4">
</div>
<button type="submit" id="add-to-card" class="btn sqaure_bt fll display-f">send</button>
It is not clear what issue you are facing, as you didn't post an example that shows the issue clearly.
But Rather than binding to click event of the button, you should bind to submit event of the form. This way, client-side form validation will work correctly and your JS code will be a lot smaller.
<form id="myForm">
<input step="1" min="1" max="50" name="quantityq" id="quantityq" value="1" title="Qty" class="input-text qty text" size="4" type="number">
<input type="hidden" name="user" id="user" value="72663">
<input type="hidden" name="product__id" id="product__id" value="4">
<button type="submit" id="add-to-card" class="btn sqaure_bt fll display-f">send</button>
</form>
<script>
$(document).ready(function() {
$("#myForm").submit(function(e) {
e.preventDefault();
let postData = $(this).serialize();
$.ajax({
url: 'Addtocart.php',
method: 'POST',
data: postData,
success: function(data) {
$('#result').html(data);
}
});
});
});
</script>
I have a jsp page in my project. In this jsp page, I have inputs that are filling by javascript function. When the servlet post action happens, this input's values are disappears. I want to fill these input again when the servlet forwarded the jsp page. So, is it possible to trigger a javascript function from servlet?
My JSP page codes
<div style="margin-left:7%; margin-right:10%; border-style:groove;">
<div style="margin-right:65&; margin-left:5px;">
<label for="salesOrder">Sales Order</label> <input id="sOrder" style="margin-left:58px;" onkeyup="this.value = this.value.toUpperCase();" onselect="salesOrder();fill_table();" value="${salesorder}"> <label style="margin-left:75px;">Count:</label> <input type="text" id="count" size="3" style="margin-top:3px;"><br>
<label>Ind. Date:</label> <input type="text" id="induction" style="margin-left:59px;" size="15"><br>
<label>Customer/Operator:</label> <textarea id="customer" rows="1" cols="10" wrap="soft"></textarea> <textarea id="operator" rows="1" cols="10" wrap="soft"></textarea><br>
<label>Removal Reason:</label> <textarea rows="2" cols="30" wrap="soft" id="rem_reason" style="margin-left:10px; height:50px; text-size:10px;"></textarea>
</div>
<div style="margin-left:45%; margin-top:-130px;">
<input type="checkbox" name="v2500" value="V2500-A5" onclick="check_v25()"> <label for="v2500">V2500-A5</label><br>
<input type="checkbox" name="7b" value="CFM56-7B" onclick="check_7b()"> <label for="7b">CFM56-7B</label><br>
<input type="checkbox" name="5c" value="CFM56-5C" onclick="check_5c()"> <label for="5c">CFM56-5C</label><br>
<input type="checkbox" name="3" value="CFM56-3" onclick="check_3()"> <label for="3">CFM56-3</label>
</div>
<div style="margin-left:65%; margin-top:-130px;">
<label>TSN:</label> <input type="text" id="tsn" style="margin-left:1px;"><br>
<label>CSN:</label> <input type="text" id="csn" style="margin-left:-0.5px;"><br>
<label>TSLSV:</label> <input type="text" id="tslsv" style="margin-left:-1px;"><br>
<label>CSLSV:</label> <input type="text" id="cslsv" style="margin-left:-3px;">
</div>
</div>
My JavaScript function
<script>
function salesOrder(event,ui){
$("#sOrder").val(ui.item.label);
var salesOrder=$("#sOrder").val();
var URL_PREFIX="http://ptrisd01:8983/solr/SalesOrderCore/select?q=STRSO:";
var URL=URL_PREFIX+salesOrder;
$.ajax({
url : URL,
dataType : 'json',
type:'get',
json : 'json.wrf',
success:function(data){
console.log("success");
var docs = JSON.stringify(data.response.docs);
var jsonData = JSON.parse(docs);
document.getElementById("induction").value=jsonData[0].STRINDDATE;
document.getElementById("customer").value=jsonData[0].STRCUSTOMER;
document.getElementById("operator").value=jsonData[0].STROPERATOR;
document.getElementById("rem_reason").value=jsonData[0].STRREMREASON;
document.getElementById("tsn").value=jsonData[0].STRTSN;
document.getElementById("csn").value=jsonData[0].STRCSN;
document.getElementById("tslsv").value=jsonData[0].STRTSLSV;
document.getElementById("cslsv").value=jsonData[0].STRCSLSV;
}
});
};
</script>
A part of my servlet codes
request.setAttribute("salesorder", salesOrder_hidden);
PrintWriter out = response.getWriter();
out.println("<script type=\"text/javascript\">");
//out.println("alert('Saving completed...');");
//out.println("location='upload.jsp';");
out.println("salesOrder();");
out.println("</script>");
request.getRequestDispatcher("upload.jsp").forward(request, response);
Also, I'm using JQuery Autocomplete for sOrder input.
What Swati said. Looks like you don't know about sessions yet. If you do it with Java, create Session at the servlet.
HttpSession session = request.getSession();
session.setAttribute("attributeName", value);
response.sendRedirect("your.jsp");
I have create a form where I have define ckeditor which is work perfectly. Here I want to submit form value through jQuery but when I click on submit button it does't get ckeditor value on single click where other text field took its value on same click why ckeditor does't ? So, How can I fix this problem? Please help me.
code:
<script>
$(document).ready(function(){
$("#submit").click(function(){
category = $("#category").val();
temp_name = $("#temp_name").val();
template_text = $("#template_text").val();
$.ajax({
type:"POST",
data:{"admin_id":admin_id, "category":category, "temp_name":temp_name, "template_text":template_text},
url:"<?php echo base_url('index.php/'); ?>setting/add_template",
success: function(data){
$("#pro").html(data);
}
});
});
});
</script>
<form method="post">
<label for="name">Category<span class="required">*</span></label>
<input type="text" name="category" id="category" required="required" />
<label for="email">Template Name<span class="required">*</span></label>
<input type="text" name="temp_name" id="temp_name" required="required" />
<label for="email">Template Text<span class="required">*</span></label>
<textarea class="ckeditor" name="template_text" id="template_text"></textarea>
<input type="submit" name="submit" id="submit" class="btn btn-success" value="submit">
</form>
Pressing the button Index.php page, through sending the data to the script Resultx.php page, which responds with an asynchronous call on the same page Index.php.
index.php
<script>
$(document).ready(function() {
$("#input_form").submit(function(){
var fett = $("#fett").val();
$.ajax({
url: 'resultx.php',
type: "POST",
data: "fett="+fett,
dataType: "html",
success: function(data) {
$("div#resultx").html(data);
}
});
return false;
});
});
</script>
<form name="testa" id="input_form" action="" method="post" class="form-shorten" onsubmit="return checkForm(this);">
<input type="text" name="fett" class="form-control input-lg" id="fett" required><br/>
<button name="invio" type="submit" class="btn" value="Send" onclick="loadDoc()"><span class="glyphicon glyphicon-fire"></span> Send</button>
</form>
I wanted to add options with the "radio function" which may send along with the variable fett, also the variable taskOption to Resultx.php page.
<p><label class="radio-inline select">
<input class="radio-inline select" type="radio" name="taskOption" id="taskOption1" value="taskOption1"> option1</label>
<label class="radio-inline select">
<input class="radio-inline select" type="radio" name="taskOption" id="taskOption2" value="taskOption2"> option2</label></p>
Resultx.php
<?php
$fett = $_POST["fett"]; // ok
$taskOptionOK = $_POST["taskOption"]; // This is what I need
echo "$fett ";
echo "$taskOptionOK ";
?>
I know this is trivial but to me jQuery is kryptonite.
To get the value of a checked checkbox/radio you can try this:
var taskOption = $('input[name=taskOption]:checked').val();
I am learning javascript but I still do not get to the book's chapter that could answers my question, so I will be very grateful if somebody can put me in the right track.
Here is the situation:
I am using jquery to submit a form. However I need to put two forms (of the same kind but referring to different object) and I want to use the same jquery function to submit the one I choose.
This is the jquery function:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".submit").click(function(){
var name = $("#student").val();
var mark = $("#mark").val();
var dataString = 'student='+ student + '&mark=' + mark;
$.ajax
({
type: "POST",
url: "records.php",
data: dataString,
success: function()
{
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
});
</script>
These are the forms I would like to pass to the above function depending on the one I click.
<form method="post" name="form">
<input type="hidden" id="student" name="student" value="Mandy" >
Mark: <input size="2" id="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
<form method="post" name="form">
<input type="hidden" id="student" name="student" value="Fred" >
Mark: <input size="2" id="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
Thanks
Well, first thing's first - you're going to get nowhere with the same id's on the page. Change the id's on student and mark to classes (which do not have to be unique):
<form method="post" name="form">
<input type="hidden" class="student" name="student" value="Mandy" >
Mark: <input size="2" class="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
<form method="post" name="form">
<input type="hidden" class="student" name="student" value="Fred" >
Mark: <input size="2" class="mark" name="mark" value="1" type="text">
<input type="submit" value="Submit" class="submit"/>
</form>
Then the jQuery is pretty simple - find the nearest form and seek out the student and mark by class (scoped to the form):
$(".submit").click(function(){
var $form = $(this).closest('form');
var student = $(".student", $form).val();
var mark = $(".mark", $form).val();
var dataString = 'student='+ student + '&mark=' + mark;
$.ajax
({
type: "POST",
url: "records.php",
data: dataString,
success: function()
{
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
Live example: http://jsfiddle.net/6Lc8R/