Below is my html code for the form
<form id="taxi_distance_input" >
<div class="col-md-8" style="display: inline-block; left:-30px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" id="usr"> </input>
<span class="input-group-addon" style="width: 50px">km</span>
</div>
</div>
<div class="col-md-4" style="padding-left:0px; margin-left:-10px">
<input type="button" class="btn btn-success" value="Submit" id="myButton"> </input>
</div>
</div>
<p> </p>
</form>
And in the bottom of the page I give the
<script src="/js/form_input_parameter.js"></script>
Inside the form_input_parameter.js i have written the script
$(document).ready(function(){
$('#myButton').click(function(){
var text = $("#usr").val();
alert(text+"success");
});
But it is not working .Any help is apprecited
You've forgotten the }); at the end of your JS code
The input tag should end with />
$(document).ready(function() {
$('#myButton').click(function() {
var text = $("#usr").val();
alert(text + " success");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" id="usr" />
<input type="button" class="btn btn-success" value="Submit" id="myButton" />
Related
I have some categories:
<div class="cbp-l-inline-title" style=" font-size: 18px;">
<span style="color: #0669b4">Generic Name:</span>
<a><?php echo $category[0]['generic_name'];?></a>
</div>
and I want on click to insert value of this <a> to this form
<form method="post" action="/search/index" class="input-group" style="width: 45%; margin-left: 646px">
<input type="text" name="search" id="search" class="form-control" minlength=3 placeholder="Generic" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div id="suggesstion"></div>
<div class="input-group-btn input-group-append">
<button class="btn btn-primary btn-outline-secondary" type="submit" name="submit">Search</button>
</div>
</form>
so that it dynamically starts search of results of this string. I can't send this value to url because it is not latin characters
html
<div class="cbp-l-inline-title" style=" font-size: 18px;">
<span style="color: #0669b4">Generic Name:</span>
<p class="clickMe">click me: text to send after click</p>
</div>
<form method="post" class="input-group">
<input type="text" name="search" id="search" class="form-control" minlength=3
placeholder="Generic" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div id="suggesstion"></div>
<div class="input-group-btn input-group-append">
<button class="btn btn-primary btn-outline-secondary" type="submit" name="submit">Search</button>
</div>
</form>
And javascript in jquery
$('.clickMe').on('click', function(){
var value = $(this).text()
$('input#search').val(value)
})
https://jsfiddle.net/ora0j4uu/
.submit() if you want submit it as well https://www.w3schools.com/jsref/met_form_submit.asp
edit:
jquery for submit
$('.clickMe').on('click', function(){
var value = $(this).text()
console.log(value)
$('input').val(value)
$('.input-group').submit()
})
I want: when I enter in the txtbox Enter amount, then I submit the button , the amount I enter in textbox1 which is inputValue it this display in the txtbox which is totAmountPaid
html
<div class="col-md-12">
<label>Enter Amount:</label>
<input type="text" class="form-control" id="inputValue" value="">
</div>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
script
function myFunction(){
var paidAmount = parseFloat(document.getElementById("inputValue").value);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
Are you including your JS before you are trying add the onClick handler?
If you load the js beforehand it should work fine.
As you can see here https://jsfiddle.net/Lyspxwvu/1/
<script>
function myFunction(){
var paidAmount = parseFloat(document.getEle`enter code here`mentById("inputValue").v`enter code here`alue);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
</script>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
Firefox gives me error
XML Parsing Error: no root element found
Location: http://localhost:1126/5cebf834d54b41f1b944492c2bf2c852/arterySignalR/send?transport=longPolling&connectionToken=AQAAANCMnd8BFdERjHoAwE%2FCl%2BsBAAAASoOM%2FXZ%2B1UWqyQ%2FYXO2FqQAAAAACAAAAAAAQZgAAAAEAACAAAAAUFu%2Fjd8uVno2WCgoC%2BqL%2FTyk4%2F9G0tGOhVKr4EpHnIwAAAAAOgAAAAAIAACAAAACfousertSIl6j8HdDRfemeNPHDjgXABbFasP4BpsaBRjAAAADqZuISuyN4C6Z1BUb4BSojyAs0sj5vyMKuBZrkMzPz6r4vFC13EdNhT0%2BqeNlqyfpAAAAAs2SeXXAfiPKVMcCDkZ%2B3%2Fnii%2BKaLZxyKMLgriAsGDqANLiRjEVgu6ErSX%2F1ZCiiuOW02QGy5aZWT5E4Vm8IMqQ%3D%3D&requestUrl=http%3A%2F%2Flocalhost%3A4055%2FPages%2FSignIn.aspx&browserName=Firefox
Line Number 1, Column 1:
I double checked all tags starts and ends with no help :( any suggestions??
edit: Here is my sample code
<%# Page Title="" Language="C#" MasterPageFile="~/Pages/gateMasterPage.Master" AutoEventWireup="true" CodeBehind="SignIn.aspx.cs" Inherits="Gate.SignIn" %>
<div class="login" id="loginDiv">
<style scoped="scoped" >
#import "../css/custom.min.css";
</style>
<a class="hiddenanchor" id="signup"></a>
<a class="hiddenanchor" id="signin"></a>
<div class="login_wrapper">
<div class="animate form login_form">
<section class="login_content">
<form runat="server" id="signinForm">
<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePageMethods="True">
</asp:ScriptManager>
<h1>تسجيل الدخول</h1>
<div>
<input type="text" class="form-control" placeholder="إسم المستخدم" name="nameTXTBOX" id="usernameTXT" required="required" dir="rtl" />
</div>
<div>
<input type="password" class="form-control" placeholder="كلمة المرور" name="passTXTBOX" id="passTXT" required="required" dir="rtl" />
</div>
<div>
<%--<asp:Button class="btn btn-default submit" text="دخول" runat="server"></asp:Button>--%>
<a class="btn btn-default submit" id="signIn">دخول</a>
<a class="reset_pass" href="#">فقدت كلمة المرور؟</a>
</div>
<div class="clearfix"></div>
<div class="separator">
<p class="change_link">
جديد بالموقع؟
إنشاء حساب جديد
</p></div>
</form>
</section>
</div>
<div id="register" class="animate form registration_form">
<section class="login_content">
<form id="signupForm" class="col-md-offset-4 form-group ">
<h1>إنشاء حساب</h1>
<div>
<input type="text" class="form-control" placeholder="اسم المستخدم" required="" dir="rtl" />
</div>
<div>
<input type="email" class="form-control" placeholder="البريد الالكتروني" required="" dir="rtl" />
</div>
<div>
<input type="password" class="form-control" placeholder="كلمة المرور" required="" dir="rtl"/>
</div>
<div>
<a class="btn btn-default submit" href="index.html">انشاء الحساب</a>
</div>
<div class="clearfix"></div>
<div class="separator">
<p class="change_link">مسجل بالفعل
تسجيل الدخول
</p>
</div>
</form>
</section>
</div>
</div>
</div>
$(function () {
$("#signIn").click(function () {
var name = $("#usernameTXT").val();
var pass = $("#passTXT").val();
console.log(name + ":" + pass);
PageMethods.login_btn_click(name, pass, onSucceed, onError);
});
function onSucceed(res) {
console.log(res);
//$("#loginDiv").load("Profile.aspx?id=" + res);
console.log('success');
window.location.href = "Profile.aspx?id=" + res;
alert(res);
}
function onError(err) {
alert('fail');
console.log("login_btn_click PageMethod Throw Error" + err);
}
});//End of OnLoad
Is There is any way to regenerate page, if there is any missing tag end that i couldn't notice?
your XMl need to well form, all xml document must have one root element for example
<persons>
<person Id=1>
<name>Smith</name>
</person>
<person Id=2>
<name>Jack</name>
</person>
</persons>
I wrote this code to replace the element in div:"change" with the input given in textbox:"use10" when the button:"insert" is clicked.But when i click nothing
is happening please help.Here is my code:
<div id="change">
<?php
echo $r9['fname'];
echo " ";
echo $r9['lname'];
echo " ";
?>
</div>
<div id="dialog" title="Change Details">
<form method="POST" name="changename">
<input type="text" id="use10" name="use10" placeholder="First Name">
<input type="text" id="use20" name="use20" placeholder="Last Name">
<button type="button" type="submit" name="insert" id="insert" class="btn btn-success">Change</button>
<script>
document.getElementById("insert").onclick=function(){
var fn=getElememtById("use10").value;
document.getElementById("change").innerHTML=fn;}
</script>
</form>
</div>
Try this:
Jsfiddle: https://jsfiddle.net/74Lmwcmt/
$( document ).ready(function() {
document.getElementById("insert").onclick=function(){
var fn=document.getElementById("use10").value; // you forget to write "document." over here
document.getElementById("change").innerHTML=fn; // give id of div
}
});
OR
window.onload = function() {
document.getElementById("insert").onclick=function(){
var fn=document.getElementById("use10").value; // you forget to write "document." over here
document.getElementById("change").innerHTML=fn; // give id of div
}
};
I have just used your code and changed it a bit. Check out if this is what you are looking for.
<div id="change" title="Change Details">
<p> <form method="POST" name="changename"><input type="text" id="use10"
name="use10"
placeholder="First Name"> </p>
<p> <input type="text" id="use20" name="use20"
placeholder="Last Name"> </p>
<button type="button" type="submit" name="insert" id="insert" class="btn
btn-success">Change</button><script>
document.getElementById("insert").onclick=function(){
var fn=document.getElementById("use10").value;
document.getElementById("change").innerHTML=fn;}</script>
</form>
</div>
I have the following code, which shows and hides elements according to buttons being clicked:
HTML:
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail1.jpg" alt="thumbNail1.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" >
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail2.jpg" alt="thumbNail2.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" >
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
CSS:
.galleryButtonContainer .cancelRenameButton {display:none;}
.galleryButtonContainer .renameButton {display:none;}
JQUERY:
$(".editButton").click(function () {
$(".renameButton,.cancelRenameButton").show();
$(".editButton").hide();
});
$(".cancelRenameButton").click(function () {
$(".renameButton,.cancelRenameButton").hide();
$(".editButton").show();
});
The problem I'm getting is I can't get the buttons to work individually. I've tried using 'this' without success
You can simply use siblings (less function calls!) in combination with this to traverse the DOM and then just toggle them away (or keep hide and show if you prefer).
JSFiddle here
$(".editButton").click(function () {
$(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();
});
$(".cancelRenameButton").click(function () {
$(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();
});
Try something like this:
$(".editButton").click(function () {
$(this).parents(".largeImage").find(".renameButton,.cancelRenameButton").show();
$(this).parents(".largeImage").find(".editButton").hide();
});
$(".cancelRenameButton").click(function () {
$(this).parents(".largeImage").find(".renameButton,.cancelRenameButton").hide();
$(this).parents(".largeImage").find(".editButton").show();
});
If I understood properly what u want to do. This can be a possible solution:
HTML:
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail1.jpg" alt="thumbNail1.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton" name="form1">
<input type="button" value="Click to Rename"/>
</div>
<div class="cancelRenameButton" name="form1">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" name="form1">
<input type="submit" value="Rename"/>
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail2.jpg" alt="thumbNail2.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton" name="form2">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton" name="form2">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" name="form2">
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
CSS:
.galleryButtonContainer .cancelRenameButton {display:none;}
.galleryButtonContainer .renameButton {display:none;}
jQuery:
$(".editButton, .cancelRenameButton").click(function () {
Toggle($(this));
});
function Toggle(obj){
var name = obj.attr("name");
$(".renameButton[name="+name+"],.cancelRenameButton[name="+name+"]").toggle();
$(".editButton[name="+name+"]").toggle();
}
Check this link jsfiddle to see a how it works.
A better solution would be, I think, remove the divs and deal only with buttons.
Hope it useful!