I have here Jquery code with ajax/json. First i will discuss the flow. I have 3 textboxes, my item textbox pass it's value to auto-complete.php through ajax to get it's details. The return value is post or place into mode textbox. And if the post value is 1 or 2 the number textbox should change is css into display:none. But the problem this not working, I set the number textbox into readonly. The change function is working when I change directly the value of number textbox. Why isn't working when the value is post value?
<script>
$(document).ready(function() {
$("#number").css("display","none");
$(document).on('change','#mode',function(){
if($("#mode").val() =="1"){
$("#number").css("display","");
} else if($("#mode").val() =="2"){
$("#number").css("display","");
} else {
$("#number").css("display","none");
}
return true;
});
});
</script>
<input name="item" id="item" type="text"/>
<input name="mode" id="mode" type="text"/>
<input name="number" id="number" type="text" readonly />
<script type="text/javascript">
$(document).ready(function()
{
$('#item').change(function()
{
var item= $("#item").val();
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"item="+item,
dataType:'json',
type:'POST',
success:function(data){
var mode=data.mode;
//send to element ID
$('#mode').val(mode);
}
});
return false;
});
});
</script>
When you change the value using JavaScript it won't trigger events.
A simple fix is to trigger the event yourself after you update the value.
success:function(data){
var mode=data.mode;
//send to element ID
$('#mode').val(mode).change();
/* OR */
$('#mode').val(mode).trigger('change');
}
Related
I am using jquery to get the state of the toggle, I want to send that variable to my controller using twig, this is what I had done
<form method="post" enctype="multipart/form-data">
Sync: <br><div class="toggle-switch toggle-switch--green">
<input type="checkbox" class="toggle-switch__checkbox" id="togBtn" value='{{switchstatus}}' name = "sync">
<i class="toggle-switch__helper"></i></div><br>
<input type="submit" value="Update">
In Jquery
var switchStatus = false;
$("#togBtn").on('change', function() {
if ($(this).is(':checked')) {
switchStatus = $(this).is(':checked');
}
else {
switchStatus = $(this).is(':checked');
}
console.log(switchStatus);
$.ajax({
type: "POST",
url: 'name.html.twig',
data: switchStatus
});
});
I am getting value as empty
How do I pass my value of switchStatus in jquery to value option in twig HTML?
You need to send information to the PHP script via jQuery AJAX, the PHP script to sanitize user input/ do user check ups and then save the information into the database.
I have the following HTML:
<form method="post" id="IssueForm" action="wh_sir_insert.php" >
<input name='id[]' type='checkbox' class="selectable" value='$col[8]' />
<input type="submit" name="Build" value="BuildSir" />
<input type="submit" name="wht" value="Proceed Your Transfer" />
</form>
When I click the submit button, both value and form values are sent:
$("input[name='Build']").click(function(){
// some validation
});
following are the posted values:
$("input[name='wht']").click(function(){
//validation code
})
But when I submit the form through jquery.submit(), the values of the submit buttons are not posted:
$("#IssueForm").submit();
On the server side, I pick an action based on the submitted type. How I can add extra post information with $("elem").submit(); to send along type of action?
Please, note one way is through $.ajax Or $.post but it would require a huge effort to change all my code.
Below is my scenario:
$("input[name='Build']").click(function(){
var per=$("input[name='issueperson']");
$.ajax({
url:"ajaxloads/confirmuser.php",
dataType:"json",
data:"username="+per.val()+"&ownership="+$("#ownership").text(),
success:function(r){
if(r.success){
var agree=confirm("Are you sure you want to Build SIR?");
if (agree){
$("#IssueForm").submit();
// To avoid Double Submission
}
}
else{
$("#admin_message").show();
$("#ErrorMessage").text(r.info);
}
}
});
return false;
});
How I can send the value of submitted button along with the form submit?
Finally I got to work in some way by adding a extra Value with query string.
$("input[name='Build']").click(function(){
var per=$("input[name='issueperson']");
$.ajax({
url:"ajaxloads/confirmuser.php",
dataType:"json",
data:"username="+per.val()+"&ownership="+$("#ownership").text(),
success:function(r){
if(r.success){
var agree=confirm("Are you sure you want to Build SIR?");
if (agree){
$("#IssueForm").attr("action","wh_sir_insert.php?Build=BuildSir");
$("#IssueForm").submit();
}
}
else{
$("#admin_message").show();
$("#ErrorMessage").text(r.info);
}
}
});
return false;
});
The page's link is: localhost/mysite/create-user
This is the code:
<form class="form-horizontal" name = "signUp1F" id = "signUp1F">
<input class="input-xlarge focused" name="pskil" id ="pskil" type="text" placeholder = "Doctor, Trainer, Human Resource etc.">
<input type="hidden" name="neoid" id="neoid" value="<?php echo $neoid; ?>" />
<span><button id = "plus" class="btn btn-success">Plus</button></span>
<div id="skillsAdded"></div>
</form>
The jquery code:
<script type="text/javascript">
$('#plus').click( function(event){
var pskil = $('#pskil').val();
var neoid = $('#neoid').val();
if( !pskil){
alert( "Please write a skill.");
return false;
}
$.ajax({
type: 'post',
url: "localhost/mysite/add-skill",
data: { pskil: pskil, neoid: neoid},
success: function( response){
$('#skillsAdded').append( pskil + "<br>");
return false;
}
});
});
</script>
The purpose is this: user enters a skill value to the input, clicks the Plus button, an ajax request is sent to add the skill to the database. And the code that handles this request is on localhost/mysite/add-skill.
But things go wrong. When I click the "plus" button, it goes to the page localhost/mysite/create-user?pskil=php&neoid=53. What can possibly make this direction? I've been working on this issue for almost 2 hours and I cannot manage to handle it.
The issue is that your button tag submit your form. Here is a updated JavaScript source that you can use. jQuery got a built in preventDefault() method for events. This will for an example prevent the button to submit the form.
<script type="text/javascript">
$('#plus').click( function(event){
event.preventDefault();
var pskil = $('#pskil').val();
var neoid = $('#neoid').val();
if( !pskil){
alert( "Please write a skill.");
return false;
}
$.ajax({
type: 'post',
url: "localhost/mysite/add-skill",
data: { pskil: pskil, neoid: neoid},
success: function( response){
$('#skillsAdded').append( pskil + "<br>");
return false;
}
});
});
</script>
Tryout: http://jsfiddle.net/3A7Mg/1/
I want to do the search using ajax jquery js, for that I have taken this piece of code from here:-
Now i have some issues, I have this Javascript code:-
<script language="JavaScript" type="text/javascript">
<!--
function searchuser(cv) {
$("#SearchResult").html('<img src="loader.gif"/>').show();
var url = "elements/search-user.php";
$.post(url, {contentVar: cv} ,function(data) {
$("#SearchResult").html(data).show();
});
}
//-->
</script>
My Form:-
<label>
<input onClick="generatenew();" type="radio" name="search_option" value="code" id="search_option_0">
Customer Code</label></td>
<td><label>
<input onClick="generatenew();" type="radio" name="search_option" value="company" id="search_option_1">
Customer Company</label></td>
<td><label>
<input onClick="generatenew();" type="radio" name="search_option" value="name" id="search_option_2">
Customer Name</label></td>
<td><label>
<input onClick="generatenew();" type="radio" name="search_option" value="email" id="search_option_3">
Customer Email</label>
This is my search textbox
<input type="text" name="searchuser_text" id="newInput" size="25" maxlength="25" class="inputbox MarginTop10">
This is my search button
<input onclick="javascript:searchuser('con1');" class="Button" name="search_user_submit" type="button" value="Search">
This is my Display Area :-
<div id="SearchResult">My default content for this page element when the page initially loads</div>
Now i want to know on click of button i am sending a data i.e. con1. I want to send two data to the searchuser function, one the selected option button value and the another one is the text in the textbox. After sending both the data to the function how will i get the data in the function? Do i need to change the function searchuser(cv) to function searchuser(cv, cvtwo).
Also while the $.post(url, {contentVar: cv} ,function(data) is sending only one data to the php file, how can i send both the data i.e. cv and cvtwo to the php file?
First of all you can modify the search function to something like this
$("input[name='search_user_submit']").click(function(){
var cv = $('#newInput').val();
var cvtwo = //similar to above
var data = 'cv='+ cv + '&cvtwo='+cvtwo; // sending two variables
$("#myDiv").html('<img src="loader.gif"/>').show();
var url = "elements/search-user.php";
$.post(url, {contentVar: data} ,function(data) {
$("#SearchResult").html(data).show();
});
});
Don't use inline functions, you can do it easily with jQuery's native bind functionality:
// Search when you click on submit
$(document).on('click', '.submit_button', function(){
search('click_button');
});
// Search when you press enter
$(document).on('keypress', "#searchString", function(e){
var c = (e.keyCode ? e.keyCode : e.which);
if(c == 13) {
search('pressed_enter');
}
});
You can therefore collect the button value and pass it through to your search function:
function search(button_value) {
$("#myDiv").html('<img src="loader.gif"/>').show();
$.post("elements/search-user.php", { search_value: $('#newInput').val(), button_value: button_value} ,function(data) {
$("#SearchResult").html(data).show();
});
}
What you're doing is send off the form with two $_POST variables: one is the search string you've inputted in to the search box (called search_value) and the other is the button value.
Could someone provide me with the most simple code for form submission with jquery. On the web is with all sorts of gizmo coding.
$('#your_form_id').submit(function(){
var dataString = $("#your_form_id").serialize();
$.ajax({
type: "POST",
url: "submit.php",
data: dataString,
success: function() {
alert('Sent!');
}
});
return false;
});
here is a another solution, not as simple as the Jquery Form Plugin, but it can be useful if you want to handle errors codes and messages by yourself
look at this HTML + Javascript sample :
<div>
<form method="post" id="fm-form" action ="">
<label>Name:</label>
<input type="text" id="fm-name" name="fm-name" value="" />
<label>Email:</label>
<input type="text" id="fm-email" name="fm-email" value="" />
<label>Birthdate:</label>
<input type="text" id="fm-birthdate" name="fm-birthdate" value="" />
<input type="submit" id="fm-submit" value="Save it">
</form>
</div>
<script type="text/javascript">
$(function() {
// disable the form submission
$("#fm-form").submit(function () { return false; });
// post the datas to "submit_form.php"
$("#fm-submit").click(function() {
$.post("/ajax/submit_form.php",
{ 'fm-name':$("#fm-name").val(),
'fm-email':$("#fm-email").val(),
'fm-birthdate':$("#fm-birthdate").val()
}
,function(xml) {
// submit_form.php will return an XML or JSON document
// check it for potential errors
});
});
});
</script>
What you want is jquery form plugin. It allows you to simply send normal 'form' using ajax - you can make a non-visible form and use this plugin to subnmit it. The option in Joel's answer is possible as well, it depends on the complexity of the thing you want to submit.
Take a look at the Form plugin:
$(function() {
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});