I have a combobox - combo1. Everytime a change the combobox value, I should have a button that submits that value and reloads the page. I want to start at mysite/value?v=1 and end with mysite/value?v=2. This is what I have so far:
Javascript:
function nav() {
var selObj = document.getElementById("combo1");
valor = selObj.options[selObj.selectedIndex].value;
// reload the page
}
HTML:
<input type="button" onclick="nav()" value="Ok" />
You are looking for window.location:
function nav(){
var selObj = document.getElementById("combo1");
valor = selObj.options[selObj.selectedIndex].value;
window.location = 'mysite/value?v=' + valor;
}
Related
I'm using php/jquery and html my requirement is when I click on edit button, label should be replaced with input text and I would be able to update in my mysql db and if I click on cancel button input to label..
Following is my code:
<?php
$sql = 'select * from demo';
while($row = mysql_fetch_object($sql)) {
?>
<label style="display:block;">abc</label>
<input type="text" style="display:none;"/>
<button id="edit">edit</button>
<button id="cancel">cancel</button>
<?php
}
?>
suppose If I display 10 records from mysql db, for each record I should be able to edit on particularly clicked row.
Any help is appreciated thanks!
I would wrap each label in a parent (for example a p).
On a click, you hide the label and add a input and two buttons to the parent.
By clicking the cancel button, the label gets visible again and the other elements will be removed.
The "tricky" part is the submit button. You'll need a PHP page that processes the data you post to it. Then when it succeeds you should echo an ok . The $.post function knows a success argument. This function will check if the returned value will be ok, and if so, changes the text from the label, shows it, and removes the other items.
$(function() {
$('.edit').on('click', function(e) {
e.preventDefault();
var elem = $(this) ,
label = elem.prev('label') ,
parent = elem.parent() ,
value = label.text() ,
input = '<input type="text" value="'+value+'" />' ,
save = '<button class="save">Save</button>' ,
cancel = '<button class="cancel">Cancel</button>';
parent.children().hide();
parent.append(input+save+cancel);
});
$(document).on('click', '.cancel', function(e) {
e.preventDefault();
var elem = $(this) ,
parent = elem.parent() ,
label = parent.find('label');
parent.children(':not(label,.edit)').remove();
parent.children().show();
});
$(document).on('click', '.save', function(e) {
e.preventDefault();
var elem = $(this) ,
parent = elem.parent() ,
label = parent.find('label') ,
value = parent.find('input').val();
parent.addClass('active');
var data = '&name='+value;
$.post("processingPage.php", data)
.success( function(returnedData) {
if( returnedData == 'ok' ) { /* change this to check if the data was processed right */
var active = $('.active');
active.find('label').text( active.find('input').val() );
active.children(':not(label,.edit)').remove();
active.children.show();
}
});
$('.active').removeClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><label>Some text</label><button class="edit">Edit</button></p>
<p><label>Some text</label><button class="edit">Edit</button></p>
<p><label>Some text</label><button class="edit">Edit</button></p>
<p><label>Some text</label><button class="edit">Edit</button></p>
You're PHP would look like this:
<?php
$return = false;
if( isset( $_POST['name'] ) ) {
if( mysqli_query( ... ) ) {
$return = true;
}
}
if( $return )
echo 'ok';
else
echo 'not ok';
?>
Hello im trying to generate dynamic divs with a textbox and delete button in it. On form submit i want all dynamically generated textboxes values, how can i assign unique id to the textbox element. The ID's / Name of textbox should be unique.. to get all values properly.
Pls suggest..
My Code:
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic elements</TITLE>
<SCRIPT language="javascript">
function addRow(divId) {
count = 0;
count++;
var parentDiv = document.getElementById(divId);
// create a div dynamically
var eleDiv = document.createElement("div");
eleDiv.setAttribute("name", "olddiv");
eleDiv.setAttribute("id", "olddiv");
// create a textbox dynamically
var eleText = document.createElement("input");
eleText.setAttribute("type", "text");
eleText.setAttribute("name", 'textbox' + count);
eleText.setAttribute("id", "textbox");
// create a delete button dynamically
var eleBtn = document.createElement("input");
eleBtn.setAttribute("type", "button");
eleBtn.setAttribute("value", "delete");
eleBtn.setAttribute("name", "button");
eleBtn.setAttribute("id", "button");
eleBtn.setAttribute("onclick", "deleteRow('button')");
// append new div to parent div
parentDiv.appendChild(eleDiv);
// append textbox & button to new div
eleDiv.appendChild(eleText);
eleDiv.appendChild(eleBtn);
}
function deleteRow(tableID) {
var div = document.getElementById('olddiv');
if (div) {
div.parentNode.removeChild(div);
}
}
</SCRIPT>
<form name="objForm" action="test1.php">
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<div id="dataTable" width="350px"><INPUT type="text" name="txtData" /></div>
<input type="submit" value="Submit"/>
</form>
You can keep a global count variable (outside of function divId).
Each time you create a new div, you add 1 to the counter and use it as a unique ID for your textbox.
<script language="javascript">
var globalcount=0;
function addRow()
{
globalcount++;
//the rest
}
</script>
And the rest is much like you already do for the name.
To answer your question directly you could try:
var textboxCount = 0;
/* In your function */
// create a textbox dynamically
var eleText = document.createElement("input");
eleText.setAttribute("type", "text");
eleText.setAttribute("name", 'textbox' + count);
eleText.setAttribute("id", "textbox" + textboxCount);
textboxCount += 1; //Increment the count
That will create textbox's with id's textbox0, textbox1, textbox2 etc.
Or, for a more efficient option you may store all textboxs you create in an array, like so:
var textboxes = new Array();
/* In your function */
// create a textbox dynamically
var eleText = document.createElement("input");
eleText.setAttribute("type", "text");
eleText.setAttribute("name", 'textbox' + count);
textboxes.push(eleText);
Now instead of calling e = document.getElementById('textbox4'); you may call e = textboxes[4];
This function will generate a unique ID:
function uniqueId() {
var uid;
do {
uid = 'uid-' + Math.random();
} while (document.getElementById(uid));
return uid;
}
My goal is to have input field that will take value of whats was typed and echoed through. The js function will grab the value of the input box two seconds after user stops typing and post it. The issue seems to be with the php not echoing the value of the input box. When I take out the js function and use a button that forces refresh then
it works fine. How come php is not taking the value posted by js function?
Example SITE
JS
<script type="text/javascript">
$(document).ready(function() {
var timer;
$('#video-input1').on('keyup', function() {
var value = this.value;
clearTimeout(timer);
timer = setTimeout(function() {
//do your submit here
$("#ytVideo").submit()
//alert('submitted:' + value);
}, 2000);
});
//then include your submit definition. What you want to do once submit is executed
$('#ytVideo').submit(function(e){
e.preventDefault(); //prevent page refresh
var form = $('#ytVideo').serialize();
//submit.php is the page where you submit your form
$.post('index.php', form, function(data){
});
return false;
});
});
</script>
PHP
<?php
if($_POST)
{
$url = $_POST['yurl'];
function getYoutubeVideoID($url) {
$formatted_url = preg_replace('~https?://(?:[0-9A-Z-]+\.)?(?:youtu\.be/| youtube\.com\S*[^\w\-\s])([\w\-]{11})
(?=[^\w\-]|$)(?![?=&+%\w]*(?:[\'"][^<>]*>| </a>))[?=&+%\w-]*~ix','http://www.youtube.com/watch?v=$1',$url);
return $formatted_url;
}
$formatted_url = getYoutubeVideoID($url);
$parsed_url = parse_url($formatted_url);
parse_str($parsed_url['query'], $parsed_query_string);
$v = $parsed_query_string['v'];
$hth = 300; //$_POST['yheight'];
$wdth = 500; //$_POST['ywidth'];
$is_auto = 0;
//Iframe code with optional autoplay
echo htmlentities ('<iframe src="http://www.youtube.com/embed/'.$v.'" frameborder="0" width="'.$wdth.'" height="'.$hth.'"></iframe>');
}
?>
form
<html>
<form method="post" id="ytVideo" action="">
Youtube URL: <input id="video-input1" type="text" value="<?php $url ?>" name="yurl">
<input type="submit" value="Generate Embed Code" name="ysubmit">
</form>
</html>
It's because you are not returning your php result anywhere. It's simply lost...
$.post('index.php', form, function(data){
var x = $(data);
$("body").html(x);
});
Basically i have a textbox on my .html page
<input name="points" type="text" id="points" value=""/>
and in the .js that gets called just onsubmit
document.getElementById('points').value = creator.showData();
i actually see with my eyes that the text is being added to the textbox however the php isn't reading the $_POST however if i manually enter the text into the same text box it works.
Any Ideas ? been screwing with my head all morning XD
It probably submits the form before the value is set.
Try this...
(function() {
var submitted = false;
form.onsubmit = function(event) {
if (submitted) {
return true;
}
event.preventDefault();
document.getElementById('points').value = creator.showData();
submitted = true;
form.submit();
}
})();
Hi. I need help with this section of code.
What I want to do is; when I click (for example) a radio button 1, that button value display on the browser. I have a three radio buttons.
Here's my ajax query:
function updatepayment(this.value)()
var ajaxResponse = new Object();
$(document).ready(function () {
$('.rmr').click(function () {
var rbVal = $(this).val();
var myContent;
if (ajaxResponse[rbVal]) { //in cache
myContent = ajaxResponse[rbVal];
$("#contentcontainer").html(myContent);
}
else { // not in cache
var urlForAjaxCall = "include/function.php" + rbVal + ".html";
$.post(urlForAjaxCall, function (myContent) {
ajaxResponse[rbVal] = myContent;
$("#contentcontainer").html(myContent);
});
}
});
});
Your cache check will always be false since you always re-declare ajaxResponse in the function. ajaxResponse should be declared globally.
And you dont really need the post function (as your not posting any data) you could just use the .load function.
You dont need a function to wrap the $(document).ready function
var ajaxResponse = new Object();
$(document).ready(function(){
$('.rmr').click(function (){
var rbVal = $(this).val();
var myContent;
if (ajaxResponse[rbVal])
{ //in cache
$("#contentcontainer").html( ajaxResponse[rbVal] );
}
else
{ // not in cache
var urlForAjaxCall = "include/function.php" + rbVal + ".html";
$("#contentcontainer").load(urlForAjaxCall, function (myContent)
{
//Extra processing can be done here, like your cache
ajaxResponse[rbVal] = myContent;
});
}
});
});
EDIT:
After seeing your comments on your OP
You are trying to select the radio buttons by class name "rmr" but do not have it set on the tags
you need:
<input class="rmr" type="radio" name="rmr" id="payment1" value="3" onclick="updatepayment(this.value)" /> <br>
<input class="rmr" type="radio" name="rmr" id="payment2" value="5.5" onclick="updatepayment(this.value)" /><br>
<input class="rmr" type="radio" name="rmr" id="payment4" value="10" onclick="updatepayment(this.value)" /><br>
or you could use
$("input[name=rmr]")
to select them by their input name attribute