I am using Yii.
I have a php file which represents the view.
It has an input field <input type='text' id='client' /> which I want to update after I get a response from the server.
The response should be sent after I enter a value in other field and submit it to the server.
Can you refer me to an example on how to do this?
Thanks.
Or just php:
<form method="post" action="/">
<input type='text' name="client" id='client' value="<?php if(!empty($_POST['client'] )){ echo $_POST['client']; } ?>" />
<input type="submit">
</form>
Send a ajax request on form submit, receive the json object from server and assign it to your textbox. something like this
$('#submitButton').on('click', function(e){
e.preventdefault();
$.post( "ajax/index", function( data ) {
$( "#client" ).val( data.client );
});
});
Related
Given is:
<input type='text' name='firstname' id='firstname'>
<input type='text' name='lastname' id='lastname'>
<input type='text' name='username' id='username'>
<input id='pw' name='pw' type='password'>
I try to submit the data with an ajax-post-request like this:
var myData = "firstname="+ $('#firstname').val() + "&lastname="+ $('#lastname').val() + "&username="+ $('#username').val() + "&pw="+ $('#pw').val();
$.ajax({
type: "POST",
url: "php/register.php",
dataType:"text",
data:myData, //Form variables
success:function(response){
$("#responds").append(response);
}
How to submit this data in a kind of this way correctly tho the php-file which corresponds to the database? Is a <form> needed for submitting with a button?
There are many solutions to this problem as many have mentioned. Easiest from my point of view is to wrap the fields in a form.
Bind a submit event which fires a callback when your form is submitted.
Serialize the form using .serialize() creating a text string in standard URL-encoded notation of all valid input fields and their values (so you don't have to build this query string yourself)
Post your data using $.post and handle the response using the success callback
Below is a fully functional snippet. You can see the data sent to PostBin here.
// PostBin CORS
$.ajaxSetup({crossDomain:true})
// Submit handler
$('form').on('submit', function(event) {
event.preventDefault();
var $form = $(this)
$.post(
'http://postb.in/ADC3a3Vm',// replace with php/register.php
$(this).serialize(),
function(response){
$("#response").append(response);
$form[0].reset()
}
);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="firstname" placeholder="First Name">
<input type="text" name="lastname" placeholder="Last Name">
<input type="text" name="username" placeholder="Username">
<input type="password" name="pw" placeholder="Password">
<button type="submit">Submit</button>
</form>
<div id="response"></div>
you can use serialize() jQuery function
var myData = $("form").serialize();
in this case <form> is required
Read here
I want to send this query (EA452401760IN) to https://track.aftership.com/india-post/.
After a successful submission by Form the URL will be
https://track.aftership.com/india-post/EA452401760IN
Form
<form method="POST" action="https://track.aftership.com/india-post/" target="_blank"> <input type="text" value="EA452401760IN"></input><button type="submit"> submitc</button></form>
Do I need a PHP file for this?
If yes, how do I write a php file for this problem.
Pure Javascript approach with Jquery
<input type="text" id="trackingNumber" value="EA452401760IN"></input>
<button onclick="go()">Track</button>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$( "button" ).on( "click", function( event ) {
window.location.href = "https://track.aftership.com/india-post/" + $('#trackingNumber').val();
});
</script>
JSBIN: https://jsbin.com/fuqovocoza/edit?html,console,output
<?php if(($_SERVER["REQUEST_METHOD"] == "POST")){
//Check that the form has been posted if it has been then redirect to the correct page
header ('Location: https://track.aftership.com/india-post/' . $_POST['query']);
}
else
{
if the form has not been submitted display the form
<form method="POST" action="https://track.aftership.com/india-post/" target="_blank"> <input type="text" name="query" value="EA452401760IN"></input><button type="submit"> submitc</button></form>
Note that I have changed the name of the input field to query.
Currently i have a form which has an image as a submit. It works fine as in the form variables get passed through and gets processed. However, the page gets refreshed every time click submit for the form since the processing page has a header back to the form page.
I need a way to send the form variables without the refreshing. I understand it can be done via ajax. However, i am facing a prob since my submit button is an image. Any help as to how i can rectify my code to submit the form without refresh would be great
<form name ="nominate" action="" id ="nominate" method="POST">
<input type="hidden" name="id" value="<?php echo $id;?>">
<input type="hidden" name="screenName" value="<?php echo $author;?>">
<input type="hidden" name="course" value="<?php echo $course;?>">
//this is the image submit button
<input type="image" style="float: left;" onMouseOver="this.src='images/nominated.png'"
onMouseOut="this.src='images/nominate.png'" value="Place Order" src="images/nominate.png" width="60" height="20">
</form>
<script>
$(function() {
$(".button").click(function() {
var id = $("#id").val();
var screenName = $("#screenName").val();
var dataString = 'id='+ id + '&screenName=' + screenName + '&course=' + course;
alert (dataString);
$.ajax({
type: "POST",
url: "nominate.php",
data: dataString,
success: function(){
alert(dataString);
}
});
});
});
</script>
The code you've done should work, if you add the class of "button" to the image.
<input type="image" class="button"....
Firstly you need to add the id attribute as in jquery $("#") is the id of the element.
<input type="hidden" name="id" id="id" value="<?php echo $id;?>">
<input type="hidden" name="screenName" id="screenName" value="<?php echo $author;?>">
<input type="hidden" name="course" id="course" value="<?php echo $course;?>">
Then as said by Andrew either add the class="button" or use $("#some_id") and then give the button input an id="some_id".
$(".button").click(function(){
var url = "nominate.php";
var id = $("#id").val();
var screenName = $("#screenName").val();
var course = $("#course").val();
$.post(url,{id:id, screenName:screenName , course:course }, function(data){
alert(data);
});
});
This will alert whatever you send back from "nominate.php". Make sure you remove the header() from the script and send back a success or error message possibly.
Add the class 'button' to your image.
Also, you don't seem to have course defined anywhere. You might want to fix that, too.
I am using jquery validation 1.9.0. I have used the latest Jquery and on back to 1.6.0. with no change in result
My problem is this: When I deliberately put in the wrong values (not enough characters etc) the validation script rightfully shows the errors yet allows the script to be submitted anyways.
I have tried methods of validation including add rules, rules and the very simple form type below.
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
</script>
<script>
$(function() {
$("#comm").validate();
});
</script>
the form
<form action="comm.php" method="post" name="comm" id="comm">
Name: <input type="text" name="name" id="name" minlength="3" class="required" />
Email:<input type="email" name="email" id="email" class="required email" /> <br />
<label for="comment"> Comment </label> <br />
<textarea name="comment" id="comment" cols="80" rows="5" minlength="6" class="required" /></textarea>
<?php
date_default_timezone_set('America/New_York');
$date = date("Y-n-j h:i:s");?>
<input type="hidden" name="date" id="date" value="<?php echo $date; ?>" />
<?php $post_id = $id;?>
<input type="hidden" name="post_id" id="post_id" value="<?php echo $post_id; ?>" />
<?php $ip = $_SERVER["REMOTE_ADDR"]; ?>
<input type="hidden" name="ip" id="ip" value="<?php echo $ip; ?>" />
<input type="submit" value="Post" name="post" id="post" /> <input type="reset" value="Reset Form" name="reset" id="reset" />
</form>
Very simple stuff.
Submission happens on all my forms on the net, and all of them on localhost. I can always detect errors but never stop them. What am I doing wrong?
Firebug shows me submitting properly and no script errors. Also all jquerys are connected. Firebug also shows me this After submission novalidate="novalidate" in the form html. using onsubmit=return false does not change anything
I am using ajax to submit the form, works flawlessly
$(function() {
$("#comm").submit(function() {
var data = $('#comm').serialize();
alert (data); return false;
$.ajax({
url: "comm.php",
data: data,
type: "POST",
success: function(msg){
if(msg){
$('.comme').prepend().html(msg).show();
}else{
$('.comme').text("nothing came back");
}
}
});
return false;
});
});
Thank you
Try to do your Ajax handling after clicking the submit button instead of doing with jQuery form submission perhaps you're submitting the form data through Ajax only.
$(function() {
$("#post").click(function() {
var data = $('#comm').serialize();
// TODO: validate your data - $("#comm").validate();
// TODO: submit your form though ajax
// Other operations on form data
return false;
});
});
Note: If the form submission is happening with page redirection then try with 'onsubmit=return false;'.
Update:
I seems you've to submit the FORM from the validate function's submit callback handler(submitHandler) to avoid the redirection after submission. Please try to check this demo example which is working fine with Ajax form submission, review the source code of this example page and then adjust your code accordingly.
var v = jQuery("#form").validate({
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
target: "#result"
});
}
});
If you're usig jquery to receive the form when it is submitted, then then you should specify the php file containing the jquery code as the action of the form, instead of "listening" the submit event. Another option would be letting the 'action' parameter empty. The point here is that you're sending the form twice: when you click summit, the form is automatically sent to the file specified in the 'action' parameter, (that is the submission that is taking place, because it has no validation); and, at the same time when you click submit, it also triggers the ajax request, which will perform the validation and in case of success do the submission again.
I've coded some jquery & AJAX to call a PHP function I made that goes and gets some API data and brings it without refreshing the page. It appends, so you can have multiple searches without losing results.
What I need to do now is, I want to give the user the ability to change his mind on any one of the results. Maybe a little "X" at the end of each row. They click the "X" and that particular result is gone.
I've googled this, but I don't know what I'm looking for. Send me in the right direction, please?
Here's what I've got, so you know what I'm looking for:
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<form method="post" action="ajax.php" id="searchForm">
<input type="text" name="isbn" placeholder="Search..." />
<input class="myaccount" id="doSearch" name="doSearch" type="submit" value="Search" />
</form>
<form name="buyback" method="post" action="isbn.php">
<table id="result" class="myaccount" border=0 cellspacing=5 cellpadding=4>
<tr><td>
<strong>ISBN:</strong>
</td><td>
<strong>Price:</strong>
</td>{if $userlevel == 5}<td>
<strong>Full FCB Price</strong>
</td>{/if}
</tr>
</table>
<input name="doBuy" type="submit" value="Buy"><br>
</form>
<script>
// attach a submit handler to the form
$("#searchForm").submit(function(event) {
// stop form from submitting normally
event.preventDefault();
// get some values from elements on the page:
var $form = $( this ),
term = $form.find( 'input[name="isbn"]' ).val(),
//term = "isbn",
url = $form.attr( 'action' );
$.post( url, { doSearch: "Search", isbn: term } ,
function( data ) {
var content = $( data );
$( "#result" ).append( content );
}
);
});
</script>
EDIT:
Yes, it just returns data in this format:
<tr><td>
{$isbn}
<INPUT TYPE=hidden NAME="buy_isbn" VALUE="{$isbn}">
</td><td>
{$userPrice}
<INPUT TYPE=hidden NAME="buy_price" VALUE="{$userPrice}">
</td></tr>
This really depends on what type of html is returned by the ajax call. But you could wire up a .live() event that removes whatever you need to get rid of.
$('.removeItem').live('click', function(e) {
// remove whatever you want. maybe the previous element?
$(this).closest('tr').remove();
});
// clicking that link will remove everything returned by the ajax.php call
var content = $(data);
content.append("<a class='removeItem'>X</a>");
$("#result").append(content);
or you could just add the anchor into the results that are generated by your ajax.php file.
EDIT:
You could just use the live event and modify your html like this:
<tr><td>
{$isbn}
<INPUT TYPE=hidden NAME="buy_isbn" VALUE="{$isbn}">
</td><td>
{$userPrice}
<INPUT TYPE=hidden NAME="buy_price" VALUE="{$userPrice}">
</td><td>
X
</td></tr>