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
Related
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>
can i get all this information without any php code or script on an other web form?can i get all this information without any php code or script on an other web form?can i get all this information without any php code or script on an other web form?can i get all this information without any php code or script on an other web form?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Web From</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<form action="" method="POST">
<ul style="list-style-type:none;">
<a name="top">
<fieldset>
<legend>
<h3>Basic Infromation</h3>
</legend>
<li> Image
<input type="image" name="image">
</li>
<br>
<li>
<input type="button" name="btnUploadImage">
</li>
<br> First Name:
<input type "text" name="firstName" size="30" maxlength="25">
<span>
Last Name:
<input type "text" name="lastname" size="30" maxlength="25">
</span>
</li>
<br>
<li>
<br>CNIC:
<input type="number" name="cnic" size="30" maxlength="25">
</li>
<br>
<li> Date Of Birth:
<input type="date" name="dateOfBirth" size="30" maxlength="25">
</li>
<br>
<li> Email:
<input type="email" name="email" size="30" maxlength="25">
</li>
<br>
<li>Address:
<textarea rows=”10” cols=”40” name=”address”> </textarea>
</li>
<br>
<br> Gender:
<input type="radio" name="gender" value="male" checked> Male |
<input type="radio" name="gender" value="female"> Female |
<input type="radio" name="gender" value="other"> Other
<li></li>
<br>
<input type="submit" value="Submit">
</fieldset>
</ul>
</form>
Back to top
</body>
</html>
Unfortunately, your question is not very clear.
I assume that you want the input data of the form above to be displayed in another form on a different page, when the submit button is clicked.
If so, yes, you can get this information there using JavaScript.
What you would have to do to get there:
Send form data via URL parameters (so something like targetpage.html/?lastname=John&cnic=4545and so on
On the target page you'd have to implement JavaScript which gets those URL parameters (probably call them by name and store them in a variable to use them)
Use the single parameters to populate the input of your form on this page or do whatever you want with it.
This has of course downsides. E.g. JavaScript could be disabled or manipulated, so you should be careful.
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.
EDIT: This seems to be due to the file itself and possibly where it is stored on the machine (it's on a mounted volume). It is unlikely to be related to the form or Django, since other files work as expected.
I have a pretty simple HTML page with a form which is behaving very strangely:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="generator" content=
"HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<title>Add picture</title>
</head>
<body class="app-products model-picture change-form">
<!-- Container -->
<div id="container">
<!-- Header -->
<div id="header">
<div id="branding">
<h1 id="site-name">administration</h1>
</div>
</div><!-- END Header -->
<!-- Content -->
<div id="content" class="colM">
<h1>Add picture</h1>
<div id="content-main">
<form enctype="multipart/form-data" action=
"/admin/products/picture/add/" method="post" id="picture_form"
novalidate="" name="picture_form">
<div>
<fieldset class="module aligned">
<div class="form-row field-alt_text">
<div>
<label class="required" for="id_alt_text">Alt text:</label>
<textarea class="vLargeTextField" cols="40" id="id_alt_text"
name="alt_text" rows="10">
</textarea>
</div>
</div>
<div class="form-row field-original_image">
<div>
<label class="required" for="id_original_image">Original
image:</label> <input id="id_original_image" name=
"original_image" type="file">
</div>
</div>
</fieldset>
<div class="submit-row">
<input type="submit" value="Save" class="default" name="_save">
<input type="submit" value="Save and add another" name=
"_addanother"> <input type="submit" value=
"Save and continue editing" name="_continue">
</div>
</div>
</form>
</div><br class="clear">
</div><!-- END Content -->
<div id="footer"></div>
</div><!-- END Container -->
</body>
</html>
It is being served up by a django application as a static file (to keep things simple).
When I click the "Save" button to submit the form without filling it out at all (or if I put some text in the textarea), I see a POST request go through to the django application as expected. However, if I choose a file with the "file" input and then try to submit the form, no POST request reaches the application. In fact, no request is sent (I'm watching the HTTP traffic in wireshark). In Google chrome, I see the following error page:
Any ideas?
Are the name of your inputs separated by a white space?
name= "myinputname"
If so, the form will not process.
The form is displayed on the browser, but when I roll my cursor over the text fields, it just doesn't take the input. How is this caused and how can I solve it?
<html>
<head>
<title>Chemicals.ltd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--> <div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='C:\Users\Dell\Downloads\chem.jpg' style='width:100%;height:100%' alt='[]' />
</div><!-->
<h2> Welcome to TOXIC TRADERS ! </h2>
<p>We trade chemicals , for industrial or lab use.<br> Please enter Relevant info in the form </p>
<form name="Details" action="/ChemControl" method="POST">
Chemical Name: <input type="text" name="Chemical"><br>
Hazard Level(No.): <input type="text" name="Hazard type"><br>
Lab/Company Name: <input type="text" name="Lab Name" ><br>
Serial No.: <input type="text" name="Serial No."><br>
<input type="submit" value="Send Info">
</form>
</body>
</html>
You are overlaying your form with a div, that blocks the input. Remove it:
<html>
<head>
<title>Chemicals.ltd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2> Welcome to TOXIC TRADERS ! </h2>
<p>We trade chemicals , for industrial or lab use.<br> Please enter Relevant info in the form </p>
<form name="Details" action="/ChemControl" method="POST">
Chemical Name: <input type="text" name="Chemical"><br>
Hazard Level(No.): <input type="text" name="Hazard type"><br>
Lab/Company Name: <input type="text" name="Lab Name" ><br>
Serial No.: <input type="text" name="Serial No."><br>
<input type="submit" value="Send Info">
</form>
</body>
Your html comments are invalid
should be
<!-- <html not displayed> -->
Not
<!--> <html not displayed> <!-->
Result is the html that it appears you are trying to comment out is masking the form
Your div tag with 100% height and 100% width has covered the entire view port like a modal form, hence the area beneath it has become non-clickable. Remove the height and width from tag like below:
<div style='position:absolute;z-index:0;left:0;top:0;'>
<img src='C:\Users\Dell\Downloads\chem.jpg' style='width:100%;height:100%' alt='[]' />
</div>
Your font size is probably set to zero.
Add this to your css style file:
input {
font-size: 10pt;
}
Or add the style directly on the HTML tag:
<input style="font-size: 10pt;" type="submit" value="Send Info">