I have this form, but this form inside PHP foreach function that gives the value from database, so I can't give the form id because redundancy will happened. And when click on any star in stars rating it will do as a submit, go to function so in the function I want to submit the form without id how?
<form class="watching-us-reating-form" name="swatching-us-reating-form" action=" method="get">
<input type="hidden" name="watchlist_id" value="<?php echo $fundAndUserWatchingThem['contactId']?>">
<!-- This hidden field used to save the value of the rating before submit -->
<input type="text" name="priority" class="watching-us-reating-value">
<!-- This DIV to contain the stars rating -->
<div class="watching-us-rating-div" data-score="<?php echo $flag; ?>" data-number="<?php echo $numberOfStars; ?>"></div>
</form>
You can use closest() to get the form element related to the clicked star rating:
$('.watching-us-rating-div').click(function() {
$(this).closest('form').submit();
});
Also, your form tag is missing an action - is that an error in your example?
Related
I have an autocalc running on a form and the total is shown through a div ID. I need to be able to somehow render the div ID answer into a php form mailer.
I’ve tried adding a hidden input field with the div ID.
<div id="totalPriceTM">
<input name="Score" id="totalPriceTM" value="" type="hidden" />
</div>
No error messages but result not showing in email.
You should create different div name on your form.
for example :
<script>
function autocalc(x,y)
{
a = x*y;
document.getElementById(totalPriceTM).innerHTML = a;
document.getElementById(totalPriceTM2).value = a;
}
</script>
<div id="totalPriceTM">
<input name="Score" id="totalPriceTM2" value="" type="hidden" />
</div>
result will be show on div totalPriceTM and will be set the value of div totalPriceTM2
My code:
<strong>Station Name</strong>
<!--This part combobox with HTML5 -->
<input type=text list=Stations>
<datalist id=Stations>
<option>Station1</option>
<option>Station2</option>
<option>Station3</option>
<option>Station4</option>
</datalist>
<div>
<strong>Number of Passanger</strong>
</div>
I want to auto submit when a station is selected and return some data (the data can be a random number) to the Number of Passengers. How can I do that with javascript? Is PHP needed?
Thank you any help will be appreciated.
<datalist onchange="this.form.submit()">
This will automatically send the form
Create a hidden submit type button(i.e. display:none;), after page load through jquery click on it automatically(i.e. $('#submit').click() ), Create a function for clicking on submit button, call it after page loads...
EDIT:
HTML:
<form ...>
...
<input type="submit" id="submit" style="display:none;" />
</form>
Javascript:
function submit_click(){
$("#submit").click();
}
Now, when your auto form populating data's function called, call this function in last line submit_click();
I'm using the http://www.advancedcustomfields.com plugin to create custom fields in Wordpress. I'm specifically using the repeater field functionality.
On a page I have a repeater that has an unlimited amount of rows. The usual way of echoing out all the data is the following:
<?php $counter = 1; if(get_field('step_by_step_training')): ?>
<?php while(the_repeater_field('step_by_step_training')): ?>
<p class="training-<?php echo $counter; ?>"><?php the_sub_field('introduction'); ?></p>
<?php $counter++; endwhile; ?>
<?php endif; ?>
Is it possible to show one row of data at a time with a next button that when pressed will show the next row of data? I only want one row of data showing at a time so if row 1 is originally showing, when next is clicked it hides row 1 and shows row 2. Essentially creating a step by step process.
Eventually I'd like to include a form so the user can submit data.
UPDATE:
<form class="form" method="POST" action="<?php the_permalink(); ?>">
<?php $counter = 1; if(get_field('step_by_step_training')): ?>
<?php while(the_repeater_field('step_by_step_training')): ?>
<div class="form-row">
<p class="training"><?php echo the_sub_field('introduction'); ?></p>
<button class="next">Next Form Element</button>
</div>
<?php $counter++; endwhile; ?>
<?php endif; ?>
</form>
<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {
// hide all form-rows, but not the first one
$('.form-row').not(':first').hide();
$('button.next').click(function(e) {
// prevent the next buttons from submitting the form
e.preventDefault();
// hide this form-row, and show the next one
$(this).parent('div.form-row').hide().next('div.form-row').show();
});
});
});
</script>
You could do something simple like this using jQuery (I think this is what you wanted?):
$(document).ready(function() {
// prepend a 'previous' button to all form-rows except the first
$('<button>').addClass('previous').text('Previous').prependTo($('.form-row').not(':first'));
// hide all form-rows, but not the first one
$('.form-row').not(':first').hide();
// add the submit button to the last form-row
$('<input>').prop('type', 'submit').val('Submit Form').appendTo($('.form-row:last'));
// handle the previous button, we need to use 'on' here as the
// previous buttons don't exist in the dom at page load
$('.form-row').on('click', 'button.previous', function(e) {
e.preventDefault();
$(this).parent('div.form-row').hide().prev('div.form-row').show();
});
$('button.next').click(function(e) {
// prevent the next buttons from submitting the form
e.preventDefault();
// hide this form-row, and show the next one
$(this).parent('div.form-row').hide().next('div.form-row').show();
});
});
some example markup:
<form action="index.php" method="post">
<div class="form-row">
<label for="forename">Forename</label>
<input type="text" name="forename" />
<button class="next">Next Form Element</button>
</div>
<div class="form-row">
<label for="forename">Surname</label>
<input type="text" name="surname" />
<div style="clear: both;"></div>
<label for="another">Another</label>
<input type="text" name="another" />
<button class="next">Next Form Element</button>
</div>
<div class="form-row">
<label for="last">Last Form Element</label>
<input type="text" name="last" />
</div>
</form>
You can add as many form elements to each form-row as you want, here's a fiddle to play with
edit
Things to note here are that the previous buttons are injected to the DOM dynamically, and so is the forms submit button (notice how I've removed it from the last form-row in the markup)
Here's an updated fiddle
You could start with a jQuery accordion menu. Some CSS will allow you to minimize the real estate occupied by the deselected rows. If you want to actually discard and retrieve certain rows based on some identifiable characteristic (for instance, ID number), you'll need to go with AJAX.
You could write your own custom method with something like JQuery.
Assign a class to each row, and keep track of which one is selected, when viewing another row simply .hide() the one that was showing and .show() the one you wish to display.
If you want to keep your HTML cleaner, you could use the JQuery .data() functionality to assign identifiers to each element and refer to them that way as well.
Most of this all depends on your constraints with wordpress, how it looks & your actual HTML layout
After it's all written to the screen, can't you just hide everything but the first row? And then each time you click the button, have it hide everything and show the next row. Try using jquery's next() function. jquery - next()
Ah, looks like deifwud beat me to it with a better explanation.
I have the scriptaculous autocompleter working. It pops up the data and I can select it, but it does not transfer the ID number in the form I'm using. I just cannot get the ID number. I can show the ID number on the screen using the following command:
alert (li.id);
I have used the following but no luck:
document.getElementById('inv_id').value=li.id;
and
$("#inv_id").val(li.id);
How do I pass that ID number to a value in the form? Here is the form code...
<form action="page2.php" method="post" name="Add_Form">
<input type="hidden" name="inv_id" value="0">
<input type="text" id="autocomplete" name="autocomplete_parameter"/>
<div id="autocomplete_choices" class="autocomplete"></div>
</form>
<script type="text/javascript">
new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "ajax_inv.php", {
afterUpdateElement : getSelectedId
});
function getSelectedId(text, li) {
alert (li.id);
document.getElementById('inv_id').value=li.id;
or
$("#inv_id").val(li.id);
}
</script>
Where is the inv_id field? Make it a hidden input if you don't have it existing already, then document.getElementById('inv_id').value=li.id; should work
Say I have info.php page with user info (id, name, age, etc).
On this page, there is an 'edit' button that takes the user to a form on edit.php so they can change their info. The form is populated via $_POST with id, name, age, etc.
edit.php has an 'update' button that posts back to info.php with the updated data. This all works fine.
But when I try to load edit.php within a jQuery Tools Overlay pop-up, the form in edit.php appears but the variables are not passed along. Instead they all appear as 'undefined'.
I am not sure where to place the required href element so as to pass my variables to edit.php when inside the overlay.
Any ideas?
<form action="edit.php" method="post">
<input type="hidden" name="edit" value="yes" />
<input type="hidden" name="id" value="<?php echo $row[1] ?>" />
<input type="hidden" name="name" value="<?php echo $row[2] ?>" />
<!-- this is the required href to trigger overlay -->
<a href="edit.php" rel="#overlay" style="text-decoration:none">
<input type="submit" value="Edit"/>
</a>
</form>
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
<!-- make all links with the 'rel' attribute open overlays -->
<script>
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'darkred',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
I'm a little confused by the question but this is possibly what you are looking for...
You need to either pass the ID in the url and look up the data serverside or pass all the data in the url like so
<a href="edit.php?id=<?php echo $row[1] ?>&name="<?php echo $row[2] ?>" rel="#overlay" style="text-decoration:none">
Another way is to store name id and all that stuff in $_SESSION in php. Then info.php would save it and edit php would read it.