Develop Reference

How to sync typing between a span and an input?

I'm making a new I found way to sync typing between a span and an input ("https://stackoverflow.com/questions/8803416/synchonise-2-input-fields-can-it-be-done-using-jquery") and it works but I've come across a problem.
What I'm trying to do is create a multi-line title in WordPress using the classic editor and the input requires any text entered to be set in value="". It looks like this below:
<input type="text" name="post_title" size="30" value="" id="title" spellcheck="true" autocomplete="off">
So how do I sync typing between a span and an input but text is in value=""?
This is the code I've done so far (yes the code works, look at it in debug mode and you'll see the text showing up at the end of the input):
$("<span class='titlebox' role='textbox' contenteditable='true'></span>").insertAfter("#title");
$("span.titlebox").bind("keyup paste", function() {
$("input#title").text($(this).text());
});
.titlebox {
ont-size: 2.7em;
letter-spacing: -0.5px;
font-weight: 600;
display: block;
width: 100%;
overflow: hidden;
resize: none;
word-wrap: break-word;
border: 1px solid #000
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="post_title" size="30" value="" id="title" spellcheck="true" autocomplete="off">

$("input#title").text() never works. Instead you need to use $("input#title").val() to fill it.
$("<span class='titlebox' role='textbox' contenteditable='true'></span>").insertAfter("#title");
$("span.titlebox").on("input", function() {
$("input#title").val($(this).text());
});
.titlebox {
ont-size: 2.7em;
letter-spacing: -0.5px;
font-weight: 600;
display: block;
width: 100%;
overflow: hidden;
resize: none;
word-wrap: break-word;
border: 1px solid #000
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="post_title" size="30" value="" id="title" spellcheck="true" autocomplete="off">

Form Element Resizing After Submission

I am working on a system that makes use of a form to enter some data into a database. The system works as expected except for an issue with the display of the form after it has been submitted. When the form is submitted the page reloads and will show the info submitted as placeholder text inside of the form fields, and the "Save Changes" button will display as "Changes Saved!" for a few seconds. However, some of the input fields width property gets altered as well. Specifically my half-width form elements.
The width for these elements is defined as width: calc(50% - 24px), which is 265px. Additionally, there is a 5px padding and 2px border for these elements. This comes out to a total width of 279px, as expected. However, when the form is submitted and the page is reloaded the total width of the element comes out as 265px, retaining the 5px padding and 2px border, but dropping the internal width to 251px. Nowhere in my code is there anything that changes the width ever, and checking with dev tools shows that the width, padding, and border I defined are still there. This has the rather annoying effect of shifting both elements over after the form is submitted. Navigating to another page and back resolves the issue.
I have tried using !important and have checked over all of the code (JavaScript) echoed out from PHP when the submission is successful that interacts with the form in a capacity for changing things, and nothing should have this impact. I only change the color and text of the submit button.
Any help would be greatly appreciated!
Edit 1:
The code below is a snippet of the entire form, excluding the PHP. I have modified the code so that clicking save changes does not submit the form but will show the change for the submit button, as otherwise submitting makes the form vanish. The error does not occur in the snippet of code however as a result of not "reloading" the page.
function success() {
var button = document.getElementById('clientInfoBtn');
var normalColor = button.style.backgroundColor;
var normalValue = button.value;
button.style.backgroundColor = '#33cc33';
button.value = 'Changes Saved!';
setTimeout(function() {
button.style.backgroundColor = normalColor;
button.value = normalValue;
}, 3000);
return false;
}
.standardFormBox {
margin-bottom: 20px;
width: 600px;
}
.standardFormBoxInner {
border: 1px solid silver;
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.standardFormHeading {
font-family: "Helvetica";
font-size: 16pt;
color: white;
background-color: #1975FF;
margin: 0;
padding: 10px;
}
.standardFormBtn {
color: white;
font-size: 14pt;
background-color: #1975FF;
border: none;
padding: 10px 10px;
margin-bottom: 15px;
}
.standardFormBtn:hover {
cursor: pointer;
background-color: #0052cc;
}
.standardFormInput {
font-size: 14pt;
font-family: "Trebuchet MS";
margin-bottom: 10px;
padding: 5px;
}
.sfiMultiLabel {
font-size: 14pt;
font-family: "Trebuchet MS";
}
.sfiHalf {
width: calc(50% - 24px);
}
.sfiText {
font-size: 14pt;
margin: 0;
}
.sfiTextHalf {
width: calc(50% - 10px);
}
.sfiTextFull {
width: 100%;
}
.sfiFull {
width: 100%;
}
.sfiLeft {
margin-right: 20px;
}
<form name="accountInfoForm" method="POST">
<div class="standardFormBox">
<p class="standardFormHeading">Business Billing Information</p>
<div class="standardFormBoxInner">
<p class="sfiText sfiTextHalf">Business Name</p>
<input type="text" name="cBusiness" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">Name On Bank Account</p>
<input type="text" name="cName" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">Billing Email</p>
<input type="email" name="cEmail" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">Street Address</p>
<input type="text" name="cStreet" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">City</p>
<input type="text" name="cCity" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiLeft sfiTextHalf">State</p>
<p class="sfiText sfiTextHalf">ZIP</p>
<input type="text" name="cState" placeholder="" class="standardFormInput sfiLeft sfiHalf">
<input type="text" name="cZip" placeholder="" class="standardFormInput sfiHalf">
<p class="sfiText sfiTextHalf">Phone Number</p>
<input type="text" name="cPhone" placeholder="" class="standardFormInput sfiFull">
</div>
</div>
<input type="submit" name="clientChangeInfo" value="Save Changes" class="standardFormBtn" id="clientInfoBtn" onclick="return success()">
</form>

Keep input's place holder text while typing

I have this input :
<input type="number" class="textfield numberField font" name="Price" placeholder="Price"><br>
So the text place holder is price.
When user start typing I would like to keep the word price.
So if he types 65 he will see on the input :
Price 65
Do I need to create another div inside for the word price, or can it be done using js or html ?

I think you want to be like that.
.full-input {
display: inline-block;
padding: 3px;
border: 2px solid blue;
}
input {
outline: none;
border: none;
display: inline-block;
line-height: 1.2em;
font-size: 14pt;
}
label {
display: inline-block;
font-size: 12px;
color: blue;
}
<div class='full-input'><label for='price'>Price</label>
<input type='number'class="textfield numberField font" name="Price">
</div>

One way would be to check if the value is equal to an empty string, and if so, manually set the value to Price. Note that this will require removing the type="number" restriction.
document.getElementsByTagName('input')[0].onkeydown = function() {
if (this.value == '') {
this.value = "Price ";
}
}
<input class="textfield numberField font" name="Price" placeholder="Price">
If you only want to allow numbers, then you could add a pattern validation of something like pattern="Price [0-9]":
document.getElementsByTagName('input')[0].onkeydown = function() {
if (this.value == '') {
this.value = "Price ";
}
}
<form>
<input class="textfield numberField font" name="Price" placeholder="Price" pattern="Price [0-9]">
<input type="submit">
</form>
Keep in mind that both approaches would have the word Price in the value (which may be unintended). Creating a <label> may be more appropriate for your situation.

You may try this:
.textfield.labeled>.label {
flex: 0 0 auto;
margin: 0;
font-size: 14px;
}
.textfield.labeled .label:first-child+input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-color: transparent;
}
.textfield.labeled>input {
padding-left: 3px;
border: 1px solid rgba(34,36,38,.15);
box-shadow: none;
}
.textfield.labeled {
display: inline-flex;
color: rgba(0,0,0,.87);
}
.label {
display: inline-block;
background-color: #e8e8e8;
padding: 2px 5px;
color: rgba(0,0,0,.6);
font-weight: bold;
}
<div class="textfield labeled">
<div class="label">
Price
</div>
<input type="number" class="textfield numberField font" name="Price" placeholder="Price">
</div>

JS validation on form

I have a form which I am trying to validate with JS. Problem is for the life of me I can’t get it to work.
Can anybody tell me where I’m going wrong? In the example below I am just rying to validate the Email field.
Regards,
Marc
function validateEmail() {
var x = document.forms["myForm"]["Email"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
#contact-area {
width: 500px;
max-height:200px;
margin-top: 0px;
float:left;
}
#contact-area input, #contact-area textarea {
padding: 3px;
width: 520px;
font-family:'Lato', sans-serif;
font-size: 14px;
margin: 0px 0px 0px 0px;
border: 1px solid #ccc;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 1px solid #ffc423;
}
#contact-area input.submit-button {
width: 100px;
float: left;
background-color:#ffc423;
color:black;
margin-top:13px;
cursor:pointer;
}
#contact-area input.submit-button:hover {
background-color:#002b51;
color:white;
}
label {
float:left;
text-align:left;
margin-right:15px;
width:100px;
padding-top:10px;
padding-bottom:5px;
font-size:15px;
color:#ffc423;
font-weight:700;
}
textarea {
resize: none;
}
<div id="contact-area">
<form method="post" action="contactengine.php" name="myForm" onsubmit="return contact-validation()">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name">
<label for="Company">Company:</label>
<input type="text" name="Company" id="Company">
<label for="Email">Email:</label>
<input type="email" name="Email" id="Email">
<label for="Message">Message:</label>
<textarea name="Message" rows="20" cols="20" id="Message" title="Your message | max 300 characters"></textarea>
<input type="submit" name="submit" value="Submit" class="submit-button">
</form>
<div style="clear: both;"></div>
</div>

This is wrong:
onsubmit="return contact-validation()">
You have no JavaScript method called contact-validation().
Even if you did, dashes are not valid in function names.
Try this instead:
onsubmit="return validateEmail()">

Change
x = document.forms["myForm"]["Email"].value;
to
x = document.getElementById("Email").value;
It targets the element directly by its id so if the DOM structure changes your JavaScript will still work. Also, the validation is checking the Email input, but the error message is for Name. You may want to leverage HTML5 validation with the required attribute as well.
You should also avoid the onsubmit attribute as it tightly couples the HTML and JavaScript. This can be achieved by the following:
<!-- use a button instead of an input for buttons, it is more semantically correct -->
<button id="btn-submit">Submit</button>
<script>
document.getElementById("btn-submit").addEventListener("click", function(evt){
evt.preventDefault();
if (validateEmail()) {
document.getElementById("myForm").submit();
}
});
</script>
Remove the onsubmit= from the form tag if you use this approach.

JQuery Preview Form when Review Button is pressed

I am having a hard time trying to figure out how to preview a form before the customer submits. I have one fieldset that shows form, then the user can preview there entries on another fieldset before they submit there form.
Thanks for all and any help.
I tried this:
var fname = $('input#fname').val();
$(field2.show_fname).html(fname).show();
But didnt work at all.
Code is below. Here is my Fiddle: http://jsfiddle.net/xdmp8zz4/3/
HTML:
<form id="helpdeskform" action="process.php" method="post">
<fieldset class="field1 current">
<h2>(Placeholder) Title of Form heading level 2</h2>
<p><label class="form-label first-name" for="fname">First Name:</label>
<input type="text" name="fname" id="fname" placeholder="First Name"/>
</p>
<p><label class="form-label last-name" for="lname">Last Name:</label>
<input type="text" name="lname" id="lname" placeholder="Last Name"/>
</p>
<p><label class="form-label" for="phone-field">Phone:</label>
<input type="text" name="phone" id="phone-field" placeholder="Phone Number"/>
</p>
<p><label class="form-label" for="email-field">E-mail:</label>
<input type="text" name="email" id="email-field" placeholder="E-mail"/>
</p>
<hr>
<p><label for="classify">Type of Request:</label>
<select name="classify" id="classify">
<option value="select">Please select an option..</option>
<option value="maintainence">Maintainence of Site</option>
<option value="troubleshoot">Troubleshoot/Error</option>
<option value="new">Create new content</option>
</select>
</p>
<p><label for="subject">Short Description: <span class="counter-field"><span id="counter"></span> characters left.</span></label>
<input type="text" name="subject" id="subject" placeholder="Subject"/>
</p>
<p><label for="desc">Additional Comments:</label>
<textarea style="font-family: Arial, Veranda, Sans serif" name="desc" id="desc" cols="30" rows="10" placeholder="Short Description"></textarea>
</p>
<p><label for="review">
<input type="button" name="review" class="review action-button" value="Review"/>
</label></p>
</fieldset>
<fieldset class="field2">
<!-- #TODO PREVIEW ALL FORM INPUTS -->
<p>First Name: <input type="hidden" class="show_fname" readonly="readonly" /></p>
<p>Last Name: <input type="hidden" class="show_lname" readonly="readonly" /></p>
<p>Phone: <input type="hidden" class="show_phone" readonly="readonly" /></p>
<p>E-mail: <input type="hidden" class="show_email" readonly="readonly" /></p>
<p>Type of Request: <input type="hidden" class="show_type_of_request" readonly="readonly" /></p>
<p>Short Description: <input type="hidden" class="show_subject" readonly="readonly" /></p>
<p>Additional Comments: <input type="hidden" class="show_comments" readonly="readonly" /></p>
<p style="float:left;"><label for="previous">
<input type="button" name="previous" class="previous action-button" value="Previous"/>
</label></p>
<p style="float:left; padding-left: 10px;"><label for="Submit">
<input type="submit" value="Submit" name="submit" class="action-button"/>
</label></p>
</fieldset>
</form>
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
$('.review').click(function () {
$('.current').removeClass('current').hide().next().show().addClass('current');
});
$('.previous').click(function () {
$('.current').removeClass('current').hide().prev().show().addClass('current');
});
$('#subject').simplyCountable({
counter: '#counter',
countType: 'characters',
maxCount: 80,
strictMax: true,
countDirection: 'down',
});
});
CSS:
/*Hide all except first fieldset*/
#helpdeskform .field2 {
display: none;
}
/*inputs*/
#helpdeskform input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 80%;
color: #2C3E50;
font-size: 13px;
}
#helpdeskform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#helpdeskform .action-button {
width: 100px;
font-weight: bold;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#helpdeskform .action-button:hover,
#helpdeskform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #900;
}
/*Form labels*/
label.form-label {
text-align: left;
}
/*Phone Label Align*/
input#phone-field {
margin-left: 26px;
}
/*E-mail Label Align*/
input#email-field {
margin-left: 24px;
}
.counter-field {
font-size: 10px;
}
/*Divider*/
hr {
margin-bottom: 20px;
padding: 0px;
border-width: 2px;
border-style: solid;
border-color: #ccc;
}

Setting the text inputs in the second fieldset to hidden won't allow you to set the value and also won't display. I've changed these to type="text"and set things up to loop through the form values in the first to set all the form values in the review section here, http://jsfiddle.net/xdmp8zz4/23/

This is what I did for the first name one to show up in the review.
$('.show_fname').after($('#fname').val());
You can't put the value in the hidden input because it is hidden, and you can't change the type of the input from hidden to text because jQuery forbids it. Either you can change the input from hidden to text/disabled or you can simply place it in html as I have done with the simple code above.