Hi all!
I am quite new to javascript, but i do have some php scripting experience so i am trying to make my way through it Can't figure this out though, so I hope that someone can help me out here.
I have a multistep jquery form with input validation. If the validation gets an error, the borders of the input fields will color red. Now i want to add an explanational text to it. So once someone gets an error an text will show up like "Please fill in the red colored fields correctly.". In order to archieve this i found the innerhtml function. The basic code i use is stated below
Code:
<script type="text/javascript">
function send(){
var oldHTML = document.getElementById('div_id').innerHTML;
var newHTML = oldHTML + "<span style='color:red'>" + "explanational text" + "</span>";
document.getElementById('div_id').innerHTML = newHTML;
}
</script>
<p id='div_id'>Please fill in the form below in order to contact us.</p>
<input type='button' onclick='send()' value='Send'/>
Now, this all seems to work. But if someone receives an error twice, the explanational text will show up twice... and so on. So, is there anyway to limit this in order to make it only show up once... or maybe an other solution to achieve the above?
Hope i made myself clear.
Thanks a lot for your time.
Kind regards, Robbert
// JS section
<script type="text/javascript">
function send(){
document.getElementById('err0').style.display = 'none';
// if (errorfound) { // error found then display it
document.getElementById('err0').style.display = 'block';
document.getElementById('err0').innerHTML = "explanational text";
// }
}
</script>
// HTML section...
<p>Please fill in the form below in order to contact us.</p>
<div id="err0" style="display:none;color:red"></div>
<input type='button' onclick='send()' value='Send'/>
Could have one error display box or one for each input error section.
Code is untested, but should be close to your needs.
The default innerhtml echo's the static text but also a certain query in php from the database. So its like this:
Code:
<p>Please fill in the form below in order to contact us. <?php echo $name;?> </p>
I guess this does not work with the solutions that you provided?
thanks again!
Probably don't need to use PHP if post #2 code is used.
You will need to add the test that causes the error message to display,
but you have not shown that portion of the script yet!
@pwinfrey
php sould echo out the $name variable.
So i have a certain static text, with php variable, that i want to show anyway. Only if someone gets an error, the explanational text should also be shown. I tried the code below, but that does not echo the php code.. (for this example i tried a simple echo)
Code:
<script type="text/javascript">
function send(){
document.getElementById('div_id').innerHTML = 'Please fill in the form below in order to contact us. <?php echo "dasadsasd";?> ';
var oldHTML = document.getElementById('div_id').innerHTML;
var newHTML = oldHTML + "<span style='color:red'>" + "explanational text" + "</span>";
document.getElementById('div_id').innerHTML = newHTML;
}
</script>
<p id='div_id'>Please fill in the form below in order to contact us. <?php echo "dasadsasd";?></p>
<input type='button' onclick='send()' value='Send'/>
I guess this is the case, because the form validation is located in a .js file in the head of my .php page?
@JMRKER
I tried your solution. That works, but in that case i have to make an extra div, called err0, and place it underneath my static text in my php file. This works great, but it leaves a little extra white space when the form is not submitted yet and no error is found. Is there anyway to hide the white space when the div is empty? and only show the text (+white space) when an error is found?
<script type="text/javascript">
var phpText = '<?php echo $name; ?>';
var original = 'Please fill in the form below in order to contact us.' + phpText;
function send(){
document.getElementById('div_id').innerHTML = original;
if (error) {
document.getElementById('div_id').innerHTML = original + "<span style='color:red'>" + "explanational text" + "</span>";
}
}
</script>
<p id='div_id'>Please fill in the form below in order to contact us.</p>
<input type='button' onclick='send()' value='Send'/>
When using JMRKER's method, use document.getElementById('err0').style.display = ''; instead of document.getElementById('err0').style.display = 'block';.
Can't figure this out though, so I hope that someone can help me out here.
Reply With Quote
Originally Posted by wzshop
Bookmarks