Hi am trying to print the value of <span class="paymentID" name="txn_id">ABC</span></div> ABC into my input field named txn
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
var result = getElementByClass('.paymentID');
$('#txn').val("result");
$("#test3").val("Dolly Duck");
});
});
</script>
</head>
<body>
<span class="paymentID" name="txn_id">ABC</span></div>
<input type="text" name="txn" id="txn" value="">
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>
Related
I need a multiple select form, like this:
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<form action="" method="get">
<p>
<select class="multiple normal-selectbox" id="RW" name="RW" multiple="multiple">
<option value="N" ><span class="input-group"><strong>Region Nord</strong></span></option>
<option value="HAM" ><span class="input-group">Hamburg</span></option>
<option value="HAJ" ><span class="input-group">Hannover</span></option>
<option value="BRE" ><span class="input-group">Bremen</span></option>
</select>
<div class="form-group submit f0 " data-fid="f0" style="position: relative;">
<div class="progress" style="display: none; z-index: -1; position: absolute;">
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%">
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg" style="z-index: 1;">
GO
</button>
</form>
</body>
</html>
After submit it hast to get Values as String in URL it get it so:
...?RW=N&RW=HAM&RW=HAJ&RW=BRE
But I need it so:
Rw=HAMxHAJxBRE ...
i find this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("form").serializeArray();
$.each(x, function(i, field){
$("#results").append(field.name + "x" + field.value + " ");
});
});
});
</script>
</head>
<body>
<form action="" method="get">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
</form>
<button>Serialize form values</button>
<div id="results"></div>
</body>
</html>
But it doesn't Get Values to URL
Do you have any idea to solve my problem?
Regards
Hello friends thank you for your help, I made some code the result is what I want to string in to URL i don't know why
hier is the Code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("form").serializeArray();
$.each(x, function(i, field){
$("#results").append("" + field.value+"x");
});
});
});
</script>
</head>
<body>
<form action="" method="get">
<label>
<select name="RW" multiple class="multiple normal-selectbox" id="RW">
<!--<option value="-" selected="selected" >alle Abflughäfen</option>-->
<optgroup label="Norden">
<option value="N" ><span class="input-group">Region Nord</span></option>
<option value="HAM" ><span class="input-group">Hamburg</span></option>
<option value="HAJ" selected ><span class="input-group">Hannover</span></option>
<option value="BRE" ><span class="input-group">Bremen</span></option>
</select>
</label>
</form>
<button>Serialize form values</button>
<div id="results"></div>
</body>
</html>
also the string should be RW="results"
Assuming that you are using PHP on the server-side - as implied by the PHP tag on this post, PHP should show this as an Array automatically. For an ordinary field, $_REQUEST['RW'] would be a single value (e.g., "HAM") for a multiple select it will be an array (e.g., ["HAM","HAJ"]). Just let PHP do the work for you and don't try to decode the URL yourself.
Here am working on a page were i need the content inside a textarea in a form tag to be passed to another set of form tag in the same page were i have no submit button to pass the content, please help me on this and pardon me if went wrong somewhere, thank you.
content.php
<?php
echo'
<form>
<div class="col-sm-12 form-group"><textarea rows="6" type="text" class="form-control" placeholder="Mail body" name="mail_body"></textarea></div>
//Without using submit button
</form>';
?>
pass_content.php
<?php
<form>
//pass the the content in above textarea in this form which is on the same page
</form>
?>
You can do this using jquery. Like this :
var $mail = $(".mail");
$(".email").keyup(function() {
$mail.val( this.value );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-sm-12 form-group"><textarea rows="6" type="text" class="form-control email" placeholder="Mail body" name="mail_body"></textarea></div>
</form>
<form>
<textarea rows="6" type="text" class="form-control mail" ></textarea>
</form>
UPDATE : As you want another field to be hidden.
you jquery code:
var $mail = $(".mail");
$(".email").keyup(function() {
$mail.val( this.value );
});
and here is your html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-sm-12 form-group">
<textarea rows="6" type="text" class="form-control email" placeholder="Mail body" name="mail_body"></textarea>
</div>
</form>
<form>
<input type="hidden" class="mail" >
</form>
Check this -
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
console.log('document loaded');
$( "#box-texarea" ).keyup(function() {
console.log( "Handler for .keyup() called." );
// Get data from textarea
var userData = $(this).val();
console.log('userData : '+userData);
// Place data inside form
$('#fm-userdata').html(userData);
});
});
</script>
</head>
<body>
<textarea placeholder="Place for textarea" id="box-texarea" style="width:500px; height: 100px;"></textarea>
<br>
<form id="fm-userdata" style="border: 1px solid #ccc;"></form>
</body>
</html>
I am unable to load external file while using AJAX jQuery. I want to use jQuery AJAX to pop up form then validate, enter data in MySQL. but starting from a simple AJAX function. Kindly let me know where I am going wrong
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax({
type: "POST",
url:"contact.php",
data: str,
success:function(result) {
$("#div1").html(result);
}
});
});
});
</script>
</head>
<body>
<div id="contact_form">
<form id="ajax-contact-form" name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input"/>
<label class="error" for="name" id="name_error">This field is required.</label>
<input class="button" type="submit" name="submit" value="Send Message">
</fieldset>
</form>
</div>
</body>
</html>
and contact.php file is
<?php
echo "Hello";
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$(".button").click(function() {
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
return false;
});
});
</script>
</head>
<body>
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<div id="div1">
</div>
</body>
</html>
Try that:
What needed to be fixed:
1) You'd duplicated the onReady function,
2) you can use a submit form button, but since it's default action is to submit the form, the result wouldn't have been visible.
3) There was no #div1 for the result to be displayed in.
Hopefully, this has been helpful... Happy Coding!
Try with type button type
<input type="button" name="submit" class="button" id="submit_btn" value="Send" />
And also your both scripts are same use either DOM ready or $(function) like
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
});
});
</script>
button is your class name so that it will represented like .button And create an div with id div1 at your html page
$("#div1").html(result);
Use one div which id is div1 inside your page which you want to show the result.
<div id="div1"></div>
my code was working and taking my text from textbox to next page + my Input control to next page via js but suddenly there seems to be a blunder whats wrong in following code
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var i=2;
function AddTextbox(){
container.innerHTML=container.innerHTML+'<input type="text" name="'+ i + '">';
i++;
}
</script>
</head>
<body>
<form action="next.php" method="post">
<input type="text" name="1" />
<input type="button" onClick="AddTextbox" name="btn" value="add" />
<input type="submit" name="submit" value="sub" />
<div id="container"></div>
</form>
</body>
</html>
<html>
<head>
<script>
function addElement(tag_type, target, parameters) {
//Create element
var newElement = document.createElement(tag_type);
//Add parameters
if (typeof parameters != 'undefined') {
for (parameter_name in parameters) {
newElement.setAttribute(parameter_name, parameters[parameter_name]);
}
}
//Append element to target
document.getElementById(target).appendChild(newElement);
}
</script>
</head>
<body>
<div id="targetTag"></div>
<input type="button" onClick="addElement('INPUT','targetTag',{id:'my_input_tag', name:'my_input_tag', type:'text', size:'5'}); return false;" value="Add Input Tag" />
<input type="button" onClick="addElement('INPUT','targetTag'); return false;" value="Add Input Tag W/O Parameters" />
</body>
</html>
Note If you bother to check the DOM after executing this in IE, you'll see that the name field is not available to you. IE declares this field to be read-only which is why you don't see it. The field will be properly submitted, however, as shown in this test code:
<?php
if (isset($_POST)) {
print '<pre>'.print_r($_POST,true).'</pre>';
}
?>
<html>
<head>
<script>
function addElement(tag_type, target, parameters) {
//Create element
var newElement = document.createElement(tag_type);
//Add parameters
if (typeof parameters != 'undefined') {
for (parameter_name in parameters) {
newElement.setAttribute(parameter_name, parameters[parameter_name]);
}
}
//Append element to target
document.getElementById(target).appendChild(newElement);
}
</script>
</head>
<body>
<form method="post">
<div id="targetTag"></div>
<input type="submit" value="Check"/>
</form>
<input type="button" onClick="addElement('INPUT','targetTag',{'id':'my_input_tag', 'name':'my_input_tag', 'type':'text', 'size':'5'}); return false;" value="Add Input Tag" />
<input type="button" onClick="addElement('INPUT','targetTag'); return false;" value="Add Input Tag W/O Parameters" />
</body>
</html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var i=2;
$(document).ready(function() {
$('#button').click(function(){
$('#container').append('<input type="text" name="'+ i + '"><br/>')
i++;
});
});
</script>
</head>
<body>
<form action="next.php" method="post">
<input type="text" name="1" />
<input type="button" id="button" name="btn" value="add" />
<input type="submit" name="submit" value="sub" />
<div id="container"></div>
</form>
</body>
</html>
use click function. is this you need?
When the form is submit my jquery accordion stops working my file name is add.php here is its code
<?php require_once('database.php');?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/accordionTheme.css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js" type="text/javascript"></script>
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/jquery.ui.accordion.js" type="text/javascript"></script>
<script>
$(function() {
$("#myAccordion").accordion();
});
</script>
<head>
<body>
<div id="myAccordion"><!-- Start Accordion --->
<h2>
Add Student
</h2>
<div>
<form action="add.php" id="form1" method="get" >//here my form start
<p>Please add Student Data</p>
<label for="stname">Enter Student Name:</label>
<input name="stname" type="text" id="stname" size="37" />
<br /><br />
<label for="stclass">Enter Student Class :</label>
<select name="stclass">
<option>MPhil</option>
<option>M.Sc.</option>
</select>
<br />
<input name="Add" type="submit" id="Add" value="Add" />
</form>
<?php
//lets start submit data to database
if(isset($_GET['stname'])&& isset($_GET['stclass']))
{
$stname=$_GET['stname'];
$stclass=$_GET['stclass'];
if(mysql_query("insert into student(teacher_id,student_name,student_class) values ('1','$stname','$stclass')"));
{
print "<p>record added</p";
}
}
?>
</div>
<h2>
Add course
</h2>
<div></div>
<h2>
Add publication
</h2>
<div></div>
</body>
</html>
I am printing php inside body you can see recordadded when form is submitted.
The p tag you print using PHP is not closed, which is what makes JavaScript go crazy. Close it and it should work OK.