I have a form with one text box that is part of a div tag. I want it to change the contents of that div tag to another page based on the contents of a textbox in a php GET request.
for example if you type hell into the textbox it will load goto.php?location=hell into the div.
so far this is the code i have below, and due to it being my first time with jquery sucks more than a hoover vacuum cleaner.
<div id="city"></div>
<form name="goto" action="/">
<input type="text" id="city">
<input type="submit" name="submit" class="button" id="submit_btn" value="New City" />
</form>
<script>
/* attach a submit handler to the form */
$("#goto").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
city = $form.find( 'input[name="city"]' ).val(),
/* Send the data using post and put the results in a div */
$('currentwxdiv').load('http://www.jquerynoob.bomb/hell.php?location=' + city);
});
</script>
Currently instead up updating the contents of the div it reloads the entire page in the browser and then appends it with ?submit=New+City
UPDATE This is what I have now and its still doing the full page refresh with the appended ?submit=New+City
<script>
/* attach a submit handler to the form */
$$('form[name="changewx"]').submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
city = $('#city').val()
/* Send the data using post and put the results in a div */
$('#currentwxdiv').load('http://api.mesodiscussion.com/?location=' + city);
});
</script>
You have created your form like this:
<form name="goto" action="/">
But the selector only matches the element with an id goto. So it should be:
$('form[name="goto"]').submit(function(event) {
You also made a mistake the other way around:
$form.find( 'input[name="city"]' ).val()
Should be:
$('#city').val()
Another thing:
$('currentwxdiv') // this matches a tag called currentwxdiv
Should be:
$('.currentwxdiv') // for element with class currentwxdiv, or $('#currentwxdiv') to match based on id
And instead of doing e.stopPropagation(); you should do return false; at the end of the function.
Related
I'm trying to reload a select with jquery and ajax, this select must be reload after I submit a new entry, right now I reach this point.
$("form").on("submit", function (e) {
e.preventDefault();
var form_id = $(this).attr('id');
var form_details = $('#' + form_id);
$.ajax({
type: "POST",
url: 'Users.php',
data: form_details.serialize(),
success: function (data) {
$('#check_data').html(data);
$('#div_to_update').load('my_page.php #div_to_update');
}
}
});
The div to be reloaded has a html select generate by a php code, the other fields are just plain html:
This is the first form, that must be reloaded with the values I enter in the form2:
<div id="div_to_update">
<form id="form1">
<?php Helper::combo_users(); ?>
/*
...
*/
</form>
</div>
This is the form 2:
<form id="form2" method="post">
<input type="text" id="user_reg" name="user_reg"/>
<input type="text" id="user_name" name="user_name"/>
<input type="submit" value="Add"/>
</form>
The odd thing is, this code will run the first time ok(I enter the values in the form2 and send, the form1 will reload with the new value), but the second time it does not work(when I click submit on the form2 nothing seems to happen) and the third time it will work again (click the submit button again and the value is send and the form 1 is reloaded) and so on.
Simply you are not working for second time since you are serializing a form which is dynamically updated within ajax.
jQuery won't serialize when you load a form elements such as inputs dynamically.
You're solution can be loading your new values with JSON object, and put in a foreach to display new content.
I am creating a jQuery function in which I am using one class for a button that is common in second div's button too. my html markup is
<div class="micmstabs miindex">
<h4>Manage Your Index Page Here</h4>
<textarea class="redactor_content" name="content" rows="4"><?php cms_html('index'); ?></textarea>
Save Changes
</div>
<div class="micmstabs miterms">
<h4>Manage Your Terms & Conditions Page Here</h4>
<textarea class="redactor_content" name="content" rows="4"><?php cms_html('terms'); ?></textarea>
Save Changes
</div>
In the above when we click on cms_s i try to get value of textarea based on a condition check in jQuery that if this button has this class then get me value of the textarea of div in which this button and the textarea is.
My jQuery function is
$(document).on('click', '.cms_s', function(event) {
if ($(this).hasClass('index_save')) {
var cms_page='index';
}
if ($(this).hasClass('terms_save')) {
var cms_page='terms';
}
if ($(this).hasClass('policy_save')) {
var cms_page='policy';
}
if ($(this).hasClass('mem_save')) {
var cms_page='membership';
}
alert(cms_page);
var cms_html=$(this).parents("div").find('.redactor_content').val();
alert(cms_html);
});
I am able to get the condition check for the class perfectly . But when i try to get the value of textarea based on the button i clicked no matter what button i click it gets me the value of the textarea present in the first div markup.
If you pres on the button and you want the previous textbox value. It's easier to do this:
$(document).on('click', '.cms_s', function(event) {
var val = $(this).prev("textbox").val();
// Or within the same level
val = $(this).parent().find("textbox").val();
val = $(this).siblings("textarea").val();
});
You problem occurs when because all the inputs have the class redactor_content so the .val() will get the first textarea in the array and get that value. Which is allways the first redactor_content.
var cms_html=$(this).parents("div").find('.redactor_content').val();
Try this -
var cms_html=$(this).closest("div").find('.redactor_content').val();
I wrote an array to pass variables in the GET to a search page. The search page only has 4 fields but I'm only passing the most important variables, first name and last. Here is the array:
<?php echo "<td><a href='" . matry::base_to('test/trace', array('first'=>$patient->first , 'last' =>$patient->last)) . "'><ul class='controls'>
<li id='check_orders'><`span class='symbols'>L</span><span class='label'>Skip Trace</span></li>
</ul></a></td>";?>
When the page loads i'm just echoing the _GET to pre populate the first and last input fields on that page..
What I'm looking for is a script that will execute the search with the first and last name fields populated as that page loads automatically. Additionally, when the search is executed it's populating in an iframe. (forgot about that part)~!
I tried using:
<script>document.getElementById('stack').submit();</script>
<form action='http://xxxx.yyyyyyy.com/stuffhere' name='es' target="my_iframe" id="stack">
with no avail.
Your <script> is running before the <form> exists.
Move the <script> below the <form>.
You are calling the submit function before the form is even loaded on the page.
Place the script tag after the closing form tag or call submit on document ready or window onload.
<form id-"stack">
... form fields...
</form>
<script>document.getElementById('stack').submit();</script>
or
<script>$(function(){$('#stack').submit();})</script>
Please imagine this simple example:
<html>
<head>
<script type="text/javascript">
function body_onload() {
var form = document.getElementById('theform');
form.submit();
}
</script>
</head>
<body onload="body_onload()">
<form id="theform" action="action.php">
<input type="hidden" name="query" id="query" value="foo" />
</form>
</body>
</html>
It will submit the form after the page has loaded.
But are you really searching for a non AJAX solution?
Try this, been using this on a redirect page for a while. This of course needs to be below the from so it is run after the browser process the form.
<script type="text/javascript">
function send(o)
{
var f = document.getElementById("theForm");
f.submit();
}
send();
</script>
If you want to submit the form when the page loads you should change your code to this:
<script>window.onload = function(){ document.getElementById('stack').submit(); }</script>
However this will redirect the user (as if they have clicked a form submit button). To avoid this you will need to use AJAX (I recommend using jQuery to do this). See example below:
$(document).ready(function(e) {
var form_data = $("#form_id").serialize();
var form_url = $("#form_id").attr("action");
var form_method = $("#form_id").attr("method").toUpperCase();
$.ajax({
url: form_url,
type: form_method,
data: form_data,
cache: false
});
});
See this page for more info on using AJAX
I'm trying to display multiple checkboxes and then submit the selected checkboxes as HTTP GET (i.e. as parameters in URL string) to the same script:
Here is my simplified test code - test.php:
<html>
<head>
<style type="text/css" title="currentStyle">
#import "http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css";
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#name').dialog({ autoOpen: false, modal: true });
});
</script>
</head>
<body>
<form>
<p><input type="button" value="Select name"
onclick="$('#name').dialog('open');"></p>
<div id="name" title="name">
<?php
$NAMES = array(
'project one',
'project two',
'project three',
);
foreach ($NAMES as $name) {
printf('<p><label><input type="checkbox" name="name" value="%s">%s</label></p>',
urlencode($name),
htmlspecialchars(substr($name, 0, 120))
);
}
?>
</div>
<input type="submit">
</form>
</body>
</html>
But for some reason, when I select the first 2 checkboxes click the "Submit" button (sorry for the non-English name in the screenshot), then the script http://myserver/test.php? is being submitted and not http://myserver/test.php?name=project+one&name=project+two as I would expect.
If I get rid of all JQuery UI stuff, then it works.
What am I doing wrong? (besides using name="name" which is because that's a database table column name and doesn't seem to be the reason for this problem anyway)
UPDATE:
In my real program (not the above test case) I actually have several such dialogs and would like to set some settings in each dialog and only after that that click a Submit button. So the Submit button must be outside the dialog(s).
Thank you!
Assuming all the form inputs are checkboxes you can use the following to compile and submit the details as a GET.
using your original code add the following function
function compileInputs(){
var string = '';
var inputs = new Array();
//loop through all checkboxes
$(':checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
string = "?"+inputs.join("&");
window.location.replace(string);
}
you will need to change the names of the inputs from name='name' to name='name[]'
then change the submit to a button as follows:
<input type="button" onClick='compileInputs()' value='submit'>
you will no longer need the <form> tags
for a more selective approach:
//get all checkboxes from div#name
$('div#name :checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
//get all checkboxes from div#appsversion
$('div#appsversion :checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
//get all checkboxes from div#osversion
$('div#osversion :checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
You may need to wrap the whole form in a div and then dialog the new div in the dialog rather than just the div #name
Try this:
$("#submitButton").click(function(){
$("#formId").submit();
});
Should you not do name="name[]" . Then on the form submit (however you submit it (AJAX or non AJAX), you can get the "name" array as your post variable and handle it as you may wish. Correct me if I am wrong
Assuming the dialog is actually the problem, you may have to have your dialogs populate some hidden fields on the page to actually submit.
Here is a very simple sample to get you started.
http://jsfiddle.net/jUH9g/
When you click ok in the dialog it populates the 'names' textbox inside the form that actually gets submitted. In your real code you would change input type="textbox" to input type="hidden"
$("#dlg").dialog({autoOpen: false,
buttons: {
"OK": function () {
var names = "";
$("input:checkbox").each(function () {
if (this.checked) {
names += $(this).val() + ",";
}
});
$("#names").val(names);
}
}
});
I've made jQuery & AJAX script that uses a PHP function to bring back results from an API. That part works great, but everytime I search for a new book, it removes the previous search results.
I want to give it a book ID, search, get results, and continue doing that. Every time I click "search", I want to populate a list with more books.
This code keeps removing my previous book and replacing it with the new book I've searched for.
Any ideas?
isbn.php:
<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>
<div id="result"></div>
{literal}
<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" ).html( content );
}
);
});
</script>
ajax.php does the API call and prints the results inside of isbn.php.
if you are just trying to append the content then:
$( "#result" ).append( content );
if you want the new results to go to the top of the results div then
$( "#result" ).prepend( content );
using $( "#result" ).html( content ); tells jQuery to replace the entirety of any HTML inside #result with the new content
The problem is in your ajax success function you are rewriting the entire content of the #result block. If you changed .html to .append this should just make it additive rather than replacing.