I want my entered text to appear in the Bubble. How do I have to change my code to make it work?
My HTML Code is this One:
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<div class="Webview">
<div class="message_container" id="myForm">
<div class="Chat_Bubble"></div>
</div>
<form class="send_container">
<input id="textField" type="text">
<p>
<input type="button" id="theButton" value="Nachricht absenden!" onclick="document.getElementById('myForm').innerHTML=document.getElementById('Chat_Bubble').value.innerHTML=document.getElementById('textField').value" />
</p>
<h3>
<div id="div"></div>
</h3>
</form>
</div>
You don't need to both set myForm.innerHTML and Chat_Bubble.innerHTML. You can use:
document.getElementById('myForm').children[0].innerHTML = (...), or
document.getElementsByClassName('Chat_Bubble').innerHTML = (...). You need to get the element using the class name, because the div has a class, not an id.
Also, it's good practice to use textContent instead of innerHTML. This way you're sure that the element submitted is seen as text by the browser. Using innerHTML anyway can break your page. I changed this in the code below.
For example, you should try submitting <b> (nothing is drawn on the screen).
The following code works:
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<div class="Webview">
<div class="message_container" id="myForm">
<div class="Chat_Bubble"></div>
</div>
<form class="send_container">
<input id="textField" type="text">
<p>
<input type="button" id="theButton" value="Nachricht absenden!" onclick=" document.getElementsByClassName('Chat_Bubble')[0].textContent = document.getElementById('textField').value" />
</p>
<h3>
<div id="div"></div>
</h3>
</form>
</div>
Related
I have to display a text field along with the magnifying glass in the start of the field. It will accompanied by a label to its left and text input to its right. The below is the HTML I have got with the inline CSS
<html>
<head>
<title>Checking</title>
</head>
<body>
<div>
<label style="float:left">Search user</label>
<div style="position:relative;display: block;">
<div style="position:absolute;top:0;left:0;z-index:10;font-size: 0.75em;" onclick="showModal();">🔍</div>
<input style="top:0;left:0;padding-left: 20px;float:left;width:100px" type="text" />
</div>
<div>
<input type="text" />
</div>
</div>
</body>
</html>
Without the label the text box works as I expected, but when I float the label to make the label, input textbox and the result textbox display in the same line, the magnifying glass is displayed over the table. I can move it by changing the 'left' for the div containing the icon. I also have to align the entire set of the fields to right of the screen. Is there a better way to do it?
The below is what i want
Use display:flex with justify-content:flex-end. It solves the issue.
<!DOCTYPE html>
<html>
<head>
<title>Checking</title>
</head>
<body>
<div style="display:flex;justify-content:flex-end">
<label style="float:left">Search user</label>
<div style="position:relative;display: block;">
<div style="position:absolute;top:0;left:0;z-index:10;font-size: 0.75em;" onclick="showModal();">🔍</div>
<input style="top:0;left:0;padding-left: 20px;float:left;width:100px" type="text" />
</div>
<div>
<input type="text" />
</div>
</div>
</body>
</html>
Is this what you are looking for?
label + div {
white-space: pre;
}
body{
float: right
}
<html>
<head>
<title>Checking</title>
</head>
<body>
<div>
<label style="float:left">Search user</label>
<div style="position:relative;display: block;">
<div style="position:absolute;top:0;left:0;z-index:10;font-size: 0.75em;" onclick="showModal();">🔍</div>
<input style="top:0;left:0;padding-left: 20px;float:left;width:100px" type="text" />
</div>
<div>
<input type="text" />
</div>
</div>
</body>
</html>
I tried to make some changes to HTML Code below and used styles for width and height to make the elements responsive for all pages but I could not figure out how to make all below elements responsive on smaller screens such as Cellphones and Ipads. I fill it should be a way to adjust everything based on the background picture or any first tag or page.
Here is the code so far I wrote:
<!DOCTYPE html>
<html lang="en">
<head>
<title>{lang_login_title}</title>
<meta name="description" content="{lang_login_desc}" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{SC_LIB_PROJECT}online-shop/main.css">
<!--SC_JS_LIB-->
<!--SC_PAGE_CHARSET-->
</head>
<body class="page-background" style="background-image:url('{SC_LIB_PROJECT}online-shop/login/golden.jpg');">
<div class="page">
<div class="container-small container-alpha">
<div class="background">
<div class="content">
<h1>
Client Panel
</h1>
<p>
Data Technology, California, USA
</p>
<p></p>
<p>
Instagram Page:
</p>
<p>
#CutieSiberianHusky
</p>
</div>
</div>
<form class="form" action="" {SC_FORM_ATTR}>
<!--SC_FORM_HIDDEN-->
<h2>
</h2>
<div class="control">
<label class="label" for="name">{lang_login}</label>
<input class="input {SC_FIELD_CLASS}" type="text" placeholder="{lang_login}" {SC_FIELD_INFO_login}>
</div>
<div class="control">
<label class="label" for="pass">{lang_password}</label>
<!--<input class="input {SC_FIELD_CLASS}" type="password" placeholder="{lang_password}" {SC_FIELD_INFO_password}>-->
<input class="input {SC_FIELD_CLASS}" type="password" id="inputPassword" class="form-control {SC_FIELD_CLASS}" {SC_FIELD_INFO_pswd}>
</div>
<div class="submit">
<input class="button" type="submit" value="Login" {SC_FORM_SUBMIT_INFO} />
</div>
<!-- Idiomas -->
<div class="flag-lang">
<a class="flags" href="../login/login.php?lang=en"><img src="{SC_LIB_PROJECT}online-shop/img/en_us.png"></a>
<a class="flags" href="../login/login.php?lang=pt"><img src="{SC_LIB_PROJECT}online-shop/img/pt_br.png"></a>
<a class="flags" href="../login/login.php?lang=es"><img src="{SC_LIB_PROJECT}online-shop/img/es_es.png"></a>
</div>
<hr style="margin: 25px 0 20px;">
<div id='message'>
{SC_FIELD_INFO_Links}
<!--<p style="color:#333;font-size:12px;"><b>{lang_new_user}</b></p>
<p style="color:#333;font-size:12px;"><b>{lang_login_to_access}</b></p>
<p style="color:#333;font-size:12px;"><b>{lang_login}:</b> admin</p>
<p style="color:#333;font-size:12px;"><b>{lang_password}:</b> admin</p>-->
</div>
</form>
</div>
</div>
<div class="copyright">
<p>©2021 Data Technology. All rights reserved.</p>
</div>
</body>
</html>
Here is how it look like in large screens:
And here is how it look like in smaller screen size(for example: Iphone X):
I would be appreciate if someone help me to see how to use style and width on this or if there is another way to adopt all elements based on screen size once. I know how to do this in SWIFT but I am not sure how to do it in HTML
you try to use (#media screen) in your css.
source link
Hi so I am trying to make a search bar that queries a database in MySQL using a product number and when the item is found, its relevant numerical values underneath the headings ("Item Cost", "Taxes", etc) are put into the form boxes to be used as input for my HighCharts graph. That was a long sentence, sorry, hopefully my JSFiddle will explain what I mean!
I have a bit of experience with Python and in my college course was taught how to make a self-processing page using it but I couldn't get it to work and since the only results online for this sort of thing were for PHP I said I'd give that a go instead!
I used PHP to conduct a search on the database originally but when hitting search it went to a 2nd page so I'd prefer it be done on the same page
JSFiddle
Side question: How would I set the reset button to reset the values to 0 in the boxes? (It's okay if this is too much, I can figure it out myself I'd say)
Thanks in advance!
It asks me to include indented code as I have a JSFiddle link so here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pricer.ie</title>
<link rel="stylesheet" href="homepage.css"/>
<link href="https://fonts.googleapis.com/css2?family=B612&display=swap" rel="stylesheet">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="/js/themes/gray.js"></script>
<script src="highcharts.js"></script>
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
</head>
<body>
<nav class="navbar">
<ul>
<li class="logo">
<img src="logopricerv2.png" alt="logo" id="logo" >
</li>
<li>
<a href="login.py" class="logintopright" >Login</a>
</li>
<li>
<a href="logout.py" class="logouttopright" >Logout</a>
</li>
<li>
<button class="darkmodebutton" onclick="darkFunction()">Toggle dark mode</button>
</li>
</ul>
</nav>
<main>
<figure class="highcharts-figure">
<div id="container" style="width:100%; height:400px;"></div>
<script>
</script>
</figure>
<section>
<form action="search.php" method="POST" id="search_form" autocomplete="off">
<label for="query">SKU : </label>
<input type="text" id="query" name="query"><br><br>
<input type="submit" id="search_box" value="Search">
</form>
</section>
<section>
<form id="mainForm" autocomplete="off">
<label>Item Cost:</label>
<input type="number" id="icost" name="icost" step="0.01"/><br><br>
<label>Shipping Cost:</label>
<input type="number" id="scost" name="scost" step="0.01"/><br><br> <!-- names and ids are incorrect just like this for now -->
<label>Taxes:</label>
<input type="number" id="taxes" name="taxes" step="0.01"/><br><br> <!-- shouldnt exist as taxes is from database but sure look-->
<label>Listing Fee:</label>
<input type="number" id="listfee" name="listfee" step="0.01"/><br><br>
<label>Profit Margin:</label>
<input type="number" id="pmargin" name="pmargin" step="0.01"/><br><br>
<input type="submit" value="Reset">
<input type="submit" value="Save Changes">
</form>
</section>
</main>
<footer>
</footer>
</body>
</html>
Easier to understand in the JSFiddle
I'm trying to create an Emmet (+TAB) shortcut and I have 90% of it complete. I just can't figure out how to get the last nested elements to be on their own lines. The label, input and closing div tag are all on one line. I'd like to have them all on separate lines
snippet.json code
"form+": "section.form-container>div.form-wrapper>form:post>(div.form-group>label+inp)+btn:s"
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<section class="form-container">
<div class="form-wrapper">
<form action="" method="post">
<div class="form-group"><label for=""></label><input type="text" name="" id=""></div>
<button type="submit"></button>
</form>
</div>
</section>
Trying to get it to look like this automatically
<section class="form-container">
<div class="form-wrapper">
<form action="" method="post">
<div class="form-group">
<label for=""></label>
<input type="text" name="" id="">
</div>
<button type="submit"></button>
</form>
</div>
</section>
</body>
</html>
In this case, the element layout is controlled by inline_break option of output profile, which acts globally for all snippets expanded by Emmet. You can reduce inline_break to 2, it will cause elements to lay out as expected
I just want that when I press Submit button to get me to the <div id="Home> where the other code will be.
This is my work:
<!DOCTYPE html>
<head>
<title>MyWebsite</title>
</head>
<body>
<div id="Start" align="center">
<h1 style="color:red">My</style><span style="color:blue">Website</span></h1>
<hr/>
Name:<br/>
<input type="text" name="username"><br/>
Password:<br/>
<input type="password" name="password"><br/><br/>
<form action="Home">
<input type="submit" name="continue" value="Continue">
</form>
</div>
<div id="Home" align="center">
<p>Hello world!</p>
</div>
</body>
You need some PHP (or other server side language) between your form and the div below it. Otherwise you're just refreshing the page when you hit submit.
You could also use javascript/jQuery.
Try doing one or both of the above and then come back for help if you have trouble.