I have a script that works fine when a button is used to post the form. But when I convert the form to (auto)post on an interval, the form (field) values are missing when posted.
I know this has something to do with using the closest(form) as the button assists with closest (form) as a reference, but auto post on Interval has no reference for closest (form). Any help is appreciated thanks. By the way my form is on a sql while loop.
A) is the script when used with button.
B) is the script when used with a Auto(post) on interval.
The form)
<form class="updateform" action="" method="" >
<input type="hidden" class ="customerid" name="" value="<?php echo $customerid?>">
<a class ="test" >test</a>
<div class="update"> </div>
</form>
** A)**
<script>
$(document).ready(function(){
$('.test').click(function(event){
event.preventDefault();
var form = $(this).closest("form");
var field1= form.find('.customerid').val();
// Url to post to and Field name and content */
$.post('/test4.php', {customerid:field1},
// Alert Success
function(data){
// Alerts the results to this Div
form.find('.update').html(data);
});
});
});
</script>
** b)**
<script>
$(function() {
var form = $(this).closest("form");
var field1= $('.customerid').val();
function update() {
$.post("/test4.php", {customerid:field1},
function(data){
$('.update').html(data);
});
}
setInterval(update, 3000);
update();
});
</script>
It's probably because of the .closest() method in the second script. You are trying to select the form there which is closest to this up the tree. But in this case this will either be the scope of the function or the window object. Change it to a jQuery selector and select the correct form.
You can test this by yourself by either using console.log or the debugger statement to check what the values of the elements are in the developer tools of the browser. Get familiar with these guys, you'll need them a lot and are essential tools to even the most experienced developer.
If I may give a tip. Name your jQuery elements (the elements you select with $('element')) with a $ prefix. This way you know by reading the variable what kind of value that variable has. Also giving your variables meaningful names makes it even more easy to read and understand. field1 is generic, but customerIdField tells you what field it is.
$(function() {
var $form = $('form.updateform');
var $updateField = $form.find('.update')
var $customerIdField = form.find('.customerid');
var customerIdValue = $customerIdField.val();
function update() {
$.post("/test4.php", {customerid: customerIdValue}, function(data) {
$updateField.html(data);
});
}
setInterval(update, 3000);
update();
});
Related
I want to focus on specific id (ex. using $('#a')) after submit.
There is nothing special with my code yet.
My javascript code is
function get_info(id){
$(user_id).submit();
$('#a).focus();
};
After submit, it should focus on where id='a'.
But after submit window focus on id='a' and reset the page.
I tried using
function get_info(id){
$(user_id).submit(function(e){
e.preventDefault();
$('#a').focus();
});
};
But this code make program worse. I think it stops performing submit.
Can anyone help me?
As Chris's comment says you couldn't focus on the element simply by using $('#a').focus(); after the submit since the page will be redirected/refreshed.
You need to use cookies or local storage, here a suggested sample using local storage like :
function get_info(id) {
localStorage.setItem('focusItem', '#a');
$(user_id).submit();
};
Then in the ready function, you could add :
$(function(){
var focusItem = localStorage.getItem('focusItem');
if( focusItem != null ){
$(focusItem).focus();
localStorage.removeItem('focusItem');
}
});
function SetFocus(){
$("#FocusingID").focus();}
/***********another way **********************//*
$("#submitbtnId").click(function(){
//your submession and other task;
$("#FocusingID2").focus();
});
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=text id=FocusingID>
<button type=submit onclick="SetFocus();">click</button>
Say I visit a website which has the following code:
<input type="text" name="enter">
<input type="submit" name="button">
<a id="confirm">Confirm</a>
I need a script which I can run in the Chrome console to press the <a> element then type the text 'hello' into the input field and then click submit. I need this process to repeat every minute.
I have tried using this code.. but it doesn't do anything.
window.setInterval(function() {
document.querySelector("#confirm").click();
document.querySelector(".enter").value = "Hello";
document.querySelector(".button").click();
}, 1000);
If the inputs are placed in a form try this, in this case if you need to access by the name and not the class:
window.setInterval(function() {
var form = document.forms[0];
document.querySelector("#confirm").click();
form.querySelector('input[name=enter]').value ="Hello";
form.querySelector('input[name=button]').click();
}, 1000);
Otherwise your script above will work if the inputs have these correct class names
Instead try using trigger as:
$(document).ready(function() {
var event = JQuery.Event("click");
$('#confirm').click(function() {
$('.enter').value("Hello");
$('.button').trigger(event);
});
$('#confirm').trigger(event);
});
Now just put the code inside your window.setInterval() function.
I am creating a basic calculator using css, html and js. I have a function as follows:
document.getElementById('user_radius').onkeyup = function ()
{
document.getElementById('live_update').innerHTML = this.value;
}
Basically, whatever is typed into the user text box is supposed to live update the text that lies within the span tag with the id of "live_update". I have a text box with an id of user_radius. I save changes and can't get the text to live update. Am I missing a basic principle here?
there are multiple ways to do it
1.mix javascript and DOM. This makes it a little difficult to debug your stuff in the future.
<input id='user_radius' onkeypress='doSomething()' />
function doSomething() {
document.getElementById('live_update').innerHTML = this.value;
}
2.standard jquery method:
<script type="text/javascript">
$(document).ready(function(){
$('#live_update').on('keyup', function(){
$('#user_radius').val($('#live_update').val());
});
});
</script>
3.find a front-end framework that does 2-way data binding for you such as Angular
demo: http://www.angularjshub.com/examples/basics/twowaydatabinding/
this should do the job:
<input id="user_radius" onkeypress="doSomething()" />
function doSomething() {
document.getElementById('live_update').innerHTML = this.value;
}
I looked at item 4197593 How to check uncheck a checkbox based on another checkbox and copied the code from the demo to my webpage. When I open the page I get a java error - the yellow triangle bottom left hand corner.
The error only occurs when I add in this javascript:
<script type="text/javascript">
$(document).ready(function(){ //bind event to checkbox
$("input[type='checkbox']").bind('click', function(){
var $t = $(this),
val = $t.val(),
key = val.charAt(val.length-1);
// check if element is checked
if($t.val() == 'la'+key && $t.is(':checked')) {
$("#lists_"+key).attr('checked', true);
}
else if($t.val() == 'la'+key){
$("#lists_"+key).attr('checked', false);
}
});
});
</script>
I am adding this to a php page:
<?php
include('header3.html');
$Fullname = $_SESSION['membername'];
include('connectdb.php');
?>
*the above javascript is added in here*
<style type="text/css">
Hope someone can help me here as I am not too bright on java.
Huh? I do not see any java in your code, only a mix of HTML and javascript.
Moreover, you should learn the basics of javascript rather than copy + paste scripts.
For instance, the code you have looks like it needs the jQuery javascript library...
Doing what you are asking in plain javascript is as trivial as:
<input type="checkbox" id="original" onchange="update()"/>
<input type="checkbox" id="other"/>
<script type="text/javascript">
function update(){
var original = document.getElementById('original');
var other = document.getElementById('other');
original.checked = other.checked;
}
</script>
Caution
You should rename function update better or even better, make use of anonymous function bound to the checkbox's change event.
You are using jQuery, so you need to include the jQuery .js too
I'm not even sure if this is possible, but I need to send POST data to a page via a user-clicked link. Can this be done?
To be clear, I do not want the data returned to the current page; the target page should load in the browser just as though the user had submitted a form, but I need to send the post data without a form, if possible
What do you mean without a form? Can the form be "invisible" to the user? If so, you could do something like:
$("a.post").click(function (e) {
e.preventDefault();
$("<form action='"+this.href+"' method='post'></form>").submit();
});
Obviously it could be done many different ways, but you get the idea.
It would be just like a form with the POST parameters intact in the request just in case you use that information at the server when serving up that page.
How about a form with a hidden input? Just create a click event on the anchor tag that submits the form:
<script type="text/javascript">
$(function () {
$("#postLink").click(function () {
$("#form").submit();
});
});
</script>
<a id="postLink" href="javascript:;;">click to post</a>
<form id="form" action="[postTargetUrl]" method="post">
<input type="hidden" name="postVariable" value="[postValue]" />
</form>
I would just add the data to the url, then the target page can extract it:
Main Page:
Fred
Target page (page2.htm)
$(document).ready(function(){
var name = gup("name", window.location.href);
alert(name);
});
/* Returns URL parameter
* url: http://www.somesite.com?name=hello&id=11111
* z = gup('name', window.location.href); // z = hello
* Original code from Netlobo.com (http://www.netlobo.com/url_query_string_javascript.html)
*/
function gup(n,s){
n = n.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
var p = (new RegExp("[\\?&]"+n+"=([^&#]*)")).exec(s);
return (p===null) ? "" : p[1];
}